有限状态机（FSM）是一种描述对象在有限状态间转换的模型，包含状态、事件、转移和动作。通过JavaScript实现状态模式可管理如播放器的状态流转：定义状态类封装行为，上下文委托操作，实现清晰解耦。示例中播放器有idle、playing、paused三种状态，支持play、pause、stop操作，状态切换逻辑隔离，符合开闭原则。还可扩展为通用FSM类，通过配置定义初始状态和转移规则，提升复用性与可维护性，适用于订单、登录等场景。
状态模式是一种行为设计模式，适用于对象的行为依赖于其内部状态，并且在运行时根据状态改变行为的场景。结合有限状态机（Finite State Machine, FSM）的思想，使用 JavaScript 实现状态模式可以清晰地管理复杂的状态流转逻辑，比如订单流程、用户登录状态、游戏角色行为等。
什么是有限状态机（FSM）
有限状态机是一种数学模型，用来描述对象在有限个状态之间转换的过程。一个 FSM 通常包含：
- 状态（States）：对象可能处于的明确状态，如 "空闲"、"运行"、"暂停"
- 事件（Events）：触发状态转换的动作，如 "开始"、"停止"
- 转移（Transitions）：定义在某个状态下接收到某个事件后，应切换到哪个新状态
- 动作（Actions）：状态进入或退出时执行的逻辑
用 JavaScript 实现状态模式 + FSM
我们通过一个简单的播放器示例来实现：播放器有三种状态 —— 待机（idle）、播放（playing）、暂停（paused），支持“播放”、“暂停”、“停止”三个操作。
核心思路是：
立即学习“Java免费学习笔记（深入）”；
奥硕企业网站管理系统3.0.2
下载
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自
- 每个状态封装自己的行为
- 上下文对象（播放器）持有当前状态，并将操作委托给当前状态对象处理
- 状态之间通过预定义规则进行切换
// 状态接口（约定方法）
class PlayerState {
play(player) { throw new Error('Not implemented'); }
pause(player) { throw new Error('Not implemented'); }
stop(player) { throw new Error('Not implemented'); }
}
// 待机状态
class IdleState extends PlayerState {
play(player) {
console.log('开始播放');
player.setState(new PlayingState());
}
pause(player) {
console.log('无法暂停，当前未播放');
}
stop(player) {
console.log('已经停止');
}
}
// 播放状态
class PlayingState extends PlayerState {
play(player) {
console.log('已经在播放');
}
pause(player) {
console.log('暂停播放');
player.setState(new PausedState());
}
stop(player) {
console.log('停止播放');
player.setState(new IdleState());
}
}
// 暂停状态
class PausedState extends PlayerState {
play(player) {
console.log('恢复播放');
player.setState(new PlayingState());
}
pause(player) {
console.log('已经是暂停状态');
}
stop(player) {
console.log('停止播放');
player.setState(new IdleState());
}
}
// 上下文：播放器
class AudioPlayer {
constructor() {
this.state = new IdleState();
}
setState(state) {
this.state = state;
}
play() {
this.state.play(this);
}
pause() {
this.state.pause(this);
}
stop() {
this.state.stop(this);
}
}
使用示例
const player = new AudioPlayer(); player.play(); // 输出：开始播放 player.pause(); // 输出：暂停播放 player.play(); // 输出：恢复播放 player.stop(); // 输出：停止播放 player.pause(); // 输出：无法暂停，当前未播放
这种结构让状态逻辑彼此隔离，新增状态或修改转移规则不会影响其他状态，符合开闭原则。
扩展为通用有限状态机
如果多个模块都需要状态机，可以封装一个通用 FSM 类，通过配置定义状态和转移规则。
class FiniteStateMachine {
constructor(config) {
this.currentState = config.initial;
this.transitions = config.transitions || {};
}
transition(event) {
const nextState = this.transitions[this.currentState]?.[event];
if (nextState) {
this.currentState = nextState;
console.log(`状态切换为: ${this.currentState} (通过事件: ${event})`);
} else {
console.warn(`不允许的转换: ${this.currentState} + ${event}`);
}
}
getCurrentState() {
return this.currentState;
}
}
// 使用配置定义播放器 FSM
const playerFSM = new FiniteStateMachine({
initial: 'idle',
transitions: {
idle: { play: 'playing' },
playing: { pause: 'paused', stop: 'idle' },
paused: { play: 'playing', stop: 'idle' }
}
});
playerFSM.getCurrentState(); // 'idle'
playerFSM.transition('play'); // 状态切换为: playing
playerFSM.transition('pause'); // 状态切换为: paused
这种方式更轻量，适合简单状态流转，也易于序列化和调试。
基本上就这些。状态模式配合 FSM 能有效解耦复杂条件判断，提升代码可维护性。根据项目需求选择面向对象的状态类实现，还是配置化的 FSM，都能显著改善状态管理逻辑。不复杂但容易忽略的是状态完整性与非法转移的处理，建议在生产中加入校验和日志。
