用 JavaScript 创建模块化的交互用户界面

核心提示： 交互性的元素程序一般是通过将各功能块结合在一起而构建起来的，不同的程序员会有不同的实现方式，用 JavaScript 创建模块化的交互用户界面(4)，但作为一种规律，最好是采用多个小的功能块而不是少数几个大的功能块，一个拖动处理程序可处理一系列事件而不只一个单一事件，下面是拖动处理程序的示

交互性的元素

程序一般是通过将各功能块结合在一起而构建起来的。不同的程序员会有不同的实现方式，但作为一种规律，最好是采用多个小的功能块而不是少数几个大的功能块。每个小功能块应该实现一种功能并具有清楚的语义。

不过，在进行 GUI 编程时，这样的构建不太容易。好的 GUI 必须调整很多界面元素并将它们的行为结合起来形成一个能直观工作的整体行为。基于事件的系统通常都是由复杂的交换行为联合起来的回调集合。模块化的交互元素很难创建。

模块化的交互元素

可切换代码就使用了模块化的交互元素。前面，我提到过在可切换系统内有两种主要的交互元素：拖动元素的突出显示和拖动到的目标的突出显示。在代码中，这两个元素的实现是分开的。

本例很好地展示了模块化处理交互性的技巧。正如可切换界面的描述中所提到的，这两个交互性元素常常缠结在一起。突出显示和突出显示的消失都是在一个鼠标操作中发生的，而且它们的发生都对应鼠标输入的不同方面。如果这两个元素是在一个代码片段中实现的，那么代码可能不太容易读懂，因为同时发生的事情很多。

拖动处理程序

为了使 GUI 的实现模块化，我使用了拖动处理程序。这类似于内置在 GUI 系统的事件处理程序。虽然事件处理程序只处理某种单一事件，拖动处理程序却可以处理整个拖放过程。一个拖动处理程序可处理一系列事件而不只一个单一事件。下面是拖动处理程序的示例骨架，如清单 4 所示。

清单 4. 拖动处理程序的骨架

{
　　start:
　　　function( x, y ) {
　　　　// ...
　　　},
　　move:
　　　function( x, y ) {
　　　　// ...
　　　},
　　done:
　　　function() {
　　　　// ...
　　　},
　}