概述
aeterno 是一个前端时序管理库，可以用于管理动画、运动和状态。它提供了一种简便的方式处理复杂的状态转换逻辑，并且可以通过配置文件进行管理。
这篇文章将为您介绍如何使用 aeterno，从安装到使用，将涵盖所有需要了解的内容。
安装
您可以通过 npm 安装 aeterno：
--- ------- -------
示例
让我们从一个简单的例子开始，使用 aeterno 来管理一个按钮的状态。首先，我们定义了一个按钮：
------- -------------------- -----------
我们希望点击按钮时，它会变成灰色，然后变成红色。
首先，我们需要引入 aeterno 库：
------ ------- ---- ----------
接下来，我们定义一个状态机：
----- ------------------ - --- ---------
----- -
--- -
-------- --------
-
--
------- -
--- -
-------- -----
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
-
--
---- -
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - ------
-
-
---这个状态机的定义非常直观。当按钮处于 "idle" 状态时，它会监听 "CLICKED" 事件，并转换到 "grayed" 状态。当按钮处于 "grayed" 状态时，再次点击按钮便会将其转换成 "red" 状态。同时，我们定义了一个 "entry" 方法，用来更新按钮的颜色。
现在，我们为按钮添加点击事件：
----- ------------- - ------------------------------------- --------------------------------------- -- -- - -------------------------------------- ---
好的，我们成功地使用 aeterno 来实现了按钮的状态变化。在这个例子中，我们只是使用了 aeterno 的简单功能。接下来我们将深入了解 aeterno 的更多特性。
操作
激活状态
在一个状态机中，只有一个状态处于激活状态。我们可以通过 isActive() 方法来判断当前状态是否处于激活状态：
----------------------------------- -- -- ---- - -----
转换状态
在状态机中，只有当一个状态处于激活状态时才能将其转换到另一个状态。我们可以通过 trigger() 方法来触发状态转换：
--------------------------------------
获取当前状态
我们可以通过 getCurrentState() 方法来获取当前状态的名称：
------------------------------------- -- -- --------------- - -----
获取上一个状态
我们可以通过 getPreviousState() 方法来获取前一个状态的名称：
--------------------------------------
注意，如果当前状态是初始状态，上一个状态将返回 null。
状态进入回调
我们可以通过在状态定义对象中添加一个 entry 方法实现状态切换时的动作。当转换到新状态时，aeterno 会调用与该状态关联的 entry 方法：
------- -
--- -
-------- -----
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
-
-状态退出回调
我们可以通过在状态定义对象中添加 exit 方法实现状态转换时的清理工作。当从状态中离开时，aeterno 会调用与该状态关联的 exit 方法：
------- -
--- -
-------- -----
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
--
----- -- -- -
----- ------ - -------------------------------------
---------------------------- - --------
-
-状态超时
aeterno 还提供了状态超时功能。当状态处于激活状态一段时间后，aeterno 将触发 timeout 事件，我们可以在状态定义对象中定义一个 timeout 函数来处理超时事件：
------- -
--- -
-------- ------
-------- ------
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
--
----- -- -- -
----- ------ - -------------------------------------
---------------------------- - --------
--
-------- -- -- -
------------------ ----- ------
-
-在上面的代码中，如果状态 grayed 一段时间后没有被激活，aeterno 将自动触发 timeout 事件，然后将状态转换回 idle。
结论
本教程介绍了 aeterno 及其常用功能，希望对您的前端开发工作有所帮助。aeterno 用法灵活，易于扩展，可以帮助您应对复杂的状态管理任务。
完整示例代码如下：
------- -------------------- -----------
------- --------------
------ ------- ---- ------------------------------------------
----- ------------------ - --- ---------
----- -
--- -
-------- --------
-
--
------- -
--- -
-------- -----
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
-
--
---- -
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - ------
-
-
---
----- ------------- - -------------------------------------
--------------------------------------- -- -- -
--------------------------------------
---
---------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/75047