状态机用于管理对象行为随状态变化的逻辑。在JavaScript中，通过定义状态、事件、转移规则和动作，可实现清晰的状态流转控制。文中给出了一个简易StateMachine类，支持初始化配置、状态切换及事件触发，并通过示例展示了播放器和开关灯的状态管理。进一步扩展了带onEnter和onExit钩子的状态机，支持状态变更时执行副作用函数，提升灵活性。该设计适用于按钮控制、页面流程等场景，具备良好可维护性，建议在生产环境中补充校验与调试机制。
状态机是一种处理对象行为随状态变化而变化的设计模式。在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; }}
使用示例：模拟一个播放器的状态控制
立即学习“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设计模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535631.html
微信扫一扫 
支付宝扫一扫 
