部分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()执行后,<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>ui.update(): dojo.connect(obj,"onchange",ui,"update"); dojo.connect(obj,ui.update); // <a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>connect来销毁创建的连接 var link = dojo.connect(obj,"update"); ... dojo.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>connect(link); // 当onglobalevent执行后,<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>watcher.handler: dojo.connect(null,"onglobalevent",watcher,"handler"); // 在ob.onCustomEvent执行后,<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>customEventHandler: dojo.connect(ob,"onCustomEvent",null,"customEventHandler"); dojo.connect(ob,"customEventHandler"); // 在ob.onCustomEvent执行后,<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>customEventHandler // 两个例子的事件处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的作用域相同 (this): dojo.connect(ob,customEventHandler); dojo.connect(ob,customEventHandler); // 在globalEvent执行后,<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>globalHandler： dojo.connect(null,"globalEvent",globalHandler); dojo.connect("globalEvent",globalHandler);

dojo.subscribe,dojo.unsubscribe

dojo.subscribe用于注册函数监听某个被发布的频道。当调用dojo.publish来向被监听的频道发送数据时，被注册的监听函数则被触发，接收发送的数据作为参数。具体用法参见下面的例子：

// <a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>监听<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，监听"/foo/bar/baz"频道 dojo.subscribe("/foo/bar/baz",function(data){ console.log("i got",data); }); // 当想触发被<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>的监听<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>时，<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>dojo.publish向"/foo/bar/baz"频道发送数据 dojo.publish("/foo/bar/baz",[{ some:"object data" }]); // 这些频道的名字可以为任意定义的字符串 dojo.subscribe("foo-bar",function(data){ /* handle */ }); dojo.subscribe("bar",function(data){ /* handle */ }); dojo.subscribe("/foo/bar",function(data){ /* handle */ });

与dojo.connect相同，dojo.subscribe会返回一个对象，在对代码进行销毁时，需要调用dojo.unsubscribe，传入dojo.subscribe返回的对象来销毁监听对象，以避免内存泄露。

dojo.publish,dojo.connectPublisher

结合上面的dojo.subscribe，dojo.publish是用于向指定的频道发布数据的一个函数。

dojo.connectPublisher则用于绑定某些事件，以便自动向指定的频道发布数据。如下例所示，两段代码的功能是相同的：

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

使用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"}; var xhrHandler = dojo.xhrGet( { url: "test.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>",content: queryObj } ); xhrHandler.addCallback(function(data){ datahandler(data); }); xhrHandler.addErrback(function(error){ errorHandler(error); });

dojo.xhr*接收一个JSON对象作为参数，该参数可包括众多属性，以下列出一些重要的属性：

• url – XHR的数据请求接收URL，由于XHR的安全限制，该URL必须与脚本处于相同的域及端口下；
• timeout – 超时设定，单位为ms，当等待时间超过给定值，则会抛出一个错误给指定的错误处理回调函数；
• sync - boolean值，指定该XHR请求是同步或是异步，默认值为false（异步）；
• content – 一个JSON对象，其包含的键值对将作为请求参数添加到URL后；

以上只列出了一部分属性，要想知道全部属性列表，请参见dojo campus文档（dojo.xhrGet ，dojo.xhrPost ）。下面是另一个示例：

// 发送<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>post请求，并忽略response dojo.xhrPost({ form: "someFormId",// 在发送Post请求时，请求数据由form表单”someFormId”提供，URL可以通过form的action<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a> timeout: 3000,content: { part:"one",another:"part" } // creates ?part=one&another=part }); // <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>JSON数据 dojo.xhrGet({ url:"data.json",handleAs:"json",load: function(data){ for(var i in data){ console.log("key",i,"value",data[i]); } } })

至此，该系列文章：部分Dojo常用函数简介就告一段落了，希望能这些简单的介绍能对大家的开发带来一点帮助，而如果在其中有什么错误疏漏，也请大家不吝指正。