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

亦凉 2023-02-16 00:44 16阅读 0赞

#### 一、状态模式 ####

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.  解释器模式，描述语言语法如何定义，如何解释和编译，用于专业场景。