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

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

 2010-09-14 13:20:54 来源:WEB开发网   
核心提示: 状态表的行和列标上了部件要响应的事件的名称,以及在事件之间部件所处的状态,JavaScript 中的有限状态机,第 2 部分: 实现组件(2),表中的每个单元格指定,在特定状态下发生特定事件时,首先需要一个对象,它包含将实现的所有东西,部件将采取的操作,表单元格还可以指定采取操作之后部件将

状态表的行和列标上了部件要响应的事件的名称,以及在事件之间部件所处的状态。表中的每个单元格指定,在特定状态下发生特定事件时,部件将采取的操作。表单元格还可以指定采取操作之后部件将转移到的下一个状态,或者指定部件将保持同样的状态。空的表单元格表示在特定状态下不应该发生特定的事件。另外,在第 1 部分中,我们编写了一个 状态变量 列表,部件需要在事件之间记住这些变量,以便能够执行不同的单元格中的相关操作。

第 1 部分指出 JavaScript 很适合作为有限状态机的执行环境,并提到它的一些与设计阶段相关的功能。在本文中,学习将设计转换为 JavaScript 的细节,利用一些优雅的语言特性,以及对一些不太优雅的细节进行调整以使实现更合理。

将设计转换为 JavaScript

在第 1 部分中完成了有限状态机的设计之后,就可以用 JavaScript 实现 FadingTooltip 部件了。这是从设计阶段到真实执行环境的转换阶段,也就是从轻松的抽象转换到实用性。

我们只考虑最流行的浏览器的最新版本:Netscape Navigator、Microsoft® Internet Explorer®、Opera 和 Mozilla Firefox。尽管这些执行环境的种类并不多,但是仍然会带来许多麻烦。我们必须处理将来自不同浏览器的鼠标和计时器事件连接到 JavaScript 程序的细节。有一种优雅的 JavaScript 语言特性称为函数闭包(function closure),它可以帮助您简化实现。还可以应用另一个优雅的 JavaScript 语言特性关联数组(associative array) 将状态表直接转换成代码。还会看到如何使用 HTML div 元素创建工具提示并指定样式,用文本和图像填充它,将它定位在鼠标旁边,使它淡入和淡出视图,并跟随鼠标的移动。

但是按照面向对象开发的精神,首先需要一个对象,它包含将实现的所有东西,所以我们首先开发这个对象。

上一页  1 2 3 4 5 6 7  下一页

Tags:JavaScript 有限 状态

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