在前端开发中，状态机是一种非常有用的设计模式。fsm-js 是一个简单易用的状态机库，可以帮助开发者快速实现各种状态机。
安装
fsm-js 可以通过 npm 安装。在命令行中运行以下命令：
npm install fsm-js
使用
在项目中引入 fsm-js：
import StateMachine from 'fsm-js';
或者通过 script 标签引入：
<script src="path/to/fsm.js"></script>
创建状态机
使用 StateMachine 构造函数创建状态机实例：
-- -------------------- ---- -------
----- --- - --- --------------
----- --------
------------ -
- ----- ------- ----- -------- --- -------- --
- ----- --------- ----- --------- --- ------- --
- ----- ----------- ----- --------- --- ----- --
- ----- ----------- ----- ------ --- -------- -
-
---在上面的示例中，我们创建了一个状态机，它有 4 个状态：solid（固态）、liquid（液态）、gas（气态）和 plasma（等离子态）。初始状态为 solid，可以通过转移操作改变状态。
转移
使用 fsm 对象的 transition 方法进行状态转移：
fsm.transition('melt'); // 转移到 liquid 状态
fsm.transition('vaporize'); // 转移到 gas 状态转移方法需要传入转移名称，例如上面的 'melt' 和 'vaporize'。
转移方法会判断当前状态是否允许该转移，如果允许，则会执行转移操作，并返回 true。如果不允许，会抛出异常并返回 false。
监听事件
可以通过 on 方法监听状态机的事件，例如状态转移、状态进入等：
fsm.on('melt', () => {
console.log('Solid is melting...');
});
fsm.onEnter('liquid', () => {
console.log('Now in liquid state.');
});以上代码为 fsm 对象监听了状态转移 'melt' 事件和进入 'liquid' 状态事件，当状态转移或进入相应状态时，会触发相应的回调函数。
获取状态信息
使用 fsm 对象的 getState 方法获取当前状态：
const currentState = fsm.getState(); console.log(currentState); // 打印当前状态，例如 'solid'
示例代码
下面是一个使用 fsm-js 实现掷骰子游戏的示例代码：
-- -------------------- ---- -------
----- ---- - --- --------------
----- --------
------------ -
- ----- -------- ----- -------- --- --------- --
- ----- ------- ----- ---------- --- --------- --
- ----- -------- ----- ---------- --- ------- -
-
---
---------------------- -- -
----------------- -- -------------
---
---------------------- -- -
----------------- ------- -- ------------------------- - -------
---
-------------------------
------------- -- -
------------------------
------------- -- -
-------------------------
-- ------
-- ------以上示例创建了一个掷骰子的状态机，初始状态为 'ready'，可以转移到 'rolling' 和 'stopped' 状态。当进入 'rolling' 状态时，会随机产生一个 1-6 的整数并打印出来。
总结
fsm-js 是一个功能强大、简单易用的状态机库，可以帮助开发者快速实现各种状态机。使用 fsm-js 可以提高代码的可读性和可维护性，减少代码的复杂度。如果您需要在项目中使用状态机，fsm-js 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6ccf