状态模式

介绍

一个对象有状态变化;
每次状态变化都会触发一个逻辑;
不能总是用if...else来控制;

设计原则验证

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

示例

交通信号灯不同颜色的变化;

// 状态（红灯、绿灯、黄灯）
class State {
  constructor(color) {
    this.color = color
  }
  handle(context){
    console.log(`切换 为 ${this.color} 灯`);
    // 设置状态
    context.setState(this)
  }
}

// 主体
class Context {
  constructor(color) {
    this.state = null;
  }
  // 获取状态
  getState(){
    return this.state
  }
  setState(state){
    this.state = state
  }
}

// 测试
let context = new Context()
let green = new State('green');
let yellow = new State('yellow');
let red = new State('red');

// 绿灯亮了
green.handle(context);
console.log(context.getState()) // 打印状态

// 黄灯亮了
yellow.handle(context)
console.log(context.getState()) // 打印状态

// 红灯亮了
red.handle(context)
console.log(context.getState()) // 打印状态

场景

有限状态机
- 有限个状态、以及在这些状态之间的变化
- 如交通信号灯
- 开源lib：javascript-state-machine
- 测试代码
写一个简单的 Promise