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