js 实现状态机

状态机是一种数学模型，用于描述系统在不同状态下的行为以及状态之间的转换。在前端开发中，状态机可以帮助我们更好地管理组件的状态和状态之间的转换。

基础概念

状态（State）：系统或对象在其生命周期内所满足的条件或模式。
事件（Event）：触发状态转换的外部刺激。
转换（Transition）：从一个状态到另一个状态的过程。
动作（Action）：在状态转换过程中执行的操作。

优势

清晰的状态管理：状态机可以清晰地定义系统所有可能的状态和状态之间的转换。
易于维护：状态机的结构化特性使得代码更易于理解和维护。
减少错误：通过定义状态转换规则，可以减少因状态管理不当导致的错误。

类型

有限状态机（Finite State Machine, FSM）：状态数量有限的状态机。
分层状态机：将状态机分层，使得复杂系统更易于管理。
并发状态机：处理多个状态同时发生的情况。

应用场景

表单验证：管理表单的不同验证状态。
游戏开发：管理游戏角色的不同状态（如行走、跳跃、攻击）。
UI组件：管理UI组件的不同交互状态。

示例代码

下面是一个简单的JavaScript实现状态机的示例：

class StateMachine {
  constructor(initialState, transitions) {
    this.currentState = initialState;
    this.transitions = transitions;
  }

  transition(event) {
    const nextState = this.transitions[this.currentState]?.[event];
    if (nextState) {
      this.currentState = nextState;
      console.log(`Transitioned from ${this.currentState}`);
    } else {
      console.log(`Invalid transition from ${this.currentState} with event ${event}`);
    }
  }
}

// 定义状态和转换
const transitions = {
  idle: { start: 'running' },
  running: { stop: 'idle', pause: 'paused' },
  paused: { resume: 'running', stop: 'idle' }
};

// 创建状态机实例
const sm = new StateMachine('idle', transitions);

// 触发状态转换
sm.transition('start'); // Transitioned from idle
sm.transition('pause'); // Transitioned from running
sm.transition('resume'); // Transitioned from paused
sm.transition('invalidEvent'); // Invalid transition from running with event invalidEvent