开发学院网页设计JavaScript JavaScript 中的有限状态机,第 2 部分: 实现组件... 阅读

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

 2010-09-14 13:20:54 来源:WEB开发网   
核心提示: 清单 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 中的代码所示。

上一页  5 6 7 8 9 10 

Tags:JavaScript 有限 状态

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接