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

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

 2010-09-14 13:20:44 来源:WEB开发网   
核心提示: 图 1. Internet Explorer 中出现意外的 mousemove 事件参见 第 1 部分 中 完成状态表 中的状态表(重新显示在图 2 中),我们没有预料到在 Inactive 状态中出现 mousemove 事件,JavaScript 中的有限状态机,第 3 部分: 测试小

图 1. Internet Explorer 中出现意外的 mousemove 事件

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

参见 第 1 部分 中 完成状态表 中的状态表(重新显示在图 2 中)。我们没有预料到在 Inactive 状态中出现 mousemove 事件,所以在 第 2 部分 中 创建操作/转换表 中的 actionTransitionFunctions 表实现中这个单元格是空的。

图 2. FadingTooltip 部件的初始状态表

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

从直觉上看,在 mousemove 事件前面应该出现 mouseover 事件,这会导致转移到 Pause 状态,而 Pause 状态是可以处理 mousemove 事件的(参见第 1 部分中的 图 5)。显然,Firefox 符合我们的期望,但是 Internet Explorer 不符合期望。有限状态机在 Internet Explorer 中处理鼠标事件时可能出现 bug,或者浏览器在内部无法跟踪它的状态。在这些情况下,必须在自己的有限状态机中应付这种情况。

幸运的是,应用有限状态机方法很容易解决这样的问题。考虑一下在 Inactive 状态下发生 mousemove 事件时需要什么行为:操作和转换与 Inactive 状态下的 mouseover 事件一样。回顾一下 actionTransitionFunctions 表 的实现,doActionTransition 方法允许表中的任何函数复制另一个函数的操作和转换。通过使用这个方法,可以在 actionTransitionFunctions 表中添加清单 4 中粗体的函数,从而处理这个意外的事件。

清单 4. 处理 Inactive 状态下意外的 mousemove 事件的 JavaScript 代码

上一页  1 2 3 4 5 6 7 8 9 10  下一页

Tags:JavaScript 有限 状态

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接