使用JavaScript实现一个简单的状态机_javascript设计模式-js教程-PHP中文网

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

betcha

发布： 2025-11-04 17:59:02

原创

361人浏览过

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

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

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

基本概念

一个状态机包含：

状态（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;
  }
}

登录后复制

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

现代化家居响应式网站模板1.0

现代化家居响应式网站模板源码是以cmseasy进行开发的家居网站模板。该软件可免费使用，模板附带测试数据！模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做环保类网站的明确选择。无论是在电脑、平板、手机上都可以访问到排版合适的网站，即便是微信等

查看详情

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

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'); // 输出：灯已关闭

登录后复制

基本上就这些。这个简单的状态机设计清晰、易于维护，适合中小型项目中的状态逻辑抽象。不复杂但容易忽略的是边界处理和错误提示，生产环境中建议加上更完善的校验和调试支持。

以上就是使用JavaScript实现一个简单的状态机_javascript设计模式的详细内容，更多请关注php中文网其它相关文章！