前端10种设计模式与应用-总结版

76 阅读2分钟

1 工厂(factory)模式- 创建和使用对象分离

例: 索引表

2 单例(singleton)模式-管理全局状态和资源

例: 全局变量

image.png

3 发布订阅模式(publish-subscribe)-消息队列模式 实现组件之间的通信

image.png

image.png

4 观察者(observer)模式-对象存在一对多关系时 所有观察者后悔收到通知并操作

例: 事件监听 回调函数

image.png

5 中介者(mediator)模式 通过中介对象封装对象之间的交互

例: 自定义hooks,比如reducer

image.png

通过引入中介对象 组向中介者对象发送消息或者事件 中介负责接受并分发消息活事件

6 装饰器(decorator)模式- 允许向一个现有的对象添加新的功能,同时又不改变其结构 ---

例如,手机上套一个壳可以保护手机,壳上粘一个指环,可以挂在手指上不容易滑落,这就是一种装饰。手机还是那个手机,手机的功能一点都没变,只是在手机的外面装饰了一些其他附加的功能。

例: 动态修改组件的行为和样式 原组件样式上面动态修改

image.png

a 扩展对象属性或者方法

// 使用装饰函数来扩展原始对象 
const decoratedObj = barDecorator(obj); 

decoratedObj.foo(); // 输出 "foo" 

decoratedObj.bar(); // 输出 "bar"

7 策略模式-strategy -定义一系列算法并封装 根据策略动态切换组件的算法和行为

8 适配器(adapter)模式 类接口转换为客户端期望的接口 处理不同浏览器兼容问题

9 职责链(chain of responsibility) 为了避免请求发送者与多个请求处理者耦合将所有请求处理的通过前一对象记住下一个对象的方式 连成一条链然后沿着请求链传递 知道有对象处理
套娃依次找最后一级执行

例: props里面有方法依次传递 直到最后执行

image.png

10 代理模式(proxy) :代理对象充当原始对象的中介 客户端与代理对象交互 代理对象再将请求转发给原始对象 (有点像中介)

例1: proxy本地代理

例2: 登录拦截机制的思想 用户登录后 代理对象先检查用户的权限 只有具有相应权限的用户才能访问某些功能或者页面

image.png

例3: es6 新增proxy对象实现