．ＮＥＴ　ＡＪＡＸ拖放引擎內部機制分析

陳　骙

[摘 要]拖放引擎一直是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客戶組件的基礎上