前端 JS 设计模式之状态模式和其它设计模式

一、状态模式

1. 状态模式，一个对象有状态变化。每次状态变化都会触发一个逻辑，不能总是用 if-else 来控制。
2. 对于状态模式的理解，可以举一个例。比如在十字路口的时候，交通信号灯不同颜色的变化，会有其相应的指示命令。
3. 对于状态模式的场景，比如有限状态机、一个简单的 Promise 等等。有限状态机是有限个状态，以及在这些状态之间的变化，比如交通灯。
4. 状态模式的设计原则验证，将状态对象和主题对象分离，状态的变化逻辑单独处理，符合开放封闭原则。
5. 状态模式的代码，如下所示：

// 状态
class State {
    constructor(color) {
        this.color = color
    }
    handle(context) {
        console.log(`turn to ${this.color} light`)
        context.setState(this)
    }
}

// 主体
class Context {
    constructor() {
        this.state = null
    }
    setState(state) {
        this.state = state
    }
    getState() {
        return this.state
    }
}

// 测试代码
let context = new Context()

let greed = new State('greed')
let yellow = new State('yellow')
let red = new State('red')

// 绿灯亮了
greed.handle(context)
console.log(context.getState())
// 黄灯亮了
yellow.handle(context)
console.log(context.getState())
// 红灯亮了
red.handle(context)
console.log(context.getState())

二、原型模式

1. 原型模式，clone 自己，生成一个新对象。java 默认有 clone 接口，不用自己实现。
2. 对比 JS 中的原型 prototype，prototype 可以理解为 ES6 class 的一种底层原理，而 class 是实现面向对象的基础，并不是服务于某个模式。若干年后 ES6 普及，可能会忽略掉 prototype，但是 Object.create 是会永久存在的。

三、桥接模式

1. 桥接模式，用于把抽象化与实现化解耦，使得二者可以独立变化。
2. 桥接模式的设计验证原则，抽象和实现分类，解耦，符合开放封闭原则。

四、组合模式

1. 组合模式，生成树形结构，表示整体与部分的关系，让整体和部分都具有一致的操作方式。
2. 对于组合模式的场景应用，在虚拟 DOM 中的 vnode 是这种形式，但是数据类型简单。
3. 对于组合模式，整体和单个节点的操作是一致的，整体和单个节点的数据结构也保持一致。
4. 组合模式的设计原则验证，将整体和单个节点的操作抽象出来，符合开放封闭原则。

五、享元模式

1. 享元模式，共享内存，主要考虑的是内存，而非效率。相同的数据，共享使用。
2. 享元模式的设计原则验证，将相同的部分抽象出来，符合开放封闭原则。

六、策略模式

1. 策略模式，不同策略分开处理，避免出现大量的 if...else 或者 switch...case。
2. 策略模式的设计原则验证，不同策略，分开处理，而不是混合在一起，符合开放封闭原则。

七、模版方法模式和职责连模式

1. 模版方法模式，通过一个模版封装起来，调用的时候就可以直接使用。
2. 职责连模式，一步操作可能分位多个职责角色来完成，把这些角色都分开，然后用一个链串起来，将发起者和各个处理者进行隔离。
3. JS 的链式操作，职责链模式和业务结合较多，JS 中能联想到链式操作。jQuery 的链式操作，Promise.then 的链式操作。
4. 职责连模式的设计原则验证，发起者于各个处理者进行隔离，符合开放封闭原则。

八、命令模式

1. 命令模式，执行命令时，发布者和执行者分开。中间加入命令对象，作为中转站。
2. 对于命令模式，发送者发出命令，调用命令对象，命令对象接收命令，调用接受者对应接口。
3. 对于命令模式在 JS 中的应用，网页富文本编辑器操作，浏览器封装了一个命令对象。
4. 命令模式的设计原则验证，命令对象于执行对象分开，解耦，符合开放封闭原则。

九、备忘录模式

1. 备忘录模式，随时记录一个对象的状态变化，随时可以恢复之前的某个状态，比如撤销功能。
2. 备忘录模式的设计原则验证，状态对象于使用者分开，解耦，符合开放封闭原则。

十、中介者模式

1. 中介者模式，如果有很多个对象之间相互存在依赖关系，这个时候可以用中介者去管理，各个对象与中介者之间进行联系。
2. 中介者模式的设计原则验证，将各个关联对象通过中介者隔离，符合开放封闭原则。

十一、访问者模式和解释器模式

1. 访问者模式， 将数据操作和数据结构进行分离，使用场景不多。
2. 解释器模式，描述语言语法如何定义，如何解释和编译，用于专业场景。