JS设计模式-状态模式

介绍

• 一个对象有状态变化
• 每次状态变化都会触发一个逻辑
• 不能总是使用if...else来控制
  eg: 红绿灯 收藏/未收藏
  核心： 状态和主体分离

UML类图

uml_状态模式类图.png

代码演示

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())

场景

• 有限状态机
• 写一个简单的Promise

有限状态机

• 有限个状态，以及在这些状态间的变化
• 如交通信号灯
• 使用开源lib :javascript-state-machine

    
    


    
有限状态机
    
    
    
    
    

写一个Promise

Promise 三个状态

• pending 准备
• fullfilled 成功 （执行resolve)
• rejected 失败

设计原则验证

• 将状态对象和主题对象分离，状态的变化逻辑单独处理
• 符合开放封闭原则

本文资料来自慕课网-双越老师-Javascript 设计模式系统讲解与应用视频课程