使用J*aScript实现一个简单的状态机_j*ascript设计模式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用JaScript实现一个简单的状态机_jascript设计模式

2025-11-04

浏览次数：次

返回列表

状态机用于管理对象行为随状态变化的逻辑。在J*aScript中，通过定义状态、事件、转移规则和动作，可实现清晰的状态流转控制。文中给出了一个简易StateMachine类，支持初始化配置、状态切换及事件触发，并通过示例展示了播放器和开关灯的状态管理。进一步扩展了带onEnter和onExit钩子的状态机，支持状态变更时执行副作用函数，提升灵活性。该设计适用于按钮控制、页面流程等场景，具备良好可维护性，建议在生产环境中补充校验与调试机制。

使用javascript实现一个简单的状态机_javascript设计模式

状态机是一种处理对象行为随状态变化而变化的设计模式。在J*aScript中，状态机可以帮助我们清晰地管理复杂的状态流转逻辑，比如按钮的启用/禁用、页面流程控制等场景。下面是一个简单但实用的状态机实现。

基本概念

一个状态机包含：

状态（State）：对象当前所处的阶段，如“空闲”、“运行”、“暂停”
事件（Event）：触发状态变化的动作，如“开始”、“停止”
转移规则（Transitions）：定义在某个状态下，某个事件触发后应切换到哪个新状态
动作（Actions）：状态改变时执行的副作用函数

实现一个简易状态机

我们可以封装一个通用的StateMachine类，支持定义状态、事件和转移逻辑。

class StateMachine {
  constructor(config) {
    this.state = config.initial; // 初始状态
    this.transitions = config.transitions || {};
  }

  // 获取当前状态
  getState() {
    return this.state;
  }

  // 触发事件，尝试状态转移
  trigger(event) {
    const transition = this.transitions[this.state]?.[event];
    if (transition) {
      this.state = transition;
      return true;
    }
    console.warn(`无法在状态 '${this.state}' 下触发事件 '${event}'`);
    return false;
  }
}

使用示例：模拟一个播放器的状态控制

Shoping购物网源码

该系统采用多层模式开发，这个网站主要展示女装的经营，更易于网站的扩展和后期的维护，同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性，本网站实现了购物车,产品订单管理，产品展示，等等，后台实现了动态权限的管理，客户管理，订单管理以及商品管理等等，前台页面设计精致，后台便于操作等。实现了无限子类的添加，实现了动态权限的管理，支持一下一个人做的辛苦

0 查看详情 Shoping购物网源码

const playerSM = new StateMachine({
  initial: 'idle',
  transitions: {
    idle: {
      play: 'playing'
    },
    playing: {
      pause: 'paused',
      stop: 'idle'
    },
    paused: {
      play: 'playing',
      stop: 'idle'
    }
  }
});

console.log(playerSM.getState()); // 'idle'
playerSM.trigger('play');
console.log(playerSM.getState()); // 'playing'
playerSM.trigger('pause');
console.log(playerSM.getState()); // 'paused'

扩展：支持状态变更钩子

实际开发中，状态变化常伴随UI更新或数据请求。可以加入onEnter或onExit钩子增强灵活性。

class StateMachineWithActions {
  constructor(config) {
    this.state = config.initial;
    this.transitions = config.transitions || {};
    this.actions = config.actions || {};
  }

  trigger(event) {
    const nextState = this.transitions[this.state]?.[event];
    if (!nextState) {
      console.warn(`无效转换: ${this.state} + ${event}`);
      return false;
    }

    // 执行离开当前状态的动作
    this.actions.onExit?.[this.state]?.();

    this.state = nextState;

    // 执行进入新状态的动作
    this.actions.onEnter?.[this.state]?.();

    return true;
  }

  getState() {
    return this.state;
  }
}

带动作的使用示例：

const lightSM = new StateMachineWithActions({
  initial: 'off',
  transitions: {
    off: { switch: 'on' },
    on: { switch: 'off' }
  },
  actions: {
    onEnter: {
      on: () => console.log('灯已打开'),
      off: () => console.log('灯已关闭')
    }
  }
});

lightSM.trigger('switch'); // 输出：灯已打开
lightSM.trigger('switch'); // 输出：灯已关闭