部分Dojo常用函數簡介（五）——事件處理以及Ajax I/O函數擴充

每個Ajax 架構都對Javascript 做了擴充，提供了很多常用函數，增強了 Javascript 的開發效率。在這裡將對部分Dojo
中的常用函數做簡單的介紹。由於Dojo的常用函數較多，也為方便大家閱讀，將這些常用函數分為了五個類別分別進行介紹。本文將介紹第五部分，也是最後一部分的內
容：事件處理以及Ajax I/O函數擴充。

* 本系列博文的絕大多數內容來自於對dojocampus.org上的dojo reference
guide文檔的翻譯，在此也特別感謝文檔的翻譯者們：Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun,
Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi

dojo.connect, dojo.disconnect

dojo.connect用於將指定的事件處理函數綁定到事件上，也可以將綁定到某個函數上，在被綁定的函數執行後，給定的函數將會被觸發執行。dojo.connect是Dojo的最主要的事件處理及委託方式，它可接收5個參數：

 

dojo.connect(obj, event, context, method, dontFix);

 

• obj： 事件來源對象，或被綁定函數的範圍，預設值（或obj被設為null）為dojo.global。
• event：事件名或被綁定函數名，結合第一個參數，被綁定事件（或函數）會被指定為obj[event]。
• Context：事件處理函數（綁定函數）的範圍。預設值（或context被設為null）為dojo.global。
• Method：事件處理函數（綁定函數）的名稱或是函數引用，如果為函數名稱，結合context參數，該函數會被指定為context[method]。這個函數會在事件或綁定函數執行後被觸發。該函數接收的參數與事件或被綁定函數的參數相同。
• dontFix：這是一個選擇性參數，如果第一個參數obj為一個DOM節點對象，且dontFix設為true，則事件處理不會委託給DOM事件管理器來進行分發。

dojo.connect將會返回一個handle對象，強烈建議你在代碼中儲存這些handle對象，並在代碼進行銷毀時調用dojo.disconnect來銷毀這些串連，否則將會導致記憶體泄露。具體用法參見下面的樣本：

 

// 當obj.onchange()執行後, 調用ui.update():<br />dojo.connect(obj, "onchange", ui, "update");<br />dojo.connect(obj, "onchange", ui, ui.update);<br />// 調用disconnect來銷毀建立的串連<br />var link = dojo.connect(obj, "onchange", ui, "update");<br />...<br />dojo.disconnect(link);<br />// 當onglobalevent執行後, 調用watcher.handler:<br />dojo.connect(null, "onglobalevent", watcher, "handler");<br />// 在ob.onCustomEvent執行後, 調用customEventHandler:<br />dojo.connect(ob, "onCustomEvent", null, "customEventHandler");<br />dojo.connect(ob, "onCustomEvent", "customEventHandler");<br />// 在ob.onCustomEvent執行後, 調用customEventHandler<br />// 兩個例子的事件處理函數的範圍相同 (this):<br />dojo.connect(ob, "onCustomEvent", null, customEventHandler);<br />dojo.connect(ob, "onCustomEvent", customEventHandler);<br />// 在globalEvent執行後, 調用globalHandler：<br />dojo.connect(null, "globalEvent", null, globalHandler);<br />dojo.connect("globalEvent", globalHandler);<br />

dojo.subscribe, dojo.unsubscribe

dojo.subscribe用於註冊函數監聽某個被發布的頻道。當調用dojo.publish來向被監聽的頻道發送資料時，被註冊的監聽函數則被觸發，接收發送的資料作為參數。具體用法參見下面的例子：

 

// 註冊監聽函數，監聽"/foo/bar/baz"頻道<br />dojo.subscribe("/foo/bar/baz", function(data){<br /> console.log("i got", data);<br />});<br />// 當想觸發被註冊的監聽函數時，調用dojo.publish向"/foo/bar/baz"頻道發送資料<br />dojo.publish("/foo/bar/baz", [{ some:"object data" }]);<br />// 這些頻道的名字可以為任意定義的字串<br />dojo.subscribe("foo-bar", function(data){ /* handle */ });<br />dojo.subscribe("bar", function(data){ /* handle */ });<br />dojo.subscribe("/foo/bar", function(data){ /* handle */ });<br />

 

與dojo.connect相同，dojo.subscribe會返回一個對象，在對代碼進行銷毀時，需要調用dojo.unsubscribe，傳入dojo.subscribe返回的對象來銷毀監聽對象，以避免記憶體泄露。

dojo.publish, dojo.connectPublisher

結合上面的dojo.subscribe，dojo.publish是用於向指定的頻道發布資料的一個函數。

dojo.connectPublisher則用於綁定某些事件，以便自動向指定的頻道發布資料。如下例所示，兩段代碼的功能是相同的：

 

dojo.connect(myObject, "myEvent", function(){<br /> dojo.publish("/some/topic/name", arguments);<br />});

 

使用dojo.connectPublisher：

 

dojo.connectPublisher("/some/topic/name", myObject, "myEvent");

 

dojo.connectPublisher會返回一個handle對象，在銷毀代碼時，需要調用dojo.disconnect來對這個串連進行銷毀以避免記憶體泄露。

dojo.xhr

首先需要注意，dojo.xhr並不是一個函數，XHR是XMLHTTP request object (XMLHTTP請求對象)的一個簡寫。Dojo封裝了一系列的XHR函數用於Ajax互動，包括：dojo.xhrGet, dojo.xhrPost, dojo.xhrDelete,dojo.xhrPut, dojo.rawXhrPost, dojo.rawXhrPut等。這些函數的功能與用法都比較類似，下面是一個dojo.xhrGet的簡單用法的樣本：

 

var queryObj = {sort: "id"};<br />var xhrHandler = dojo.xhrGet(<br /> {<br /> url: "test.php",<br /> content: queryObj<br /> }<br />);<br />xhrHandler.addCallback(function(data){<br /> datahandler(data);<br />});<br />xhrHandler.addErrback(function(error){<br /> errorHandler(error);<br />});

 

dojo.xhr*接收一個JSON對象作為參數，該參數可包括眾多屬性，以下列出一些重要的屬性：

• url – XHR的資料請求接收URL，由於XHR的安全限制，該URL必須與指令碼處於相同的域及連接埠下；
• timeout – 逾時設定，單位為ms，當等待時間超過給定值，則會拋出一個錯誤給指定的錯誤處理回呼函數；
• sync -  boolean值，指定該XHR請求是同步或是非同步，預設值為false（非同步）；
• content – 一個JSON對象，其包含的索引值對將作為請求參數添加到URL後；

以上只列出了一部分屬性，要想知道全部屬性列表，請參見dojo campus文檔（dojo.xhrGet
，dojo.xhrPost
）。下面是另一個樣本：

 

// 發送一個post請求，並忽略response<br />dojo.xhrPost({<br /> form: "someFormId", // 在發送Post請求時，請求資料由form表單”someFormId”提供，URL可以通過form的action屬性擷取<br /> timeout: 3000,<br /> content: { part:"one", another:"part" } // creates ?part=one&another=part<br />});<br />// 擷取JSON資料<br />dojo.xhrGet({<br /> url:"data.json",<br /> handleAs:"json",<br /> load: function(data){<br /> for(var i in data){<br /> console.log("key", i, "value", data[i]);<br /> }<br /> }<br />})

 

至此，該系列文章：部分Dojo常用函數簡介就告一段落了，希望能這些簡單的介紹能對大家的開發帶來一點協助，而如果在其中有什麼錯誤疏漏，也請大家不吝指正。