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

核心提示： 在 JavaScript 中，对象原型（prototype） 是一种用来创建对象的新实例的模板；它定义对象的初始属性及其初始值，JavaScript 中的有限状态机，第 2 部分: 实现组件(4)，我们首先在对象原型中定义第 1 部分中确定部件需要的状态变量，见清单 2，好在每个事件模型的

在 JavaScript 中，对象原型（prototype） 是一种用来创建对象的新实例的模板；它定义对象的初始属性及其初始值。我们首先在对象原型中定义第 1 部分中确定部件需要的状态变量，见清单 2。

清单 2. FadingTooltip 对象原型的 JavaScript 代码

FadingTooltip.prototype = {
　　currentState: null,　　// current state of finite state machine (one of the state
　　　　　　　　　　　　　 // names in the table below)
　　currentTimer: null,　　// returned by setTimeout, non-null if timer is running
　　currentTicker: null,　 // returned by setInterval, non-null if ticker is running
　　currentOpacity: 0.0,　 // current opacity of tooltip, between 0.0 and 1.0
　　tooltipDivision: null, // pointer to HTML division element when tooltip is visible
　　lastCursorX: 0,　　　　// cursor x-position at most recent mouse event
　　lastCursorY: 0,　　　　// cursor y-position at most recent mouse event
　　...

对象原型是定义与有限状态机有关的几乎任何东西的合适位置：状态表、它的操作及其参数。还需要加上最后一点儿东西就可以完成对象构造方法 —— 连接鼠标事件，然后本文的其余部分将致力于填充对象原型。

连接鼠标事件

正如在第 1 部分中的 设计阶段 提到的，当鼠标进入和离开 HTML 元素以及在 HTML 元素内移动时，浏览器可以将事件传递给 JavaScript。这些事件包含有帮助的信息，比如事件类型和鼠标在页面上的当前位置。浏览器通过调用预先注册的函数来传递事件。不幸的是，注册这些函数以及将参数传递给它们的方式因浏览器而异。为了确保您的有限状态机可以连接到所有流行的浏览器中的鼠标事件，需要实现三个不同的事件模型。好在每个事件模型的代码都十分紧凑。不幸的是，代码的紧凑性掩盖了它的复杂性。