JavaScript 中的有限状态机，第 3 部分: 测试小部件

核心提示：学习如何用有限状态机系统化地为一个简单 Web 小部件（一个淡入和淡出视图的动画式工具提示）设计复杂的行为，产生的代码既紧凑又简洁，JavaScript 中的有限状态机，第 3 部分: 测试小部件，它的逻辑是透明的，它的动画效果即使在负载很重的处理器上也能够顺畅地展现，这个工具提示是一个完全参数化的 HTML Divi

学习如何用有限状态机系统化地为一个简单 Web 小部件（一个淡入和淡出视图的动画式工具提示）设计复杂的行为。产生的代码既紧凑又简洁，它的逻辑是透明的，它的动画效果即使在负载很重的处理器上也能够顺畅地展现。在本文中，学习如何处理让这个实现能够在所有流行的 Web 浏览器上运行的实际问题。

第 1 部分 讲解如何用有限状态机系统化地为一个简单的 Web 部件设计复杂的行为。第 2 部分 描述了如何用 JavaScript 实现这种行为，并充分利用语言的独特特性，包括关联数组和函数闭包。

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

本系列的 第 1 部分 描述 Web 页面的一个工具提示部件，与流行的 Web 浏览器提供的内置实现相比，它具有更精致的行为。这种行为要求 FadingTooltip 部件能够响应各种不同的事件。有时候，对事件的响应取决于以前发生的事件。我们使用有限状态机模式设计了这种行为。产生的状态图和 表 表示指明了所有情况下响应每个事件所需的操作。还确定了需要在事件之间记住的一系列变量，从而支持执行相关操作。

第 2 部分 将设计转换为 JavaScript 代码，并充分利用关联数组和函数闭包功能。这个实现可以适应最流行的浏览器，不需要为浏览器的怪毛病而牺牲效率或优雅性。实现了以下功能的代码：针对所有三种浏览器事件模型连接鼠标事件，启动和取消两种类型的计时器，并连接它们的计时器事件。将状态表实现为适用于所有事件的通用处理函数，并为所有操作和转换提供一个函数数组。这个工具提示是一个完全参数化的 HTML Division 元素，按照状态表中指定的条件，它会随着鼠标事件和计时器事件移动和淡入/淡出。