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

核心提示：本系列的 第 1 部分 演示了如何用有限状态机系统化地为一个简单 Web 小部件（一个淡入和淡出视图的动画式工具提示）设计复杂行为，在本文中，JavaScript 中的有限状态机，第 2 部分: 实现组件，您将学习如何用 JavaScript 实现这种行为，并充分利用语言的独特特性，在第 1 部分中，我们应用有限状态机

本系列的 第 1 部分 演示了如何用有限状态机系统化地为一个简单 Web 小部件（一个淡入和淡出视图的动画式工具提示）设计复杂行为。在本文中，您将学习如何用 JavaScript 实现这种行为，并充分利用语言的独特特性，包括关联数组和函数闭包。产生的代码既紧凑又简洁，它的逻辑是透明的，它的动画效果即使在负载很重的处理器上也能够平滑地执行。

第 3 部分将讨论如何让这个实现能够在所有流行浏览器上运行的实际问题。

有限状态机很早就已用作设计和实现事件驱动的程序（比如网络适配器和编译器）内复杂行为的组织原则。现在，可编程的 Web 浏览器为新一代的应用程序开辟了一种全新的事件驱动环境。基于浏览器的应用程序因 Ajax 而广为流行，而同时也变得更为复杂。程序设计人员和实现人员能够大大受益于有限状态机的原理和结构。

第 1 部分 描述 Web 页面的一个工具提示部件，与流行的 Web 浏览器实现的内置实现相比，它具有更高级的行为。当鼠标光标停留在一个 HTML 元素上之后，这个 FadingTooltip 部件会淡入视图，工具提示显示一段时间之后就淡出视图。这个工具提示会跟随鼠标的移动，即使在淡入和淡出期间，而且当光标从 HTML 元素移出然后又移回此元素时，淡入淡出会反转方向。这种行为要求 FadingTooltip 部件能够响应各种不同的事件，而且在某些情况下，对特定事件的响应取决于以前发生的事件。

开发人员可以使用有限状态机设计模式来组织这样的事件驱动程序。在第 1 部分中，我们应用有限状态机的设计原理生成了一个定义所需行为的状态表，如图 1 所示。

图 1. FadingTooltip 部件的状态表