有限状态机（Finite State Machine, FSM）是一种数学模型，用于描述系统在不同状态下的行为。在前端开发中，有限状态机可以用于管理复杂的UI交互逻辑，如游戏、表单验证等场景。
下面是一个简单的JavaScript实现有限状态机的例子：
class FiniteStateMachine {constructor() {this.handlers = {};this.startState = null;this.endStates = [];this.currentState = null;}// 设置初始状态setStartState(name) {this.startState = name;this.currentState = name;}// 添加状态转换处理器addHandler(state, event, newState, action) {if (!this.handlers[state]) {this.handlers[state] = {};}this.handlers[state][event] = { newState, action };}// 设置结束状态addEndState(state) {this.endStates.push(state);}// 处理事件，进行状态转换handleEvent(event) {if (this.currentState === null) {throw new Error('FiniteStateMachine has no start state.');}const handler = this.handlers[this.currentState][event];if (!handler) {throw new Error(`Cannot handle event ${event} in state ${this.currentState}.`);}// 执行状态转换前的动作if (handler.action) {handler.action();}// 进行状态转换this.currentState = handler.newState;// 检查是否到达结束状态if (this.endStates.includes(this.currentState)) {console.log('Reached an end state:', this.currentState);}}
}
使用示例：
// 创建一个有限状态机实例
const fsm = new FiniteStateMachine();// 设置初始状态为 'state1'
fsm.setStartState('state1');// 添加状态转换处理器和动作
fsm.addHandler('state1', 'event1', 'state2', () => console.log('Moving from state1 to state2'));
fsm.addHandler('state2', 'event2', 'state3', () => console.log('Moving from state2 to state3'));
fsm.addHandler('state3', 'event3', 'state1', () => console.log('Moving from state3 to state1'));// 设置结束状态（可选）
fsm.addEndState('state3');// 处理事件，进行状态转换
fsm.handleEvent('event1'); // 输出: Moving from state1 to state2
fsm.handleEvent('event2'); // 输出: Moving from state2 to state3
fsm.handleEvent('event3'); // 输出: Moving from state3 to state1 和 Reached an end state: state1
这个简单的有限状态机实现可以根据你的具体需求进行扩展和优化。例如，你可以添加更多的状态、事件和动作，或者使用更复杂的数据结构来存储状态转换规则。
