前端设计模式 - 状态模式解读，代码实现 js 版本

前端

2024-01-21 14:09:10

状态模式：灵活应对对象状态变化

在软件开发中，我们经常需要应对对象状态不断变化的情况。状态模式是一种行为设计模式，它通过将对象的行为与它的内部状态解耦，为我们提供了一种优雅的解决方案，帮助我们创建灵活且易于维护的代码。

状态模式简介

状态模式的核心思想是使用单独的状态对象来表示对象的内部状态。当对象的内部状态发生变化时，它会创建一个或修改一个新的状态对象，并将其作为它的新状态。状态对象负责处理对象的行为，因此当对象的内部状态发生变化时，它的行为也会随之改变。

状态模式的优点

降低耦合性： 对象的行为与其内部状态解耦，使我们可以独立地修改两者，从而提高代码的可维护性和可扩展性。
提高灵活性： 状态模式允许我们轻松地添加新状态，而不影响现有代码。
增强可重用性： 我们可以将状态对象作为可重用的组件，在不同的对象中使用，从而提高代码的可重用性。

在 JavaScript 中实现状态模式

在 JavaScript 中实现状态模式非常简单，我们可以使用以下步骤：

创建一个抽象状态类，定义一个处理事件的方法。
创建具体状态类，继承自抽象状态类，并实现处理事件的方法。
创建一个上下文对象，包含当前状态对象。
为上下文对象提供方法来设置和获取状态对象。
为上下文对象提供方法来处理事件，该方法会调用当前状态对象的处理事件方法。

代码示例

// 抽象状态类
class State {
  constructor() {
    if (this.constructor === State) {
      throw new Error("Abstract class State cannot be instantiated.");
    }
  }

  handleEvent() {
    throw new Error("Abstract method handleEvent must be implemented.");
  }
}

// 具体状态类 A
class StateA extends State {
  handleEvent() {
    console.log("State A handled event.");
  }
}

// 具体状态类 B
class StateB extends State {
  handleEvent() {
    console.log("State B handled event.");
  }
}

// 上下文对象
class Context {
  constructor() {
    this._state = null;
  }

  set state(state) {
    this._state = state;
  }

  get state() {
    return this._state;
  }

  handleEvent() {
    this._state.handleEvent();
  }
}

// 用法
const context = new Context();
context.state = new StateA();
context.handleEvent(); // 输出: State A handled event.

context.state = new StateB();
context.handleEvent(); // 输出: State B handled event.