JavaScript 中的有限状态机,第 3 部分: 测试小部件
2010-09-14 13:20:44 来源:WEB开发网在最后这篇文章中,将在一些流行的浏览器中对这个实现进行测试。需要构造一个简单的测试页面,它创建一些 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>