状态机通过定义状态与迁移规则管理应用状态流转。使用JavaScript可构建轻量级状态机，如文件上传组件中实现“空闲”“上传中”“暂停”“完成”等状态的可控切换，支持进入/退出钩子、条件迁移，并可通过事件驱动、异步钩子、状态历史等扩展提升灵活性和可维护性。
在复杂应用中，状态机是一种有效管理状态流转的模式。它通过明确定义状态和迁移规则，避免状态混乱和逻辑冲突。JavaScript 实现状态机并不需要引入大型库，你可以用简洁的代码构建一个可复用的状态机。
定义状态机的基本结构
一个基本的状态机包含当前状态（state）、允许的状态集合、以及状态之间的迁移规则（transitions）。每个迁移可以附带条件或动作。
下面是一个轻量级状态机构造函数：
function createStateMachine(config) {
let currentState = config.initial;
const states = config.states;
const transitions = config.transitions;
function canTransition(to) {
const available = transitions[currentState] || [];
return available.includes(to) && to in states;
}
function transition(to) {
if (canTransition(to)) {
const from = currentState;
currentState = to;
if (states[to].onEnter) states[to].onEnter();
if (states[from].onExit) states[from].onExit();
return true;
}
return false;
}
function getCurrentState() {
return currentState;
}
return {
transition,
getCurrentState,
canTransition
};
}
配置实际应用场景
假设你正在开发一个文件上传组件，包含“空闲”、“上传中”、“暂停”、“完成”等状态。使用上述状态机管理更清晰。
立即学习“Java免费学习笔记（深入）”；
const uploadMachine = createStateMachine({
initial: 'idle',
states: {
idle: {
onEnter: () => console.log('等待上传'),
onExit: () => console.log('离开空闲状态')
},
uploading: {
onEnter: () => console.log('开始上传...'),
onExit: () => console.log('暂停或结束上传')
},
paused: {
onEnter: () => console.log('上传已暂停'),
onExit: () => console.log('恢复上传')
},
completed: {
onEnter: () => console.log('上传完成！')
}
},
transitions: {
idle: ['uploading'],
uploading: ['paused', 'completed'],
paused: ['uploading'],
completed: []
}
});
使用状态机控制流程
调用 transition 方法触发状态变化，系统会自动校验是否允许该迁移。
uploadMachine.getCurrentState(); // "idle"
uploadMachine.transition('uploading'); // 打印：开始上传...
uploadMachine.transition('paused'); // 打印：上传已暂停
uploadMachine.transition('completed'); // 不允许，返回 false
uploadMachine.transition('uploading'); // 恢复上传
uploadMachine.transition('completed'); // 成功完成
这种模式让状态变更变得可控。你可以在 onEnter 或 onExit 中执行副作用，比如更新 UI、发送日志、调用 API 等。
扩展功能建议
如果需要更强大功能，可考虑以下增强：
- 事件驱动：用 emit(event) 触发迁移，而非直接调用 transition
- 异步钩子：支持 onEnter 返回 Promise，用于异步初始化
- 状态历史：记录状态栈，支持回退
- 调试模式：打印迁移日志，便于排查问题
基本上就这些。一个小巧的状态机就能显著提升复杂状态逻辑的可维护性，尤其适合表单流程、页面向导、设备控制等场景。
