开发学院网页设计 JavaScript JavaScript 中的有限状态机，第 3 部分: 测试小部... 阅读

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

　2010-09-14 13:20:44　来源：WEB开发网　　　

核心提示： 在最后这篇文章中，将在一些流行的浏览器中对这个实现进行测试，JavaScript 中的有限状态机，第 3 部分: 测试小部件(2)，需要构造一个简单的测试页面，它创建一些 FadingTooltip 部件并将它们绑定到 HTML 元素，这个函数在 Web 页面的 HTML head 元素中

在最后这篇文章中，将在一些流行的浏览器中对这个实现进行测试。需要构造一个简单的测试页面，它创建一些 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 所示。

清单 1. 创建 FadingTooltip 部件的 JavaScript 代码

<head> 　　... 　　<script src='FadingTooltip.js' content='text/javascript'></script> 　　<script content='text/javascript'> 　　　　function createFadingTooltip(id, content, parameters) { 　　　　　　new FadingTooltip(document.getElementById(id), content, parameters); 　　　　} 　　</script> 　　... </head>