Dojo與jQuery綜合比較分析
最近Dojo和jQuery雙雙發(fā)布了最新的1.8版本，有著相同版本號(hào)的兩個(gè)Javascript庫(kù)也有許多核心的相同之處：相同的資源加載機(jī)制AMD、相同的選擇器 引擎Sizzle等。作為業(yè)界知名的Javascript庫(kù)，Dojo和jQuery在各自領(lǐng)域有著為數(shù)眾多的擁護(hù)者。不過(guò)正所謂一把鑰匙開(kāi)一把鎖，對(duì)一個(gè)項(xiàng)目來(lái)說(shuō)肯定有個(gè)最適合它的工具庫(kù)，用對(duì)了工具才能事半功倍。所以對(duì)項(xiàng)目經(jīng)理或是技術(shù)總監(jiān)來(lái)說(shuō)，工程開(kāi)始前的技術(shù)選型是關(guān)鍵一步，本文將對(duì)Dojo和 jQuery最新版本進(jìn)行一個(gè)綜合比較，重點(diǎn)在于區(qū)分兩者的適用場(chǎng)景，而不涉及討論孰優(yōu)孰劣。
Licence
Dojo和jQuery都屬于活躍的開(kāi)源項(xiàng)目，并且都使用自由度很高的開(kāi)源協(xié)議，可以免費(fèi)使用，沒(méi)有費(fèi)用和許可問(wèn)題。Dojo 許可協(xié)議為BSD&AFL，jQuery許可協(xié)議為MIT&GPL。
框架組成
Dojo屬于重量級(jí)開(kāi)發(fā)框架，由框架核心（dojo）、基本控件庫(kù)（dijit）、擴(kuò)展包（dojox）組成的，三部分都是由dojo官方提供。
jQuery屬于輕量級(jí)框架，本身僅包含框架核心，另外有一個(gè)與jQuery名下的獨(dú)立開(kāi)源項(xiàng)目jQuery UI，它提供了最常用的8個(gè)控件。
另外jQuery的第三方開(kāi)發(fā)者基于jQuery的框架核心開(kāi)發(fā)了許多擴(kuò)展控件和功能。不過(guò)這些第三方插件質(zhì)量參差不齊，許可方式不同，需要慎重選擇和使用。當(dāng)選擇了多家提供的插件時(shí)，還需要注意這些插件共存的兼容性問(wèn)題。
總體來(lái)說(shuō)，jQuery以及jQueryUI源于官方開(kāi)發(fā)，比第三方插件更值得信賴，jQueryUI秉承了jQuery小塊靈的特點(diǎn)，適合Web快速開(kāi)發(fā)。不過(guò)鑒于jQueryUI提供控件數(shù)量上的限制，進(jìn)行對(duì)UI交互依賴較重的應(yīng)用時(shí)略顯力不從心。
核心包大小
下圖是Dojo與jQuery框架核心的大小比較，壓縮后的dojo核心是135K，jQuery是93K。
編程風(fēng)格
Dojo使用面向?qū)ο缶幊谭绞剑瑸榇笮蛻?yīng)用開(kāi)發(fā)提供了保證；jQuery使用函數(shù)式編程方式，開(kāi)發(fā)小型應(yīng)用時(shí)更加靈活快捷。
Javascript 自身使用原型鏈模擬繼承，但僅僅依靠原型鏈模擬的類繼承不能提供全面的面向?qū)ο竽芰?。Dojo在Javascript的基礎(chǔ)進(jìn)行了面向?qū)ο竽芰Φ募訌?qiáng)和規(guī) 范化，提供了原生Javascript不具備的面向?qū)ο缶幊棠芰Γ热绺割惙椒ㄖ剌d（注意，不是重寫）、多繼承、構(gòu)造函數(shù)調(diào)用鏈等等，并提供一系列面向?qū)ο缶幊桃?guī)范的函數(shù)和屬性declare、inherit、declaredClass、extend等作為dojo自身的編程基礎(chǔ)。在dojo中，所有的 UI控件都被定義為類，許多Dojo的核心功能庫(kù)也被定義為類，這都是出于更好的代碼重用性的考慮。
Javascript從本質(zhì)上來(lái)說(shuō)屬于函數(shù)式編程語(yǔ)言，jQuery沒(méi)有改變Javascript的編程方式，使其學(xué)習(xí)成本大大降低。
常用功能支持情況下圖中數(shù)據(jù)來(lái)源自wiki，包含了一些流行的Javascript框架對(duì)于Web項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)出現(xiàn)的功能需求的支持情況。本文僅涉及dojo與jQuery，其他框架的支持情況請(qǐng)看原文鏈接（http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)
由上圖可見(jiàn)，dojo作為重量級(jí)的Javascript框架，提供了對(duì)絕大多數(shù)Web開(kāi)發(fā)功能需求的支持。而jQuery除了對(duì)Web繪圖功能支持不夠以外，其余功能基本都可以通過(guò)引入第三方插件來(lái)提供支持。不過(guò)還是會(huì)涉及到前文提到的代碼協(xié)議問(wèn)題和插件間的兼容性問(wèn)題。
代碼風(fēng)格
從代碼風(fēng)格上來(lái)看，除去jQuery標(biāo)志性的“$”符號(hào)外，其實(shí)dojo與jQuery在一些常用API上的命名和參數(shù)列表基本相似。
#p#
核心代碼性能
Web應(yīng)用中的性能非常關(guān)鍵，dojo與jQuery在核心功能上的性能指標(biāo)在Javascript框架中都屬優(yōu)秀，那么他們之間的比較結(jié)果如何呢？本文將比較兩者在DOM操作、選擇器以及事件綁定這三個(gè)最常用功能上的性能指標(biāo)。場(chǎng)景如下：
1． 添加500個(gè)DOM節(jié)點(diǎn)；2． 改變添加節(jié)點(diǎn)的style屬性；3． 在500個(gè)節(jié)點(diǎn)中選擇一部分節(jié)點(diǎn)改變其innerHTML；4． 為每個(gè)節(jié)點(diǎn)綁定鼠標(biāo)事件；
這四步對(duì)應(yīng)的dojo代碼如下：
- function dojoStep1() {
- var html = "";
- for (var i = 0; i < 500; i++) {
- html += "<div><span class=test data=0>" + i + "</span></div>";
- }
- dojo.byId("container").innerHTML = html;
- }
- function dojoStep2 () {
- dojo.query(".test", "container").style("color","red" );
- }
- function dojoStep3() {
- dojo.query("#container div:nth-child(odd)").addContent("<span>odd row:</span>");
- dojo.query("#container div:nth-child(even)").addContent("<span>even row:</span>");
- }
- function dojoStep4() {
- dojo.query("#container span").on("mouseenter,mouseleave", function(e){
- if(e.type == "mouseenter"){
- dojo.style(e.target, "color", "blue");
- }
- });
- }
四個(gè)步驟對(duì)應(yīng)的jQuery代碼如下：
- function jQueryStep1() {
- var html = "";
- for (var i = 0; i < 500; i++) {
- html += "<div><span class=test data=0>" + i + "</span></div>";
- }
- $("#jContainer")[0].innerHTML = html;
- }
- function jQueryStep2() {
- $("#jContainer .test").css({ color: "blue" });
- }
- function jQueryStep3() {
- $("#jContainer div:even").append("<span>even row:</span>");
- $("#jContainer div:odd").append("<span>odd row:</span>");
- }
- function jQueryStep4() {
- $("#jContainer span").hover(function () {
- $(this).css("color", "red");
- }, function () {
- $(this).css("color", "black");
- });
- }
Firefox/Chrome/IE8的測(cè)試結(jié)果如下所示：
根據(jù)Dojo1.7.2與jQuery1.7.2幾個(gè)核心函數(shù)的比較結(jié)果可見(jiàn)，dojo與jQuery的選擇器性能相差無(wú)幾，dojo略勝一籌。由于 dojo和jQuery中的選擇器就是dojo基金會(huì)下的項(xiàng)目Sizzle.js,所以這個(gè)結(jié)果也比較合理；從DOM操作來(lái)看，dojo的性能也優(yōu)于jQuery；在事件綁定方面，dojo的性能明顯高于jQuery。
總結(jié)
Dojo在眾多前臺(tái)框架中，屬于重量級(jí)開(kāi)發(fā)框架，在面向?qū)ο笾С?，代碼架構(gòu)，多極模塊加載機(jī)制，控件完整性等方面有著較為突出的特點(diǎn)，適用于企業(yè)級(jí)或是復(fù)雜的大型Web應(yīng)用開(kāi)發(fā)；jQuery屬于輕量級(jí)開(kāi)發(fā)框架，架構(gòu)和機(jī)制相對(duì)簡(jiǎn)單，易于開(kāi)發(fā)，應(yīng)用廣泛，適用于相對(duì)簡(jiǎn)單的Web 2.0開(kāi)發(fā)。 Dojo和jQuery分別為復(fù)雜應(yīng)用開(kāi)發(fā)和簡(jiǎn)單應(yīng)用開(kāi)發(fā)設(shè)計(jì)，由此也帶來(lái)二者一些技術(shù)特點(diǎn)的不同。從工具本身角度看，二者特點(diǎn)鮮明，在實(shí)際項(xiàng)目中，需要根據(jù)具體需求來(lái)衡量，進(jìn)行工具的選擇。
原文鏈接：http://www.mhtml5.com/2012/06/5174.html
【編輯推薦】
