概述
aeterno 是一个前端时序管理库，可以用于管理动画、运动和状态。它提供了一种简便的方式处理复杂的状态转换逻辑，并且可以通过配置文件进行管理。
这篇文章将为您介绍如何使用 aeterno，从安装到使用，将涵盖所有需要了解的内容。
安装
您可以通过 npm 安装 aeterno：
npm install aeterno
示例
让我们从一个简单的例子开始，使用 aeterno 来管理一个按钮的状态。首先，我们定义了一个按钮：
<button id="my-button">Click Me</button>
我们希望点击按钮时，它会变成灰色，然后变成红色。
首先，我们需要引入 aeterno 库：
import Aeterno from 'aeterno';
接下来，我们定义一个状态机：
-- -------------------- ---- -------
----- ------------------ - --- ---------
----- -
--- -
-------- --------
-
--
------- -
--- -
-------- -----
--
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - -------
-
--
---- -
------ -- -- -
----- ------ - -------------------------------------
---------------------------- - ------
-
-
---这个状态机的定义非常直观。当按钮处于 "idle" 状态时，它会监听 "CLICKED" 事件，并转换到 "grayed" 状态。当按钮处于 "grayed" 状态时，再次点击按钮便会将其转换成 "red" 状态。同时，我们定义了一个 "entry" 方法，用来更新按钮的颜色。
现在，我们为按钮添加点击事件：
const buttonElement = document.getElementById('my-button');
buttonElement.addEventListener('click', () => {
buttonStateMachine.trigger('CLICKED');
});好的，我们成功地使用 aeterno 来实现了按钮的状态变化。在这个例子中，我们只是使用了 aeterno 的简单功能。接下来我们将深入了解 aeterno 的更多特性。
操作
激活状态
在一个状态机中，只有一个状态处于激活状态。我们可以通过 isActive() 方法来判断当前状态是否处于激活状态：
buttonStateMachine.isActive('red'); // 返回 true 或 false转换状态
在状态机中，只有当一个状态处于激活状态时才能将其转换到另一个状态。我们可以通过 trigger() 方法来触发状态转换：
buttonStateMachine.trigger('CLICKED');获取当前状态
我们可以通过 getCurrentState() 方法来获取当前状态的名称：
buttonStateMachine.getCurrentState(); // 返回 "idle"、"grayed" 或 "red"
获取上一个状态
我们可以通过 getPreviousState() 方法来获取前一个状态的名称：
buttonStateMachine.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