JavaScript 中的有限状态机，第 2 部分: 实现组件

核心提示： 状态表的行和列标上了部件要响应的事件的名称，以及在事件之间部件所处的状态，JavaScript 中的有限状态机，第 2 部分: 实现组件(2)，表中的每个单元格指定，在特定状态下发生特定事件时，首先需要一个对象，它包含将实现的所有东西，部件将采取的操作，表单元格还可以指定采取操作之后部件将

状态表的行和列标上了部件要响应的事件的名称，以及在事件之间部件所处的状态。表中的每个单元格指定，在特定状态下发生特定事件时，部件将采取的操作。表单元格还可以指定采取操作之后部件将转移到的下一个状态，或者指定部件将保持同样的状态。空的表单元格表示在特定状态下不应该发生特定的事件。另外，在第 1 部分中，我们编写了一个 状态变量 列表，部件需要在事件之间记住这些变量，以便能够执行不同的单元格中的相关操作。

第 1 部分指出 JavaScript 很适合作为有限状态机的执行环境，并提到它的一些与设计阶段相关的功能。在本文中，学习将设计转换为 JavaScript 的细节，利用一些优雅的语言特性，以及对一些不太优雅的细节进行调整以使实现更合理。

将设计转换为 JavaScript

在第 1 部分中完成了有限状态机的设计之后，就可以用 JavaScript 实现 FadingTooltip 部件了。这是从设计阶段到真实执行环境的转换阶段，也就是从轻松的抽象转换到实用性。

我们只考虑最流行的浏览器的最新版本：Netscape Navigator、Microsoft® Internet Explorer®、Opera 和 Mozilla Firefox。尽管这些执行环境的种类并不多，但是仍然会带来许多麻烦。我们必须处理将来自不同浏览器的鼠标和计时器事件连接到 JavaScript 程序的细节。有一种优雅的 JavaScript 语言特性称为函数闭包（function closure），它可以帮助您简化实现。还可以应用另一个优雅的 JavaScript 语言特性关联数组（associative array） 将状态表直接转换成代码。还会看到如何使用 HTML div 元素创建工具提示并指定样式，用文本和图像填充它，将它定位在鼠标旁边，使它淡入和淡出视图，并跟随鼠标的移动。

但是按照面向对象开发的精神，首先需要一个对象，它包含将实现的所有东西，所以我们首先开发这个对象。