Dojo与JS、JQuery的简单比较
平时开发都是用的JQuery,最近有空学习了一下Dojo,也有了个简单的了解,所以记录一下; DOJO官网地址:dojotoolkit,在官网可以在里面找到快速入门的栗子和文档,Dojo的文档很完善,所以看着文档学习还是比较快的。 快速入门:http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/ 比较: 1、元素选择器,dojo把id选择器和其他的分开了,不像jquery那样全部都是使用jquery对象,比如: (1)根据id查找DOM元素:
查看dojo/dom.js源码的一个片段(全部共30行),实现方式也比较简单,源码里还有很多其他的处理,应该是为了处理浏览器的兼容性,可以下载下来看看: dom.byId = function(id,doc){ return ((typeof id == "string") ? (doc || win.doc).getElementById(id) : id) || null; }; 使用方法: dom.byId("helloworld").innerHTML = " Hello New World! "; Dojo也提供了一个方法 (2)CSS选择器
dojo的一个使用实例,需要依赖 <div id="btn-list"> <button id="btn-hello" custom-attr="i am a btn">hello</button> <button id="btn-hello2" custom-attr="i am a btn2" class="hello2">hello btn2 by query</button> <button id="btn-hello3" custom-attr="i am a btn3" >hello btn3 by query</button> <button id="btn-hello4" custom-attr="i am a btn4" attr2="btn4">hello btn4 by query</button> </div> require(["dojo/query","dojo/domReady!"],function(query){ var _btn_hello_2 = query("#btn-list .hello2"),_btn_hello_3 = query("#btn-hello3"),_btn_hello_4 = query("button[attr2=btn4]"); _btn_hello_2.on( "click",function(evt){ alert("id:"+evt.target.id+";"+evt.target.innerHTML); });' console.log(_btn_hello_3); console.log(_btn_hello_4); }); 2、元素属性 || javascript | jquery | dojo | | -------- | ----- | ---- | |获取元素属性值|dom.attributes| $("#selector").attr("attr-name") |domAttr.get(dom/domid,"attr-name")| |设置元素属性值|| $("#selector").attr("attr-name","value") |domAttr.set(dom/domid,"attr-name","value")| dojo还可以批量设置DOM属性值,这个还是比较方便的: domAttr.set("attr-test",{ "attr1":"attr1-value","attr2":"attr2-value","attr3":"attr3-value","attr4":"attr4-value" }); 3、事件绑定
最后看看文档里一个比较完整的例子: require(["dojo/query","dojo/request","dojo/dom-form","dojo/dom-construct","dojo/dom-style" ],function(query,request,domForm,domConstruct,domStyle){ query("input[type='submit']").on("click",function(e){ e.preventDefault(); // prevent sending the form var btn = e.target; request.post("http://example.com/",{ data: domForm.toObject(btn.form) }).then(function(response){ // replace the form with the response domConstruct.create(div,{innerHTML: response},btn.form,"after"); domStyle.set(btn.form,"display","none"); }); }); }); 小小的总结:dojo使用给我的感觉就像是在对dojo提供的工具方法的使用,需要在不同的应用场景引入不同的模块,一开始看起来需要记很多东西的样子,但是其实常用的模块比如dom,domAttr写一下就记住了;这种严格的引入看起来有点繁琐,但是也会让人很清晰地看到我们需要使用什么,这是dojo本身的设计和特色,而jquery没有那么多限制,只需要持有jquery对象便可以做很多事情了。 由于我的见识比较少,那么问题来了,为什么没怎么看到有人在用dojo呢? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |