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

有限状态机很早就已用作设计和实现事件驱动的程序内复杂行为的组织原则。现在，可编程的 Web 浏览器为新一代的应用程序开辟了一种全新的事件驱动环境。基于浏览器的应用程序因Ajax 而广为流行，而同时也变得更为复杂。程序设计人员和实现人员能够大大受益于有限状态机的原理和结构。
本系列的第 1 部分 描述 Web 页面的一个工具提示部件，与流行的 Web 浏览器提供的内置实现相比，它具有更精致的行为。这种行为要求 FadingTooltip 部件能够响应各种不同的事件。有时候，对事件的响应取决于以前发生的事件。我们使用有限状态机模式设计了这种行为。产生的状态图和表 表示指明了所有情况下响应每个事件所需的操作。还确定了需要在事件之间记住的一系列变量，从而支持执行相关操作。
第 2 部分 将设计转换为 JavaScript 代码，并充分利用关联数组和函数闭包功能。这个实现可以适应最流行的浏览器，不需要为浏览器的怪毛病而牺牲效率或优雅性。实现了以下功能的代码：针对所有三种浏览器事件模型连接鼠标事件，启动和取消两种类型的计时器，并连接它们的计时器事件。将状态表实现为适用于所有事件的通用处理函数，并为所有操作和转换提供一个函数数组。这个工具提示是一个完全参数化的 HTML Division 元素，按照状态表中指定的条件，它会随着鼠标事件和计时器事件移动和淡入/淡出。
在最后这篇文章中，将在一些流行的浏览器中对这个实现进行测试。需要构造一个简单的测试页面，它创建一些 FadingTooltip 部件并将它们绑定到 HTML 元素。为了进行对比，测试页面还提供一些内置的工具提示。您很快就会遇到一些不应该发生的 情况，正好借此机会看看设计如何妥善地适应这些情况。本文最后要考察一下性能，并对用有限状态机进一步开发基于浏览器的应用程序提供一些思路。
在理想情况下，应该在所有可能出现的执行环境中对应用程序进行测试。对于 JavaScript 应用程序来说，由于可用浏览器的种类非常多，广泛使用的版本也非常多，所以进行全面测试是非常困难的。因为 FadingTooltip 部件只是用作技术演示，并不打算在本系列之外的地方使用，所以我只针对四种流行的浏览器的当前版本进行了测试：
这些浏览器的下载链接参见参考资料。
Netscape Navigator 8.1 Microsoft® Internet Explorer® 6.0 Opera 9.0 Mozilla Firefox 1.5
我只用下一节描述的简单测试手段测试了这个部件。生产性的应用程序应该进行更全面的测试。




回页首
对实现进行测试的简单方法之一是在 HTML Web 页面中嵌入一些测试代码。代码必须用构造函数创建 FadingTooltip 对象，并将它们绑定到 HTML 元素。简单的实现方法是利用一个函数，这个函数在 Web 页面的 HTML head 元素中定义，它使用 HTML 元素的 id 属性进行绑定，如清单 1 所示。
... ...
createFadingTooltip 函数的自变量是一个 HTML 元素标识符、工具提示的内容和一组可选的参数。这个函数简单地将元素标识符转换为一个指针，然后调用构造函数，将其他参数不加修改地传递给构造函数。构造函数返回的对象的指针被丢弃，因为构造函数用它定义的事件函数封装了对象指针，细节参见第 2 部分 中的连接鼠标事件 一节。
接下来，需要在 Web 页面的 HTML body 元素中定义一些具有 id 属性的 HTML 元素，如清单 2 所示。
...

These elements have tooltips defined with the FadingTooltip widget:

...
最后，需要一些用适合每个 HTML 元素的自变量调用 createFadingTooltip 函数的代码，如清单 3 所示。
...