介绍
@fabiospampinato/hsm 是一个用于在 JavaScript 中实现有限状态机（Finite State Machine，FSM）的库。有限状态机在编程中的应用非常广泛，能在处理非常复杂或高效的状态转换需求时给开发者很大的便利。
安装
可以通过 npm 安装该库：
npm install @fabiospampinato/hsm
示例
以下是使用该库实现登录状态有限状态机的样例代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
-- -----
----- ------------ - --- --------------
-- --------
------ ------
------------ -
-
----- --------
----- --------
--- -----
--
-
----- ---------
----- --------
--- -----
-
-
--
-- ---------
------------------------ -- -- -
-------------------
--
------------------------- -- -- -
-------------------
--
-- ------
-------------------- -- --- ----
--------------------- -- --- ----在上述代码中，我们定义了一个包含两种状态的状态机：未登录和已登录。我们还定义了两种转换：从未登录到已登录的 login 和从已登录到未登录的 logout。
当我们执行 stateMachine.login() 时，状态机会按照转换规则从未登录状态转换成已登录状态，并调用相应的事件处理函数。同样，执行 stateMachine.logout() 则反转这一转换，并调用退出登录的处理函数。
使用
接下来我们通过一个较复杂的需求来进一步展示如何使用 @fabiospampinato/hsm。
假设我们的应用需要根据订单状态来显示不同的按钮状态和文案，状态分别为：未支付、已支付、验票中和已完成。每个状态下应该显示相应的按钮，且部分按钮只在状态满足某些条件时显示，如订单状态为未支付时可显示支付按钮，订单状态为已支付时可显示验票按钮。此外，在状态转换时，有些操作是需要进行一些额外的异步操作的，如状态转换到验票中时需要向后端发起验票请求。
我们通过这个需求来演示如何用有限状态机来实现这一功能。我们首先定义出所有的状态和转换规则：
-- -------------------- ---- -------
----- ------------ - --- --------------
------ ------
------------ -
-
----- ------
----- --------
--- -----
--
-
----- --------
----- --------
--- -----
--
-
----- -----------
----- ------- -------
--- -----
-
-
--这里我们定义了 3 个转换规则：从未支付到已支付的 pay、从已支付到验票中的 check 和从已支付或验票中到已完成的 complete。
接下来，我们定义对应每个状态下需要显示的按钮状态和文案。
-- -------------------- ---- -------
----- ------------ - -
------ -
----- ------
-------- -
-
----- -----
----------- -----
-------- -- -- -
----------------------
-- ------
------------------
-
-
-
--
------ -
----- ------
-------- -
-
----- -----
----------- -----
-------- -- -- -
----------------------
-- ------
--------------------
-
-
-
--
------ -
----- ------
-------- --
--
------ -
----- ------
-------- -
-
----- -------
----------- -----
-------- -- -- -
------------------------
-- ------
-----------------------
-
-
-
-
-这里我们用一个类似于字典的结构定义了每个状态下应该渲染的按钮信息，包括按钮的文案、是否需要显示和被点击时应该触发的状态转换。在我们的实现中，我们通过调用状态机的转换函数来实现状态转换。
最后，我们只需要在界面渲染时读取当前状态并渲染对应的按钮状态即可：
-- -------------------- ---- -------
-------------------- -----------------------
----- ----------- - --------------------------------
------------------ ---------------------
------------------------------- -- -
-- ---------------- -
-------------------- -------------
-
--我们先通过读取 stateMachine.state 获取当前订单的状态，再通过该状态调查 stateConfigs 对应的状态配置信息。最后，我们渲染对应状态下需要显示的按钮，并对用户的点击进行相应的处理。
注意，在状态转换时可能有些异步操作需要完成，有些转换或许需要与后端进行通信。因此，在实际使用中使用有限状态机实现状态转换时，我们应该尽可能将异步操作放在事件处理函数中，以达到更好的可维护性和健壮性。
结语
@fabiospampinato/hsm 是一个十分有用的库，能够使我们在处理状态转换这类问题时更加轻松，减少出错的可能性。通过阅读本文，您应该已经可以使用该库轻松地实现状态转换啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac66872