前端设计模式与应用|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天。

本堂课的知识要点：

• 前端软件设计模式中常见问题
• 浏览器中的前端设计模式：单例模式，发布者订阅模式
• JavaScript中的设计模式

常见问题解决

• 历史经验总结：无论是其他方面如建筑领域，还是再我们的前端设计领域，都有历史经验的总结，给我们参考。
  
• 解决方案模型，与特定的语言无关。
  

浏览器中的设计模式

设计模式：可复用面向对象软件基础

23种设计模式

类型：

创建型————如何创建一个对象
结构型—————如何灵活的将对象组装成较大的结构
行为型————负责对象间的高效通信和职责划分

单例模式

全局唯一访问对象window
应用场景：缓存，全局状态管理

发布者订阅模式

一种订阅机制，可在被订阅对象发生变化时通知订阅者 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅 。

JavaScript中的设计模式

• 原型模式
  
• 代理模式
  
• 迭代器模式
  

原型模式

复制已有对象来创建新的对象

应用场景：js中创建对象的基本模式

代理模式

可自定义控制源对象的访问模式，并且允许在更新前后做一些额外处理

应用场景

• 监控
• 代理工具
• 前端框架实现

前端框架中的设计模式

• 代理模式
• 组合模式
  

代理模式

例子：
vue实现计数器

前端框架对DOM操作的代理

更改DOM属性————更新虚拟DOM————Diff————视图更新

组合模式

可多个组合使用，也可以单个对象独立使用。
应用场景： DOM 前端组件 文件目录 部门