Dojo與jQuery綜合比較分析

來源：dojo中文部落格

最近Dojo和jQuery雙雙釋出了最新的1.8版本，有著相同版本號的兩個Javascript庫也有許多核心的相同之處：相同的資源載入機制AMD、相同的選擇器引擎Sizzle等。作為業界知名的Javascript庫，Dojo和jQuery在各自領域有著為數眾多的擁護者。不過正所謂一把鑰匙開一把鎖，對一個專案來說肯定有個最適合它的工具庫，用對了工具才能事半功倍。所以對專案經理或是技術總監來說，工程開始前的技術選型是關鍵一步，本文將對Dojo和 jQuery最新版本進行一個綜合比較，重點在於區分兩者的適用場景，而不涉及討論孰優孰劣。

Licence

Dojo和jQuery都屬於活躍的開源專案，並且都使用自由度很高的開源協議，可以免費使用，沒有費用和許可問題。Dojo 許可協議為BSD&AFL，jQuery許可協議為MIT&GPL。

框架組成

Dojo屬於重量級開發框架，由框架核心（dojo）、基本控制元件庫（dijit）、擴充套件包（dojox）組成的，三部分都是由dojo官方提供。

jQuery屬於輕量級框架，本身僅包含框架核心，另外有一個與jQuery名下的獨立開源專案jQuery UI，它提供了最常用的8個控制元件。

另外jQuery的第三方開發者基於jQuery的框架核心開發了許多擴充套件控制元件和功能。不過這些第三方外掛質量參差不齊，許可方式不同，需要慎重選擇和使用。當選擇了多家提供的外掛時，還需要注意這些外掛共存的相容性問題。

總體來說，jQuery以及jQueryUI源於官方開發，比第三方外掛更值得信賴，jQueryUI秉承了jQuery小塊靈的特點，適合Web快速開發。不過鑑於jQueryUI提供控制元件數量上的限制，進行對UI互動依賴較重的應用時略顯力不從心。

核心包大小

下圖是Dojo與jQuery框架核心的大小比較，壓縮後的dojo核心是135K，jQuery是93K。

程式設計風格

Dojo使用物件導向程式設計方式，為大型應用開發提供了保證；jQuery使用函數語言程式設計方式，開發小型應用時更加靈活快捷。

Javascript 自身使用原型鏈模擬繼承，但僅僅依靠原型鏈模擬的類繼承不能提供全面的物件導向能力。Dojo在Javascript的基礎進行了物件導向能力的加強和規範化，提供了原生Javascript不具備的物件導向程式設計能力，比如父類方法過載（注意，不是重寫）、多繼承、建構函式呼叫鏈等等，並提供一系列物件導向程式設計規範的函式和屬性declare、inherit、declaredClass、extend等作為dojo自身的程式設計基礎。在dojo中，所有的 UI控制元件都被定義為類，許多Dojo的核心功能庫也被定義為類，這都是出於更好的程式碼重用性的考慮。

Javascript從本質上來說屬於函數語言程式設計語言，jQuery沒有改變Javascript的程式設計方式，使其學習成本大大降低。

常用功能支援情況

下圖中資料來源自wiki，包含了一些流行的Javascript框架對於Web專案開發中經常會出現的功能需求的支援情況。本文僅涉及dojo與jQuery，其他框架的支援情況請看原文連結（http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

	Dojo	jQuery
版本	1.7.2	1.7.2
程式碼組成	JavaScript + HTML	JavaScript
瀏覽器功能檢測	Yes	Yes
DOM API包裝	Yes	Yes
XMLHttpRequest	Yes	Yes
JSONP技術	Yes	Yes
接收伺服器推送資料	Yes	Yes
其他資料格式支援	Yes: XML, HTML, CSV, ATOM	Yes: XML, HTML
拖拽功能	Yes	Yes
頁面視覺特效	Yes	Yes
事件繫結	Yes	Yes
動作撤銷/行為歷史管理	Yes	With plugins
輸入驗證	Yes	With plugins
表格（Grid）控制元件	Yes	With plugins
樹控制元件	Yes	With plugins
編輯器控制元件	Yes	With plugins
自動補全輸入	Yes	With plugins
HTML生成器	Yes	Yes
自定義控制元件主題	Yes	Yes
Modal Dialog & Resizable Panel	Yes	With plugins
佈局控制元件	Yes	With plugin
Canvas	Yes
手持裝置支援	Yes	With plugin
Accessibility	Yes	Yes
ARIA支援	Yes	Yes
視覺化程式設計工具	Yes	Yes
離線儲存	No	No
跨瀏覽器的向量繪圖	Yes
圖表控制元件	Yes	With plugin
Internet Explorer	6+	6+
Mozilla Firefox	3+	2+
Safari	4	3+
Opera	10.50 only	9+
Chrome	3	1+

由上圖可見，dojo作為重量級的Javascript框架，提供了對絕大多數Web開發功能需求的支援。而jQuery除了對Web繪圖功能支援不夠以外，其餘功能基本都可以通過引入第三方外掛來提供支援。不過還是會涉及到前文提到的程式碼協議問題和外掛間的相容性問題。

程式碼風格

從程式碼風格上來看，除去jQuery標誌性的“$”符號外，其實dojo與jQuery在一些常用API上的命名和引數列表基本相似。

核心程式碼效能

Web應用中的效能非常關鍵，dojo與jQuery在核心功能上的效能指標在Javascript框架中都屬優秀，那麼他們之間的比較結果如何呢？本文將比較兩者在DOM操作、選擇器以及事件繫結這三個最常用功能上的效能指標。場景如下：

1．新增500個DOM節點；

2．改變新增節點的style屬性；

3．在500個節點中選擇一部分節點改變其innerHTML；

4．為每個節點繫結滑鼠事件；

這四步對應的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");        
    }  
    });  
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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");

}

});

}

四個步驟對應的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");    
    });    
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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的測試結果如下所示：

根據Dojo1.7.2與jQuery1.7.2幾個核心函式的比較結果可見，dojo與jQuery的選擇器效能相差無幾，dojo略勝一籌。由於 dojo和jQuery中的選擇器就是dojo基金會下的專案Sizzle.js,所以這個結果也比較合理；從DOM操作來看，dojo的效能也優於jQuery；在事件繫結方面，dojo的效能明顯高於jQuery。

總結

Dojo在眾多前臺框架中，屬於重量級開發框架，在物件導向支援，程式碼架構，多極模組載入機制，控制元件完整性等方面有著較為突出的特點，適用於企業級或是複雜的大型Web應用開發；jQuery屬於輕量級開發框架，架構和機制相對簡單，易於開發，應用廣泛，適用於相對簡單的Web 2.0開發。 Dojo和jQuery分別為複雜應用開發和簡單應用開發設計，由此也帶來二者一些技術特點的不同。從工具本身角度看，二者特點鮮明，在實際專案中，需要根據具體需求來衡量，進行工具的選擇。

Dojo與jQuery綜合比較分析

相關文章