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

核心提示： 清单 6. 设置计时器并连接计时器事件的 JavaScript 代码FadingTooltip.prototype = {...startTimer: function(timeout) {var self = this;this.currentTimer =setTimeout( fun

清单 6. 设置计时器并连接计时器事件的 JavaScript 代码

FadingTooltip.prototype = {
　　...
　　startTimer: function(timeout) {
　　　　var self = this;
　　　　this.currentTimer =
　　　　　　setTimeout( function() { self.handleEvent( { type: 'timeout' } ); },
　　　　　　timeout);
　　},
　　startTicker: function(interval) {
　　　　var self = this;
　　　　this.currentTicker =
　　　　　　setInterval( function() { self.handleEvent( { type: 'timetick' } ); },
　　　　　　interval);
　　},
　　...

计时器事件函数没有鼠标事件函数那么复杂。它们仅仅创建一个简单的计时器事件对象，其中只包含一种事件类型 —— timeout 或者 timetick，并将它传递给处理鼠标事件的同一个 handleEvent 方法。

创建操作/转换表

在 JavaScript 中，对象原型可以包含数组等数据结构和其他对象，以及变量和方法。普通数组的元素用整数作为索引，而关联数组的元素用名称作为索引，而不是整数。在 JavaScript 中，关联数组和对象仅仅是用来访问相同数据的不同语法：可以以关联数组元素的形式访问对象属性，见清单 7。

清单 7. 以关联数组元素的形式访问对象属性的 JavaScript 代码

if ( htmlElement.fadingTooltip == htmlElement["fadingTooltip"] ) ... // always true

因此我们将 状态表 实现为一个二维的函数关联数组。直接使用状态名称和事件名称作为索引。数组的非空单元格指向匿名函数，这些匿名函数通过调用实用程序方法（比如启动和取消 计时器 的函数）来为事件执行操作，然后返回下一个状态。handleEvent 方法的代码将使用数组语法调用这些操作/转换函数，如清单 8 中的代码所示。