．ＮＥＴ　ＡＪＡＸ拖放引擎内部机制分析

陈　骙

[摘 要]拖放引擎一直是AJAX技术的典型应用之一,但由于其实现难度较大,所以多数开发员选择第三方框架实现该效果。因为多数框架封装了拖放引擎的底层实现,使得不少人知其然不知其所以然。本文通过分析.NET AJAX Futures CTP中提供的拖放模型,深入探讨了拖放引擎的实现机制。希望本文能对AJAX开发员有所帮助。

[关键词]AJAX 拖放引擎 JavaScript

一、了解工具及其作用

本文使用的工具是.NET AJAX Futures CTP。它是安装在Visual Studio.NET 2005/2008中的一个工具包,其中包含了将在今后的ASP.NET AJAX版本中加入的额外特性[4]。虽然它能够实现拖放效果,但目前还没有得到微软的支持,也没有对应的文档说明。

尽管使用.NET AJAX Futures CTP不如其它框架方便,但对于了解拖放引擎的底层实现和内部机制却很有帮助。通过手动编写代码,可以加深对拖放引擎的理解。而且,虽然.NET AJAX Futures CTP没有提供具体实现拖放引擎的工具,但却给出了一个清晰的拖放引擎模型,使得开发员有章可循。

二、.NET AJAX Futures CTP中拖放引擎的内部机制分析

(一)构成拖放引擎的要素

抛开任何框架,仅从表面上来看,要想构建拖放引擎,必须具备两个要素,即:

1.可拖放项(draggable items)可以在页面上拖动的DOM元素。

2.投放区(drop zones)允许在其区域内投放可拖动项的DOM元素。

在.NET AJAX Futures CTP中实现拖放效果,必须手动编写这两个要素。

(二)NET AJAX Futures CTP拖放引擎模型

虽然许多工作需要我们自己来完成,但正如前所述,.NET AJAX Futures CTP提供了一个清晰的拖放引擎模型,使得我们有章可循。

一旦在页面中启用了.NET AJAX Futures CTP并引用了PreviewScript.js和PreviewDragDrop.js文件[5],则当页面加载时,会自动创建一个一个名叫DragDropManager的全局JavaScript对象并将其存储在Sys.Preview.UI.DragDropManager全局变量中。DragDropManager对象是.NET AJAX Futures CTP拖放引擎的核心,负责管理可拖放项和投放区。它的主要任务是:注册可拖放项和投放区,并在拖放过程中的不同阶段为它们提供反馈信息,同时协助二者进行数据交互。

首先,注册可拖放项和投放区。DragDropManager对象提供了两个函数将页面上的客户组件注册为可拖放项和投放区。这两个函数分别是:startDragDrop()和registerDropTarget()。值得注意的是:这两个函数需要手动调用而且调用的时机不同。一般而言,投放区在页面的位置是固定不变的,所以在初始化某客户组件时即可调用registerDropTarget()函数将其注册为投放区。而可拖放项则不同,它需要在拖放开始的时候调用startDragDrop()函数表明“拖放操作已经开始”。例如,当用户在某图片上按下鼠标左键并拖动鼠标时拖放操作开始,显然,这时可以在mousedown事件的事件处理函数中调用startDragDrop()函数。其次,当拖放操作开始之后,DragDropManager对象要在拖放过程中为可拖放项和投放区提供反馈信息。为了接收反馈信息并对其进行处理,可拖放项需要实现IDragSource接口,而投放区需要实现IDropTarget接口[6]。这两个接口均位于Sys.Preview.UI命名空间中,它们提供了一组函数,用于接收从DragDropManager对象传来的反馈信息并进行处理。这两个接口也必须手动实现。第三,除了视觉上的拖放效果外,可拖放项和投放区能够进行数据的交互。IDragSource接口和IDropTarget接口还提供了一组用于数据交互的函数,可以使用它们为拖放过程中的不同阶段进行数据处理。

综上所述,实现一个拖放引擎的核心模型如下图所示[7]

(三)实现拖放引擎的具体步骤

根据2.2所述的拖放引擎模型及其内部关联机制,我们可以总结出手动实现拖放引擎的基本步骤:1.创建客户组件;2.将客户组件注册为可拖动项和投放区;3.实现IDragSource接口和IDropTarget接口,完成对反馈信息的接收及拖放过程中的数据交互;4.在页面上进行集成。以上各步骤中,1.不是本文的重点[8],4.为进行.NET AJAX编程的基本操作,但对于正真实现的拖放系统它们都是很重要的。

三、小结

本文论述了.NET AJAX Futures CTP中拖放引擎的内部机制,并提供了实现一个简单拖放引擎的关键步骤,希望对学习和使用.NET AJAX框架的开发员有所帮助。拖放引擎是一个相当高级的AJAX主题,涉及了JavaScript的高级语法,创建客户组件,客户端页面生命周期等一些高级技术,仅仅一篇文章无法将这些内容完全包含进去。本文只是探讨拖放引擎的内部机制及实现,如果想深入了解更多的AJAX高级特性,建议阅读参考书目中的三本书,相信它们会对您有巨大的帮助。

参考文献

[1]JavaScript基础教程 (美)Tom Negrino, Dori Smith 著

[2]深入浅出JavaScript (德)Christian Heilmann 著

[3]ASP.NET AJAX实战 (意)Alessandro Gallo (美)David Barkol (美)Rama Krishna Vavilala 著

[4]原有的Visual Studio.NET 2005/2008是不包含该工具包的。该工具包可以从http://ajax.asp.net下载,该官方网站还提供了安装该工具包的详细步骤

[5]这两个文件作为Web资源嵌在Microsoft.Web.Preview.dll程序集中,可以在.NET AJAX Futures CTP的安装目录下找到它们

[6]本文中所提到的“类”,“对象”,“接口”,“命名空间”均是使用JavaScript模拟实现,因为JavaScript本身并没有提供这些语法功能。具体可阅读参考书目[3]

[7]该图引自参考书目[3]

[8]创建客户组件是相当高级的。NET AJAX主题,本文从本质上来说就是在创建可拖放的客户组件,所以本文建立在读者已经了解.NET AJAX客户组件的基础上