主要分类

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

浏览器中的设计模式

单例模式

定义: 全局唯一访问的对象

使用单例模式实现请求缓存

只要import的是同一个request,就能实现单例模式,所有的请求都会集中到这个对象里处理,以实现缓存请求的效果

发布订阅模式

定义: 一种订阅机制,在订阅对象发生变化的时候发布消息

应用场景: 邮件订阅,上线订阅等

创建方法:

1. 定义一个User类,包含三个参数,名字,状态,和消息队列

2. 构造函数初始化参数,将状态初始化为未订阅,消息队列清空

3. 订阅方法: 向目标消息队列中添加通知对象和通知方法

4. 上线方法: 修改状态为上线,从消息队列中依次取出通知,并发布

使用方法:

1. new User 新建用户
2. user1和user2向user3的消息队列中添加消息
3. user3上线,user1和user2的消息依次向user3通知

JavaScript中的设计模式

原型模式

定义: 复制已有对象来创建新的对象

相比重新new 一个对象有更好的性能

创建一个原型对象,其他对象都基于这个原型对象被拷贝出来

现在创建三个user对象只需利用createUser方法

代理模式

定义: 可自定义控制对原对象的访问方式,并允许在更新前后做一些额外处理

一个对象或方法尽量只做一件事情,便于后续维护

1. new Proxy(target,handler)是js自带的一个创建代理的构造对象,其第一个参数是被代理的对象,第二个参数则是对该对象进行的操作,也是一个对象

2. handler.set()设置属性值操作的捕获器,target参数为目标对象,property为将被设置的属性名或 Symbol,value为新属性值,该方法返回一个布尔值,返回 true 代表属性设置成功,该方法会拦截目标对象的以下操作,指定属性值：proxy[foo] = bar 和 proxy.foo = bar,指定继承者的属性值：Object.create(proxy)[foo] = bar

3. 要添加新的功能只需要创建新的handlers即可

迭代器模式

定义: 在不暴露数据类型的情况下,访问集合中的数据

应用场景: 对于多种数类型的数据结构,提供通用的操作接口

利用for...of实现,迭代器操作

前端框架中的设计模式

代理模式

前端框架对dom的代理

组合模式

定义： 可多个对象组合使用,也可单个对象独立使用

react 的组件结构