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

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

设计模式分类

• 有23种设计模式
• 创建型：如何创建一个对象
• 结构型：如何灵活的将对象组装成较大的结构
• 行为型：负责对象间的高效通信与职责划分

浏览器中的设计模式

1.单例模式

• 定义：单例设计模式（Singleton Design Pattern），如果一个类只允许创建一个对象（或者实例），那这个类就是一个单例类，这种设计模式就叫作单例设计模式，简称单例模式。
• 应用场景：全局状态管理

2.发布定义模式

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

JavaScript中的设计模式

原型模式

• 定义：复制已有模式来创建新的对象
• 所有的引用类型（数组、对象、函数），都具有对象特征，即可自由扩展属性；
• 原型对象：prototype 在js中，函数对象其中一个属性：原型对象prototype。普通对象没有prototype属性，但有_proto_属性。 原型的作用就是给这个类的每一个对象都添加一个统一的方法，在原型中定义的方法和属性都是被所以实例对象所共享。
• 借鉴文章原型设计模式

代理模式

• 可自定义控制对原对象的访问方式，并允许在更新前后做一些额外处理
• 应用：监控，代理工具，前端框架实现等

迭代器模式

• 在不暴露数据类型的情况下访问集合中的数据

前端框架中的设计模式

• 前端框架中对DOM操作的代理

组合模式

• 可多个对象组合使用，也可单个对象独立使用
• 应用于DOM，部门，前端组件