状态机通过定义状态、事件和转移规则来管理对象行为变化。在JavaScript中可用对象实现，如电灯开关有'off'和'on'状态，响应'push'事件切换；进一步可封装为工厂函数createStateMachine，支持初始化、转移和回调，用于订单流程等场景；还可扩展钩子函数onEnter/onExit，实现登录流程中的提示与副作用处理，提升可维护性与扩展性。
状态机是一种处理对象行为随状态变化而改变的编程模型。在JavaScript中实现一个简单的状态机，可以帮助我们更好地管理组件或对象的复杂状态流转，比如按钮的启用/禁用、页面流程控制等场景。核心思路是：定义状态、定义事件、明确状态如何响应事件进行转移。
1. 状态机的基本结构
一个最简状态机包含三个要素：当前状态（currentState）、允许的状态集合、以及状态转移规则（transitions）。我们可以用对象来描述这些规则，让代码清晰且易于维护。
例如，设计一个电灯开关的状态机：
- 状态有：'off' 和 'on'
- 事件有：'push'（按下开关）
- 规则：'off' + 'push' → 'on'；'on' + 'push' → 'off'
基于此，可以写出如下实现：
立即学习“Java免费学习笔记（深入）”；
const lightSwitch = {
currentState: 'off',
transitions: {
off: { push: 'on' },
on: { push: 'off' }
},
// 触发事件的方法
trigger(event) {
const nextState = this.transitions[this.currentState][event];
if (nextState) {
this.currentState = nextState;
console.log(`状态切换为: ${this.currentState}`);
} else {
console.warn(`不允许的事件 "${event}" 在状态 "${this.currentState}" 下`);
}
}
};
// 使用示例
lightSwitch.trigger('push'); // 输出：状态切换为: on
lightSwitch.trigger('push'); // 输出：状态切换为: off2. 封装为可复用的函数
为了提升复用性，我们可以将状态机抽象成一个工厂函数，传入配置即可生成不同的状态机实例。
SUN2008 企业网站管理系统2.0 beta
下载
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
function createStateMachine(config) {
return {
currentState: config.initial,
transitions: config.transitions,
trigger(event) {
const currentState = this.currentState;
const nextState = this.transitions[currentState]?.[event];
if (nextState) {
this.currentState = nextState;
// 可选：执行状态变更后的回调
if (typeof config.onChange === 'function') {
config.onChange(currentState, nextState, event);
}
} else {
console.warn(`无效转移: ${currentState} --${event}-> ${nextState}`);
}
}
};
}使用这个工厂创建一个订单状态机：
const orderMachine = createStateMachine({
initial: 'pending',
transitions: {
pending: { pay: 'paid', cancel: 'canceled' },
paid: { ship: 'shipped', refund: 'refunded' },
shipped: { deliver: 'delivered' },
canceled: {},
refunded: {},
delivered: {}
},
onChange(from, to, event) {
console.log(`订单从 "${from}" 经 "${event}" 变为 "${to}"`);
}
});
// 模拟操作
orderMachine.trigger('pay'); // 输出：订单从 "pending" 经 "pay" 变为 "paid"
orderMachine.trigger('ship'); // 输出：订单从 "paid" 经 "ship" 变为 "shipped"
orderMachine.trigger('deliver'); // 输出：订单从 "shipped" 经 "deliver" 变为 "delivered"3. 添加状态进入/退出的钩子
在实际开发中，状态切换时常需要执行副作用，比如发送请求、更新UI。可以在状态机中加入钩子函数（hooks），增强扩展能力。
改进版：支持每个状态定义 onEnter 和 onExit
function createStateMachineWithHooks(config) {
let currentState = config.initial;
function getStateConfig(state) {
return config.states?.[state] || {};
}
return {
trigger(event) {
const nextState = config.transitions?.[currentState]?.[event];
if (!nextState) {
console.warn(`不允许的事件 "${event}" 在状态 "${currentState}"`);
return;
}
// 执行当前状态的退出逻辑
const currentConfig = getStateConfig(currentState);
currentConfig.onExit && currentConfig.onExit();
// 切换状态
const previous = currentState;
currentState = nextState;
// 执行新状态的进入逻辑
const nextConfig = getStateConfig(nextState);
nextConfig.onEnter && nextConfig.onEnter(previous);
// 外部监听
config.onChange && config.onChange(previous, nextState, event);
},
getState() {
return currentState;
}
};
}示例：带提示的用户登录流程
const loginMachine = createStateMachineWithHooks({
initial: 'idle',
states: {
idle: {
onEnter: () => console.log('等待用户操作...')
},
loading: {
onEnter: () => console.log('正在登录...'),
onExit: () => console.log('登录请求完成')
},
success: {
onEnter: () => console.log('登录成功！欢迎回来')
},
error: {
onEnter: (from) => console.log(`从 ${from} 登录失败`)
}
},
transitions: {
idle: { login: 'loading' },
loading: { resolve: 'success', reject: 'error' },
success: {},
error: { retry: 'idle' }
}
});
loginMachine.trigger('login'); // 进入 loading
loginMachine.trigger('resolve'); // 进入 success基本上就这些。通过这种模式，你可以把复杂的条件判断转化为清晰的状态流转，代码更易读、更健壮。尤其适合表单流程、游戏角色行为、UI交互控制等场景。不复杂但容易忽略的是：定义好边界和非法转移，避免状态失控。
