设计模式的分类
| 模式 & 描述 | 包括 |
|---|---|
| 创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用 new 运算符直接实例化对象。这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。 | 工厂模式(Factory Pattern)抽象工厂模式(Abstract Factory Pattern)单例模式(Singleton Pattern)建造者模式(Builder Pattern)原型模式(Prototype Pattern) |
| 结构型模式 这些模式关注对象之间的组合和关系,旨在解决如何构建灵活且可复用的类和对象结构。 | 适配器模式(Adapter Pattern)桥接模式(Bridge Pattern)过滤器模式(Filter、Criteria Pattern)组合模式(Composite Pattern)装饰器模式(Decorator Pattern)外观模式(Facade Pattern)享元模式(Flyweight Pattern)代理模式(Proxy Pattern) |
| 行为型模式 这些模式关注对象之间的通信和交互,旨在解决对象之间的责任分配和算法的封装。 | 责任链模式(Chain of Responsibility Pattern)命令模式(Command Pattern)解释器模式(Interpreter Pattern)迭代器模式(Iterator Pattern)中介者模式(Mediator Pattern)备忘录模式(Memento Pattern)观察者模式(Observer Pattern)状态模式(State Pattern)空对象模式(Null Object Pattern)策略模式(Strategy Pattern)模板模式(Template Pattern)访问者模式(Visitor Pattern) |
设计模式
工厂模式
表现形式
调用工厂函数返回新对象
使用场景
- Vue3-createApp:将全局改变Vue实例的行为,移到Vue实例上
- axios-create:基于自定义配置新建实例
单例模式
表现形式
整个系统只有一个单例对象
使用场景
vant中的toast和notify组件
vue中的use方法
观察者模式
表现形式
在对象之间定义一个一对多的依赖,当一个对象状态改变的时候,所有依赖的对象都会自动收到通知
使用场景
addEventListener
vue中的watch
react中的useEffect
发布订阅模式
表现形式
与观察者模式相似,有中间商进行发布订阅
使用场景
pubsub.js
vue的provide与inject
原型模式
表现形式
复制一个已经存在的实例来返回新的实例,而不是新建实例
使用场景
Object.create()
vue的数组方法重写
代理模式
表现形式
为一个对象提供一个代用品或占位符,以便控制对它的访问
使用场景
缓存代理:第一次查询的数据通过接口获取,重复查询通过缓存获取
迭代器模式
表现形式
遍历容器中的每一个元素
使用场景
for in 和 for of
区别:
- for in 遍历的是索引,继承而来的也可以遍历
- for of 遍历的是值,继承而来的无法遍历,无法遍历对象
可迭代对象:实现迭代协议