Dojo与JS、JQuery的简单比较

大佬教程收集整理的这篇文章主要介绍了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元素：

javascript	jquery	dojo
document.getElementById()	$("#id")	dom.byId()

查看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也提供了一个方法dom.isDescendant，用于判断一个元素是否是另一个元素的子元素；

(2)CSS选择器

javascript	jquery	dojo
document.querySELEctor("...")/querySELEctorAll()	$("...")	query(SELEctor,context)

dojo的一个使用实例，需要依赖query模块：

<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、事件绑定

javascript	jquery	dojo
addEventListener("")	$("#SELEctor").on()	on()

最后看看文档里一个比较完整的例子：

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呢？

大佬总结

以上是大佬教程为你收集整理的Dojo与JS、JQuery的简单比较全部内容，希望文章能够帮你解决Dojo与JS、JQuery的简单比较所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。