设计模式之State模式（状态模式）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

简介：

State模式 ：当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象。把复杂的“判断逻辑”提取到不同的状态对象中

关键角色：

Context（上下文）： 一般是一个具有多个状态的类，当调用 request() 函数时会被拜托到状态对象。

State（状态接口）： 定义了所有具体状态的共同接口，任何状态都实现这个接口，这样就可以在状态之间相互转换。

ConcreteState（具体状态）： 实现状态接口，处理来自 Context 的要求。每一个 ConcreteState 都提供自己要求的实现。

应用场景：

日常的主要场景有：文件上传（上传中、上传成功、上传失败） ；接口请求处理（成功、失败、超时） ；页面展示处理（Loading态、正常展示、Empty态） 。 状态模式 主要是解决 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() {
    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

缺点：

State模式问题主要是逻辑分散化，状态逻辑分布到了很多的State的子类中，很难看到整个的状态逻辑图，这也带来了代码的维护问题。

State模式与Memento模式的区别：

state模式主要维护的是状态类，而Memento模式更多的是为了撤销，记录某一刻的状态点方便他的回溯。