JavaScript 中的有限状态机，第 1 部分: 设计一个小部件

核心提示： 通常，需要反复执行此设计过程才能获得正确的图和表，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(7)，对具有多个事件和状态的有限状态机，这个过程可能会十分乏味，如果可以如此，之后您可能又想让此小部件将工具提示淡入，每次重复都需要遵守一定的原则来系统地处理表中的每一个

通常，需要反复执行此设计过程才能获得正确的图和表。对具有多个事件和状态的有限状态机，这个过程可能会十分乏味，每次重复都需要遵守一定的原则来系统地处理表中的每一个单元格。这迫使您不得不考虑在每个可能的情况下您所想要的动作。您可能会发现还可以进一步完善这些行为，也可能会发现所需的状态较预计的要多（或少），甚至会发现您必须重新整理单元格间的这些动作以正确定义每种情况下的行为。

这种设计有限状态机的系统过程虽然有些乏味但却十分值得。图 4 所示的完成后的表给出了此行动的所有逻辑，并可被直接转换为代码（参见 actionTransitionFunctions 源代码）。

关于 JavaScript

要设计 FadingTooltip 小部件，您需要了解 JavaScript 的一些功能。在严谨设计的原则指导下，我只在这里给出基本的设计思想，而将具体的实现留待本系列后续文章中介绍。

当光标经过页面中的 HTML 元素时，所有流行的浏览器都能将事件传递给 JavaScript 代码。这些事件是 mouseover、mousemove 和 mouseout，分别代表光标已经移至、移上和移出 HTML 元素。浏览器用这些事件传递光标当前位置。当事件发生时，可用 JavaScript 编程动态创建 HTML Division 元素，用文本、图像和标记填充这些元素并将其定位到光标附近。

浏览器并没有原生的淡入和淡出函数，但可以通过改变 Division 元素的透明度（实际上是不透明度，透明度的反义词）来模拟这些函数。

JavaScript 有两类定时器：一次定时器在超时时生成 timeout 事件；重复断续器定期生成 timetick 事件。FadingTooltip 小部件需要这两种定时器。

设计状态图

首先回顾一下想要从 FadingTooltip 小部件获得的基本行为。当光标从特定的 HTML 元素上移过的时候，您可能想让此小部件等待光标在该元素上暂停。如果可以如此，之后您可能又想让此小部件将工具提示淡入，显示一会后再淡出。