从Dojo1.6到Dojo1.8（二）—— 基本模块，事件，约定，DOM操作
|
转载自：http://www.cnblogs.com/owenChen/archive/2012/12/20/2827076.html 上一篇文章介绍了Dojo1.8带来的整体上的变化，以及AMD机制带来的Dojo模块化的改变。这一篇文章将把中心放在dojo core的改变上。将从dojo base的几个基本模块lang，array，load等入手，再详细介绍一下Event，Advice，Topics，Promises，Requests等几个常用功能的变化。 相信从上一篇的介绍，大家应该能够感觉到dojo在模块化上的变化，baseless是一个趋势，就是说一个模块仅仅依赖于它所要使用的模块，而非去加载一个dojo.js，其实里面有很多的类和方法都是没有被使用到的。从1.8开始，要尽量避免使用dojo.*，取而代之的将是很多个新的模块的引入，如lang.*,kernal.*。。。 dojo 基本模块 首先我们来讨论一下Dojo的几个基本的模块，或者说一些基本的方法。如dojo.extend,dojo.hitch,dojo.isArray，看看这些基本函数在1.8中将如何被使用。 类型判断函数 Dojo2.0将移除dojo的几个类型判断函数，因为他们基本都可以通过原生的JavaScript函数去完成，如下所示：
dojo/_base/lang
dojo/_base/array
浏览器/设备 嗅探器 在dojo1.6中我们可以通过dojo.isIE等变量来获取用户浏览器的一些信息。而在dojo1.8中将改成使用dojo/has API来获取这些信息。举例来说： if(dojo.isIE < 6){ // ... } 将改成： require(["dojo/has","dojo/sniff"],function(has){ if(has("ie") < 6){ // ... } }); Load 和 UnLoad 处理函数 dojo.addOnLoad和dojo.addOnUnLoad函数用来在页面加载完之后或者离开页面的时候调用一些处理函数，在1.8中，这两个函数被分别移到了dojo/ready和dojo/_base/unload模块之中。用法也发生了如下的变化：
我也没有搞懂为什么ready和unload所在的目录不一样，unload要被放在_base目录中。这里先放一个疑问，之后有空再去研究一下。也希望能有同学发现并告诉我其中的原因。 更多的关于dojo基础函数的变化可以参考dojo2.0 migration guide的相关内容。 事件处理（Events） DOM事件 dojo提供了在HTML tag中定义控件/节点DOM事件的方法，下面是一段很常见的例子： <script> dojo.require("dijit.form.Button"); myOnClick = function(evt){ console.log("I was clicked"); }; dojo.connect(dojo.byId("button3"),"onclick",myOnClick); </script> <body> <div> <button id="button1" type="button" onclick="myOnClick">Button1</button> <button id="button2" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick: myOnClick">Button2</button> <button id="button3" type="button">Button3</button> <button id="button4" data-dojo-type="dijit.form.Button" type="button"> <span>Button4</span> <script type="dojo/connect" data-dojo-event="onClick"> console.log("I was clicked"); </script> </div> </body> 在1.8版本中，将只能使用dojo/on，同样可以使用编程式或者定义式的方式来定义事件。对DOM原生事件以及Widget的事件都同样适用。 <script> require(["dojo/dom","dojo/on","dojo/parser","dojo/ready","dijit/registry","dijit/form/Button"],function(dom,on,parser,ready,registry){ var myClick = function(evt){ console.log("I was clicked"); }; ready(function(){ parser.parse(); on(dom.byId("button1"),"click",myClick); on(registry.byId("button2"),myClick); }); }); </script> <body> <div> <button id="button1" type="button">Button1</button> <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button> <button id="button3" data-dojo-type="dijit/form/Button" type="button"> <div>Button4</div> <script type="dojo/on" data-dojo-event="click"> console.log("I was clicked"); </script> </button> </div> </body> dojo/on 取代dojo.connect 在dojo之前的版本中一直被津津乐道的dojo.connect和dojo.disconnect（这两个函数使用不当会造成严重的内存泄漏，后面会专门写篇文章来讲）在1.8之后将会被dojo/on模块中的on()函数所取代。 dojo.connect用法： var handle = dojo.connect(node,"onclick",callback); // ... dojo.disconnect(handle); 将被改成如下的新用法: require(["dojo/on"],function(on){ var handle = on(node,"click",callback); // ... handle.remove(); }); 注意到这里的on前缀被移除了，onclick被编程了click。 返回的handle变量提供了一个remove方法，而不再需用使用dojo.disconnect来去除事件关联。 此外dojo/query返回的节点列表也可以直接使用on函数来绑定事件处理函数。如： //老的写法，使用connect dojo.query("li").connect("onclick",callback); //1.8之后，使用on require(["dojo/query"],function(query){ query("li").on("click",callback); }); 鼠标事件（mouse） dojo支持onmouseenter和onmouseleave事件，尽管有些浏览器原生不支持这些事件。在dojo1.6及之前的版本中onmouseenter作为string传入dojo.connect函数中，如： dojo.connect(node,"onmouseenter",callback); 在1.8中这两个事件被定义在dojo/mouse模块的事件对象中，使用的时候它需要和其他模块一样加载进来： require(["dojo/on","dojo/mouse"],function(on,mouse){ on(node,mouse.enter,callback); }); 对于鼠标按键的事件的写法也有所改变。 1.6及之前版本写法： dojo.connect(node,"onmousedown",function(evt){ if(dojo.mouseButtons.isLeft(evt){ ... } }); 新的写法如下： require(["dojo/on","mousedown",function(evt){ if(mouse.isLeft(evt)){ ... } }); }); 事件委派（Event Delegation） 对于JavaScript的事件委托一直想找事件好好讲一下，几乎每个框架都提供了对它的支持和封装，jQuery，dojo等。不过在这里讲貌似又不是很合适，先大概讲一下自己的理解： 当某个元素的事件被触发的时候，该事件会被抛到它的父节点(parent)。所以当需要处理很多子节点的事件的时候，我们可以只捕获父节点的事件，然后通过判断事件目标(e.target)来判定是不是我们所想要处理的节点的事件被触发了。等不及的同学可以访问http://davidwalsh.name/event-delegate这篇文章，我觉得讲的还比较详细。 在dojo1.6中使用dojo.behavior和dojox.NodeList.delegate模块来支持事件委派，在1.8中被编入了dojo/on模块中。 1.6的写法： var myBehavior = { "#mylist li:click" : { onclick: onListItemClickHandler } }; dojo.behavior.add(myBehavior); dojo.behavior.apply(); 1.8及写法： require(["dojo/on","dojo/query","dojo/_base/window"],query,win){
on(win.doc(),"#mylist li:click",onListItemClickHandler);
});
对于事件处理的更多的变化可以参考下表：
通知（Advice） Dojo.connect可以用于类似AOP中的后通知（After Advice），可以用于在某些切入点之后调用指定的处理函数。在1.8中，dojo提供了一个较为全面的AOP支持dojo/aspect。 aspect提供了三个方法aspect.before(),aspect.after(),aspect.arround()。分别用来在某个方法调用前、后或者前后插入处理函数的接口。 1.6的写法： var handle = dojo.connect(myInstance,"execute",callback); // ... dojo.disconnect(handle); 在1.8中将使用aspect的写法： require(["dojo/aspect"],function(aspect){ var handle = aspect.after(myInstance,callback); / ... handle.remove(); }); 订阅与发布（Subscribe and Publish）/Topic dojo.publish()/dojo.subscribe()/dojo.unsubscribe是dojo提供的订阅与发布模式的接口。在1.8中被封装到了dojo/topic模块中。 使用老的接口的写法： // To publish a topic dojo.publish("some/topic",[1,2,3]); // To subscribe to a topic var handle = dojo.subscribe("some/topic",context,callback); // And to unsubscribe from a topic dojo.unsubscribe(handle); 1.8使用Topic的写法： require(["dojo/topic"],function(topic){ // To publish a topic topic.publish("some/topic",1,3); // To subscribe to a topic var handle = topic.subscribe("some/topic",function(arg1,arg2,arg3){ // ... }); // To unsubscribe from a topic handle.remove(); }); 延迟和约定（deferred and promise） 延迟（Deferred）一直是dojo很热门的一个处理异步调用的工具，它提供了延迟处理函数的调用，直到某个特定事件发生或某个动作完成后发生。Dojo中的Ajax调用的异步处理就是使用的Deffered的机制。 契约（Promise）是一套API接口，定义了进行异步处理的一些方法和属性，Deferred是promise的实现。后面我会找时间专门写一篇文章来介绍Dojo中的Deffered和Promise，这里先重点讲一下Promise在1.8中的变化。 在Dojo1.8中，对promise接口进行了重构，Dojo.Deferred和dojo.DeferredList的使用也发生了变化。1.8中，dojo.Deferred和dojo.when的功能被移到了dojo/promise，dojo/deferred以及dojo/when的模块当中。dojo.DeferredList被弃用，相应的功能被dojo/promise/all所取代，可以支持当多个契约事件都发生之后，再调用特定的处理函数。 首先看一下1.6版本Deferred的使用方式： function createMyDeferred(){ var myDeferred = new dojo.Deferred(); setTimeout(function(){ myDeferred.callback({ success: true }); },1000); return myDeferred; } var deferred = createMyDeferred(); deferred.addCallback(function(data){ console.log("Success: ",data); }); deferred.addErrback(function(err){ console.log("Error: ",err); }); 再一下1.8的写法 require(["dojo/Deferred"],function(Deferred){ function createMyDeferred(){ var myDeferred = new Deferred(); setTimeout(function(){ myDeferred.resolve({ success: true }); },1000); return myDeferred; } var deferred = createMyDeferred(); deferred.then(function(data){ console.log("Success: ",data); },function(err){ console.log("Error: ",err); }); }); 弃掉了callback函数的调用，取而代之的是resolve方法，这样更能突出契约的概念。使用then函数通过传参数的方式传入处理函数，也比直接调用addCallback和addErrback更加简洁。 Getting Started with Deferreds 以及 Dojo Deferred and Promises两篇文档比较全面的介绍了dojo promise和deferred的概念和用法。大家可以仔细阅读，之后我也会找时间将这两篇翻译一下，并加入自己的理解。有兴趣的同学可以关注。 请求（requests） 把请求（request）放在这里讲，主要是因为在dojo的Ajax调用使用了promise的接口，所以在1.8中也会随着promise的改变发生一下使用上的变化。我们取1.6中的dojo.xhrGet方法为例： dojo.xhrGet({ url: "something.json",handleAs: "json",load: function(response){ console.log("response:",response); },error: function(err){ console.log("error:",err); } }); 在1.8中，新的写法类似于promise： require(["dojo/request"],function(request){ request.get("something.json",{ handleAs: "json" }).then(function(response){ console.log("response:",function(err){ console.log("error:",err); }); }); 同时在1.8中，对于script以及iframe交互的也被封装到了dojo/request/script以及dojo/request/iframe两个子模块中。使用了与dojo/request的接口。 在官网的文档上看到这样一段话：
意思是说dojo/request会自动根据代码运行的平台和环境选择最合适的请求处理方式，对于浏览器来说当然是XHR。而对于NodeJS这样的后台运行环境，可能会使用别的方式来处理请求，如请求本地资源的本地IO（对NodeJS了解不是非常深，所以这里只能自己YY一下了。。）。 之前在developworks上看到过dojo部门的同事写的在Node.js上使用Dojo的文章，还没来得及实验，大家有兴趣的可以看一下：http://www.ibm.com/developerworks/cn/web/1203_wangpei_dojonodejs/ DOM 操作 接下来我们讲一下dojoDOM操作方法和接口的变化。我想大家从前面的介绍中已经看出现在Dojo的趋势是放弃dojo core作为所有dojo模块的依赖，所以之前在dojo.*下的一些DOM操作的方法也被相应的移到了一些新的模块当中。下面的表格总结了这些模块的以及相应的功能：
举个简单的例子，在1.6中对一个DOM node的获取和改变属性的方法如下： var node = dojo.byId("someNode"); // Retrieves the value of the "value" DOM attribute var value = dojo.attr(node,"value"); // Sets the value of the "value" DOM attribute dojo.attr(node,"value","something"); 在1.8中，都使用dojo/dom和dojo/dom-attr两个模块中的方法： require(["dojo/dom","dojo/dom-attr"],function(dom,domAttr){ var node = dom.byId("someNode"); // Retrieves the value of the "value" DOM attribute var value = domAttr.get(node,"value"); // Sets the value of the "value" DOM attribute domAttr.set(node,"something"); }); 这样的写法引入模块的概念，可以让你很明确的明白自己在做的事情，减少错误的发生。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |