抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

设计模式的分类

模式 & 描述 包括
创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用 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)

设计模式

工厂模式

表现形式

调用工厂函数返回新对象

使用场景

  1. Vue3-createApp:将全局改变Vue实例的行为,移到Vue实例上
  2. 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 遍历的是值,继承而来的无法遍历,无法遍历对象

可迭代对象:实现迭代协议

评论