上问我们讲到了js中状态机的应用场景，本期我们详解一下状态机的实际写法
在 JavaScript 中，我们可以使用对象和函数来实现简单的状态机。
下面是一个基本的 JavaScript 状态机的示例，以一个灯的状态转换为例：
const lightStateMachine = { currentState: 'off', // 初始状态 transitions: { 'off': { turnOn: function() { console.log('Light is turning on.'); this.currentState = 'on'; } }, 'on': { turnOff: function() { console.log('Light is turning off.'); this.currentState = 'off'; } } }, handleEvent: function(event) { const transition = this.transitions[this.currentState][event]; if (transition) { transition.call(this); } else { console.log('Invalid event for current state.'); } } }; // 使用状态机 lightStateMachine.handleEvent('turnOn'); // Light is turning on. lightStateMachine.handleEvent('turnOff'); // Light is turning off. lightStateMachine.handleEvent('turnOn'); // Invalid event for current state.
在这个例子中，lightStateMachine 是一个包含状态、转移和事件处理函数的对象。每个状态都有一个包含可能事件的对象，对应的事件处理函数会执行状态的转换。通过调用 handleEvent 函数，可以触发相应事件，实现状态的转换。
这是一个简单的例子，实际应用中，可以使用更复杂的状态机库，如 xstate，来管理更复杂的状态逻辑和转换。 xstate 提供了丰富的功能，包括有限状态机、历史状态、嵌套状态等，使得状态机的设计和管理更加灵活和可维护。
