Dojo 與 jQuery 綜合比較分析

最近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代碼如下：

 

[javascript] view plaincopyprint?

1. function dojoStep1() {   
2.     var html = "";   
3.     for (var i = 0; i < 500; i++) {   
4.         html += "<div><span class=test data=0>" + i + "</span></div>";   
5.     }   
6.     dojo.byId("container").innerHTML = html;   
7. }   
8.    
9. function dojoStep2 () {   
10.     dojo.query(".test", "container").style("color","red" );   
11. }   
12.    
13. function dojoStep3() {   
14.     dojo.query("#container div:nth-child(odd)").addContent("<span>odd row:</span>");   
15.     dojo.query("#container div:nth-child(even)").addContent("<span>even row:</span>");   
16. }   
17.    
18. function dojoStep4() {   
19.     dojo.query("#container span").on("mouseenter,mouseleave", function(e){   
20.         if(e.type == "mouseenter"){   
21.             dojo.style(e.target, "color", "blue");       
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代碼如下：

 

[javascript] view plaincopyprint?

1. function jQueryStep1() {   
2.     var html = "";   
3.     for (var i = 0; i < 500; i++) {   
4.         html += "<div><span class=test data=0>" + i + "</span></div>";   
5.     }   
6.     $("#jContainer")[0].innerHTML = html;   
7. }   
8.    
9. function jQueryStep2() {   
10.     $("#jContainer .test").css({ color: "blue" });   
11. }   
12.    
13. function jQueryStep3() {   
14.     $("#jContainer div:even").append("<span>even row:</span>");   
15.     $("#jContainer div:odd").append("<span>odd row:</span>");   
16. }   
17.    
18. function jQueryStep4() {   
19.     $("#jContainer span").hover(function () {   
20.         $(this).css("color", "red");   
21.     }, function () {   
22.         $(this).css("color", "black");   
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分別為復雜應用開發和簡單應用開發設計，由此也帶來二者一些技術特點的不同。從工具本身角度看，二者特點鮮明，在實際項目中，需要根據具體需求來衡量，進行工具的選擇。