前端设计模式应用 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第3天
一、浏览器中的设计模式
- 单例模式
- 发布订阅模式
1. 单例模式
- 定义
单例模式，属于创建类型的一种常用的软件设计模式，它提供了一种创建对象的最佳方式
这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象
- 优点
1、在内存里只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如管理学院首页页面缓存）
2、避免对资源的多重占用（比如写文件操作）
- 应用场景
缓存，全局状态管理等
- 实现请求缓存
传统
先后请求两次，若两次时间差不超过50ms，请求成功
现代
如果缓存中没有，则调用api
2.发布订阅模式
- 定义
一种订阅机制，可在被订阅对象发生变化时通知订阅者
- 优点
时间上解耦、对象间解耦
- 应用场景
邮件订阅、上线订阅等
- 实现用户上线订阅
指定发布者
添加缓存列表——存放回调函数通知订阅者
发布消息——遍历缓存列表，触发回调函数
二、Javascript中的设计模式
1.原型模式
2.代理模式
3.迭代器模式
1.原型模式
- 定义
复制已有对象来创建新的对象
- 优点
1、性能提高
2、逃避构造函数的约束
- 应用场景
JS中对象创建的基本模式
- 创建上线订阅中的用户
2.代理模式
- 定义
一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口
- 优点
高扩展性、智能化。
- 应用场景
监控，代理工具，前端框架实现等
- 实现用户状态订阅
3.迭代器模式
- 定义
这种模式用于顺序访问集合对象的元素，不需要知道集合对象的底层表示
- 优点
1、它支持以不同的方式遍历一个聚合对象
2、迭代器简化了聚合类
3、在同一个聚合上可以有多个遍历
4、在迭代器模式中，增加新的聚合类和迭代器类都很方便，无须修改原有代码。
- 应用场景
数据结构中有多种数据类型，列表，树等，提供通用操作接口
- 用for of迭代所有组件
三、前端框架中的设计模式
1.代理模式
2.组合模式
1.用Vue组件实现计数器
2.前端框架中对DOM的代理
- DOM更新前后的钩子
3.组合模式
- 定义
是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构
- 优点
1、高层模块调用简单
2、节点自由增加。
- 应用场景
DOM，前端组件，文件目录，部门
- React的组建结构
设计原则
在使用设计模式前应该需要知道的几个原则(其中对应设计模式满足对应原则):
单一职责原则(
SRP)： 一个对象（只做一件事）
- 代理模式，迭代器模式，单例模式
最少知识原则(
LKP)： 一个软件实体应当尽可能少地与其他实体发生相互作用开放-封闭原则(
OCP)：软件实体（类，模块，函数）应该都是可以扩展，但是不可修改
- 发布-订阅模式，代理模式
