状态机用于管理对象行为随状态变化的逻辑。在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'); // 输出：灯已关闭
基本上就这些。这个简单的状态机设计清晰、易于维护，适合中小型项目中的状态逻辑抽象。不复杂但容易忽略的是边界处理和错误提示，生产环境中建议加上更完善的校验和调试支持。 
