前端设计模式之状态模式

定义

状态（State）模式的定义：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。

简单的说，就是定义好各个状态（一般是定义好的），通过一个中间对象来设置和获取当前状态，并执行对应状态的方法。

结构：

1. 环境类（Context）角色：也称为上下文，它定义了客户端需要的接口，内部维护一个当前状态，并负责具体状态的切换。
2. 具体状态（Concrete State）角色：实现抽象状态所对应的行为，并且在需要的情况下进行状态切换。

解决的问题：

状态模式 主要是解决 switch 类型的情况，与 命令模式 的不同的是，状态模式没有作为 发起者 的角色。

实现

// 一个状态类，最起码需要一个对应的方法
abstract class State {
  abstract handle(): void;
}

interface IState extends State {}

// 环境类
class Context {
  state: IState;
  constructor(state: IState) {
    this.setState(state);
  }

  setState(state: IState) {
    this.state = state;
  }

  getState(): IState {
    return this.state;
  }
}

// 1. 由抽象状态类，实现不同状态
class StartState extends State {
  handle(): void {
    console.log("startState action");
  }
}
const startState = new StartState();

class EndState extends State {
  handle(): void {
    console.log("endState action");
  }
}
const endState = new EndState();

// 2. 使用 Context 设置当前选中的状态
const context = new Context(startState);
context.getState().handle();

context.setState(endState);
context.getState().handle();


// startState action
// endState action