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

核心提示： 在初始化拖放序列并调用此处理程序时，它会创建 onmousemove 和 onmouseup 处理程序并能在目标元素内安装它们，用 JavaScript 创建模块化的交互用户界面(9)，当然，它还会使用一个 install_mouse_handlers()， 关于作者Greg Travis

在初始化拖放序列并调用此处理程序时，它会创建 onmousemove 和 onmouseup 处理程序并能在目标元素内安装它们。当然，它还会使用一个 install_mouse_handlers()，以便以后的卸载。

还有一点需要注意：是在 document 对象内安装这些处理程序的。这一点十分关键，因为在拖放过程中用户可能会将光标拖过整个页面。如果鼠标超出可切换元素的范围 — 您很可能还想收到这些事件。同样地，可以使用 install_mouse_handlers() 以便以后恢复它们。

将它们组合起来

至此，我已经介绍了很多不同的类和函数。其中的每一个类或函数本身都十分简单，因此更重要的是要了解它们是如何协同工作的。

下面是对整个拖放过程的一个总结：

单击一个可切换元素。

此元素的 onmousedown 处理程序将被调用，它安装 onmousemove 和 onmouseup 处理程序。

移动鼠标，这些处理程序将被调用。

这些处理程序反过来调用前面安装的拖动处理程序。

这个拖动处理程序实际上是一个复合拖动处理程序，综合了两个不同的拖动处理程序的效果。

其中的一个拖动处理程序 rectangle_drag_handler 负责向光标附加一个代表被拖动元素的透明矩形。

另一个拖动处理程序 highlighting_drag_handler 负责突出显示鼠标移过的那些可切换元素，以显示可以进行元素拖动的地方。

当在目标元素之上释放鼠标按钮时，highlighting_drag_handler 的 done() 方法就会切换这两个元素。这个拖动处理程序将被卸载，只留下最初的 onmousedown 处理程序，准备好开始下一轮的拖放过程。

结束语

拖放操作相对简单，但它涉及了几个交互过程，用来跟踪整个过程的用户输入和提供即时反馈。本文展示如何将模块化的交互元素组合成统一整体来构建完整的 GUI。

这种做法有很多好处。由于代码是模块化的，因此更容易编写和维护。所需的函数和类的代码没有一个是超过 40 行的，并且它们通常更短。

每一个交互元素都会实现一个典型的 GUI 过程或效果，所以可在其他上下文中重用它们。可以开发这些交互元素的丰富的库，从而通过组合各个部分构建更复杂的 UI。

关于作者

Greg Travis 是 Google 的软件工程师。他做过 Web 程序员、独立承包商和游戏开发人员。可以通过 mito@panix.com 与 Greg 联系。