Weekbin

一个厉害的前端新手

LV0
已经发布0篇文章,距离下一等级还需发布1篇文章

JavaScript 设计模式(38种)

设计模式最终解决的还是代码的复用性与拓展性问题,故在实际开发中也不必完全拘泥于某一种设计模式开发。

一、创建型设计模式(6种)

1. 简单工厂模式(静态工厂方法)

2. 工厂方法模式

简单工厂 plus 版本

3. 抽象工厂模式

抽象父类,字类继承抽象父类,具体业务逻辑实现在子类重写。

4. 建造者模式

高定,创建一个含有多个类实例的对象。

5. 原型模式

6. 单例模式

类只会实例化一次。

也可用命名空间实现。

也可用闭包实现私有变量。

二、结构型设计模式(7种)

1. 外观模式

为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。

2. 适配器模式

将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决。

如 Axios 源码中,判断环境是 Nodejs 还是 浏览器 环境,进而选择完全不同的处理机制的模式相同。

3. 代理模式

由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用。

4. 装饰着模式

在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户的更复杂需求。

如 TypeScript 种的装饰器。

5. 桥接模式

将业务逻辑抽象化(抽象类),桥接到具体的某个类,使其拓展功能。

6. 组合模式

组合若干个单体后的组合体,仍然具有单体的接口及组合特性,组合体本身仍然可以视为单体,即为组合模式表现。通常见于树形结构数据支撑的业务逻辑。

7. 享元模式

共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销。

三、行为型设计模式(11种)

1. 模板方法模式

Vue, React 的组件都可视为模板方法的例子。

2. 观察者模式

发布订阅的思想,Vue 的响应式就是观察者模式。

3. 状态模式

简化程序中的判断分支,状态不可见,程序运行中决定状态,决定状态后调用相应的处理函数。

4. 策略模式

与状态模式相似,策略可见,同一个函数调用不通的策略函数。

5. 职责链模式

细化功能颗粒度,将复杂逻辑分解为几个连续的过程,分别编码实现。

6. 命令模式

将方法封装在对象内部,外部以命令的方式调用。命令的发起者和命令的接受者解耦合。

7. 访问者模式

对于数据结构较稳定而访问方式未抽象或易改变的情况,封装访问器,复用访问逻辑。

8. 中介者模式

单向发布订阅模式。

9. 备忘录模式

一种缓存模式,类似带缓存的 proxy。

10. 迭代器模式

Vue 源码中 Utils.forEach 函数就是迭代器模式的例子。

11. 解释器模式

解析文档或解释路径有特殊规则的情况下,会用到这种设计模式。

四、技巧型设计模式(8种)

1. 链模式

例如,return this 就可以实现链式调用。

2. 委托模式

优化绑定事件数量,把绑定在 li 标签上的事件改为绑定在 ul 标签上。

3. 数据访问对象模式

对访问数据的方法进行封装,如封装对 localstorage 或数据库的访问方法,达到优化与复用访问逻辑的目的。

4. 节流模式

5. 简单模板模式

将节点创建过程合并,节省 dom 创建的开销。

6. 惰性模式

优化选择分支,一种是在脚本加载时重写,一种是第一次调用时重写。

7. 参与者模式

bind 函数就是参与者模式,将参数原封不动地传递给另一个函数。

8. 等待着模式

类似于 Promise.all 的实现。

五、架构型设计模式(6种)

1. 同步模块模式

SMD 模式,分而治之,模块化开发。

2. 异步模块模式

AMD 模式,实现异步模块机制,在模块加载完成前注册的事件全部存入缓存函数,在模块异步加载完成后触发缓存队列中的函数。

参考资料

3. Widget 模式

4. MVC 模式

MVC 即 Model View Controller。

5. MVP 模式

MVP 即 Model View Presenter。解开了 View 和 Model 的耦合。

6. MVVM 模式

MVVM 即 Model View ViewModle。Presenter 的 plus 版本,封装了一套响应数据的接口,对开发不可见。

up-to-top