如何用现代JavaScript实现一个状态机（State Machine）？-js教程-PHP中文网

如何用现代JavaScript实现一个状态机（State Machine）？

幻影之瞳

发布： 2025-09-24 22:47:01

原创

974人浏览过

答案：使用ES6类、Map和异步方法实现状态机，支持状态转换校验与钩子函数。通过定义初始状态、允许的转移路径及事件触发规则，结合constructor初始化配置，can方法校验转换合法性，handle方法执行带前后钩子的异步状态变更，适用于订单等流程控制场景，代码清晰可扩展。

如何用现代javascript实现一个状态机（state machine）？

用现代JavaScript实现一个状态机，关键在于明确状态、事件和状态转移规则。你可以利用ES6+的语法特性，如类（class）、Map结构和方法封装，让状态机清晰、可维护且易于扩展。

定义状态机的基本结构

一个状态机包含当前状态、允许的状态列表、触发状态变化的事件，以及每个状态下允许的转换规则。使用class来组织逻辑，可以提升代码的可读性和复用性。

下面是一个基础的State Machine类：

class StateMachine {
  constructor(config) {
    this.currentState = config.initial;
    this.states = config.states; // 如 { idle: ['loading'], loading: ['success', 'error'] }
    this.transitions = new Map();

    // 构建 transitions 映射：事件 => 状态对
    Object.keys(config.states).forEach(state => {
      config.states[state].forEach(event => {
        this.transitions.set(event, { from: state, to: event });
      });
    });
  }

  can(event) {
    const transition = Array.from(this.transitions.values()).find(t => t.from === this.currentState && t.to === event);
    return !!transition;
  }

  handle(event) {
    if (this.can(event)) {
      this.currentState = event;
      return true;
    }
    throw new Error(`Invalid transition: ${this.currentState} → ${event}`);
  }

  getCurrentState() {
    return this.currentState;
  }
}

登录后复制

使用示例：模拟订单流程

假设你有一个订单系统，状态包括“待支付”、“已支付”、“发货中”、“已完成”。可以用如下方式配置状态机：

立即学习“Java免费学习笔记（深入）”；

const orderMachine = new StateMachine({
  initial: 'pending',
  states: {
    pending: ['paid'],
    paid: ['shipped'],
    shipped: ['delivered'],
    delivered: []
  }
});

console.log(orderMachine.getCurrentState()); // "pending"
orderMachine.handle('paid');
console.log(orderMachine.getCurrentState()); // "paid"
orderMachine.handle('shipped');
console.log(orderMachine.getCurrentState()); // "shipped"

登录后复制

增强功能：添加钩子和异步支持

实际项目中，状态切换可能需要执行副作用，比如发送请求或更新UI。可以在转换前后加入钩子函数。

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

查看详情

改进handle方法：

async handle(event, ...args) {
  const transition = Array.from(this.transitions.values()).find(
    t => t.from === this.currentState && t.to === event
  );

  if (!transition) {
    throw new Error(`Invalid transition: ${this.currentState} → ${event}`);
  }

  const beforeKey = `before${event.charAt(0).toUpperCase() + event.slice(1)}`;
  const afterKey = `after${event.charAt(0).toUpperCase() + event.slice(1)}`;

  if (this[beforеKey] && typeof this[beforеKey] === 'function') {
    await this[beforеKey](...args);
  }

  this.currentState = event;

  if (this[аfterKey] && typeof this[аfterKey] === 'function') {
    await this[аfterKey](...args);
  }

  return true;
}

登录后复制

这样你就可以在子类中定义beforePaid、afterShipped等方法处理业务逻辑。