JavaScript-状态模式

状态模式

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

示例：交通信号灯的不同颜色变化

传统的 UML 类图

javascript 中的 UML 类图

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

应用场景

有限状态机

• 有限个状态，以及在这些状态之间的变化
• 交通信号灯
• 利用开源的 lib：JavaScript-state-machine
• javascript-state-machine
• 运行 npm install javascript-state-machine --save

有限状态机的收藏与取消

  
    
    
  
  
    
有限状态机
    

    
    
    
  

写一个简单的 promise

• promise 就是一个有限自动机
• promise 三种状态：pending fullfilled rejected
• pending -> fullfilled 或者 pending -> rejected
• 不能逆向变化

设计原则验证

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