使用JavaScript实现一个简单的状态机_js编程思想-js教程-PHP中文网

使用JavaScript实现一个简单的状态机_js编程思想

紅蓮之龍

发布： 2025-10-30 22:33:15

原创

515人浏览过

状态机通过定义状态、事件和转移规则来管理对象行为变化。在JavaScript中可用对象实现，如电灯开关有'off'和'on'状态，响应'push'事件切换；进一步可封装为工厂函数createStateMachine，支持初始化、转移和回调，用于订单流程等场景；还可扩展钩子函数onEnter/onExit，实现登录流程中的提示与副作用处理，提升可维护性与扩展性。

使用javascript实现一个简单的状态机_js编程思想

状态机是一种处理对象行为随状态变化而改变的编程模型。在JavaScript中实现一个简单的状态机，可以帮助我们更好地管理组件或对象的复杂状态流转，比如按钮的启用/禁用、页面流程控制等场景。核心思路是：定义状态、定义事件、明确状态如何响应事件进行转移。

1. 状态机的基本结构

一个最简状态机包含三个要素：当前状态（currentState）、允许的状态集合、以及状态转移规则（transitions）。我们可以用对象来描述这些规则，让代码清晰且易于维护。

例如，设计一个电灯开关的状态机：

状态有：'off' 和 'on'
事件有：'push'（按下开关）
规则：'off' + 'push' → 'on'；'on' + 'push' → 'off'

基于此，可以写出如下实现：

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

const lightSwitch = {
  currentState: 'off',
  transitions: {
    off: { push: 'on' },
    on:  { push: 'off' }
  },

  // 触发事件的方法
  trigger(event) {
    const nextState = this.transitions[this.currentState][event];
    if (nextState) {
      this.currentState = nextState;
      console.log(`状态切换为: ${this.currentState}`);
    } else {
      console.warn(`不允许的事件 "${event}" 在状态 "${this.currentState}" 下`);
    }
  }
};

// 使用示例
lightSwitch.trigger('push'); // 输出：状态切换为: on
lightSwitch.trigger('push'); // 输出：状态切换为: off

登录后复制

2. 封装为可复用的函数

为了提升复用性，我们可以将状态机抽象成一个工厂函数，传入配置即可生成不同的状态机实例。

function createStateMachine(config) {
  return {
    currentState: config.initial,
    transitions: config.transitions,

    trigger(event) {
      const currentState = this.currentState;
      const nextState = this.transitions[currentState]?.[event];

      if (nextState) {
        this.currentState = nextState;
        // 可选：执行状态变更后的回调
        if (typeof config.onChange === 'function') {
          config.onChange(currentState, nextState, event);
        }
      } else {
        console.warn(`无效转移: ${currentState} --${event}-> ${nextState}`);
      }
    }
  };
}

登录后复制

使用这个工厂创建一个订单状态机：

Giiso写作机器人

Giiso写作机器人，让写作更简单

查看详情

const orderMachine = createStateMachine({
  initial: 'pending',
  transitions: {
    pending:   { pay: 'paid', cancel: 'canceled' },
    paid:      { ship: 'shipped', refund: 'refunded' },
    shipped:   { deliver: 'delivered' },
    canceled:  {},
    refunded:  {},
    delivered: {}
  },
  onChange(from, to, event) {
    console.log(`订单从 "${from}" 经 "${event}" 变为 "${to}"`);
  }
});

// 模拟操作
orderMachine.trigger('pay');     // 输出：订单从 "pending" 经 "pay" 变为 "paid"
orderMachine.trigger('ship');    // 输出：订单从 "paid" 经 "ship" 变为 "shipped"
orderMachine.trigger('deliver'); // 输出：订单从 "shipped" 经 "deliver" 变为 "delivered"

登录后复制

3. 添加状态进入/退出的钩子

在实际开发中，状态切换时常需要执行副作用，比如发送请求、更新UI。可以在状态机中加入钩子函数（hooks），增强扩展能力。

改进版：支持每个状态定义 onEnter 和 onExit

function createStateMachineWithHooks(config) {
  let currentState = config.initial;

  function getStateConfig(state) {
    return config.states?.[state] || {};
  }

  return {
    trigger(event) {
      const nextState = config.transitions?.[currentState]?.[event];
      if (!nextState) {
        console.warn(`不允许的事件 "${event}" 在状态 "${currentState}"`);
        return;
      }

      // 执行当前状态的退出逻辑
      const currentConfig = getStateConfig(currentState);
      currentConfig.onExit && currentConfig.onExit();

      // 切换状态
      const previous = currentState;
      currentState = nextState;

      // 执行新状态的进入逻辑
      const nextConfig = getStateConfig(nextState);
      nextConfig.onEnter && nextConfig.onEnter(previous);

      // 外部监听
      config.onChange && config.onChange(previous, nextState, event);
    },

    getState() {
      return currentState;
    }
  };
}

登录后复制

示例：带提示的用户登录流程

const loginMachine = createStateMachineWithHooks({
  initial: 'idle',
  states: {
    idle: {
      onEnter: () => console.log('等待用户操作...')
    },
    loading: {
      onEnter: () => console.log('正在登录...'),
      onExit:  () => console.log('登录请求完成')
    },
    success: {
      onEnter: () => console.log('登录成功！欢迎回来')
    },
    error: {
      onEnter: (from) => console.log(`从 ${from} 登录失败`)
    }
  },
  transitions: {
    idle:     { login: 'loading' },
    loading:  { resolve: 'success', reject: 'error' },
    success:  {},
    error:    { retry: 'idle' }
  }
});

loginMachine.trigger('login');    // 进入 loading
loginMachine.trigger('resolve');  // 进入 success

登录后复制

基本上就这些。通过这种模式，你可以把复杂的条件判断转化为清晰的状态流转，代码更易读、更健壮。尤其适合表单流程、游戏角色行为、UI交互控制等场景。不复杂但容易忽略的是：定义好边界和非法转移，避免状态失控。

以上就是使用JavaScript实现一个简单的状态机_js编程思想的详细内容，更多请关注php中文网其它相关文章！