部分Dojo常用函数简介（五）——事件处理以及Ajax I/O函数扩展

超、凢脫俗 2022-04-22 12:16 180阅读 0赞

每个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(): dojo.connect(obj, "onchange", ui, "update"); dojo.connect(obj, "onchange", ui, ui.update); // 调用disconnect来销毁创建的连接 var link = dojo.connect(obj, "onchange", ui, "update"); ... dojo.disconnect(link); // 当onglobalevent执行后, 调用watcher.handler: dojo.connect(null, "onglobalevent", watcher, "handler"); // 在ob.onCustomEvent执行后, 调用customEventHandler: dojo.connect(ob, "onCustomEvent", null, "customEventHandler"); dojo.connect(ob, "onCustomEvent", "customEventHandler"); // 在ob.onCustomEvent执行后, 调用customEventHandler // 两个例子的事件处理函数的作用域相同 (this): dojo.connect(ob, "onCustomEvent", null, customEventHandler); dojo.connect(ob, "onCustomEvent", customEventHandler); // 在globalEvent执行后, 调用globalHandler： dojo.connect(null, "globalEvent", null, globalHandler); dojo.connect("globalEvent", globalHandler);

## dojo.subscribe, dojo.unsubscribe ##

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

// 注册监听函数，监听"/foo/bar/baz"频道 dojo.subscribe("/foo/bar/baz", function(data)\{ console.log("i got", data); \}); // 当想触发被注册的监听函数时，调用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的简单用法的示例：

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 dojo.xhrPost(\{ form: "someFormId", // 在发送Post请求时，请求数据由form表单”someFormId”提供，URL可以通过form的action属性获取 timeout: 3000, content: \{ part:"one", another:"part" \} // creates ?part=one&another=part \}); // 获取JSON数据 dojo.xhrGet(\{ url:"data.json", handleAs:"json", load: function(data)\{ for(var i in data)\{ console.log("key", i, "value", data\[i\]); \} \} \})

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

[dojo.xhrGet]: http://docs.dojocampus.org/dojo/xhrGet
[dojo.xhrPost]: http://docs.dojocampus.org/dojo/xhrPost