JavaScript 中的有限状态机，第 1 部分: 设计一个小部件

核心提示： 有限状态机和运行时环境有限状态机是事件驱动的，需要在它们的运行时环境将其与其相关的事件挂接起来，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(6)，这可通过事件处理程序 实现，事件处理程序是一些可插入到运行时环境的小的代码片段，在该表的标题行和标题列分别列出了事件和

有限状态机和运行时环境

有限状态机是事件驱动的，需要在它们的运行时环境将其与其相关的事件挂接起来。这可通过事件处理程序 实现，事件处理程序是一些可插入到运行时环境的小的代码片段，一旦特定事件发生，这些处理程序就会执行。事件处理程序执行时，需要获得如下一些基本信息：

已发生事件的类型（例如，光标移动、定时器超时）

事件的上下文（例如，光标位于哪个 HTML 元素之上、完成的是哪个网络请求）

有限状态机自身的变量和方法的位置

JavaScript 十分适合于构建事件驱动的有限状态机。事实上，JavaScript 有点太过适合 —— 它有三种挂接事件的方式。每种事件模型 都很直观明了，但程序必须实现所有三种模型以确保它们可以运行于所有流行的浏览器之上。事件的上下文在其中两个事件模型内被直接传递给事件处理程序；对于另外一个模型，JavaScript 函数闭包允许事件的上下文被包裹进其事件处理程序。

JavaScript 提供一种对象模型，对象模型是 Java 和 C++ 程序员所熟知的，它也可用来对有限状态机的变量和方法进行编码。而且，JavaScript 关联数组还允许直接对有限状态机的二维表进行编码。

系统地设计行为

有限状态机的基本要素是它所响应的事件及事件间的状态。设计必须考虑到每个可能状态的每个可能事件：

在该状态下，此事件是否可能发生

采取什么动作来处理事件

事件过后转移到什么状态

在事件之间需要记录什么变量

我以 图 1 所示的一个图形来开始设计的过程，图中气球形圆圈所示的是状态，连接这些圆圈的箭头线代表的是转移。最终获得的是一张表，如 图 4 所示，在该表的标题行和标题列分别列出了事件和状态。表中的一些单元格列出了当特定事件在特定状态发生时所要执行的动作，其它一些则表示在该状态下此事件不能发生。