Dojo與jQuery綜合比較分析

最近一直都在參與項目，沒法抽空寫些或者看些東西，週末抽了點時間看了下關於Dojo和Jquery的東西，在CSDN上看到一篇兩個框架進行對比的文章，感受寫的不錯，就拿了過來，沒有別的意思，一來想保留下來爲之後進行參考，二來替博主推廣下。

原文連接：http://blog.csdn.net/dojotoolkit/article/details/7682978 

 

最近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"); 		
	}
    });
}

　　

四個步驟對應的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的測試結果以下所示：

 

 

根據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分別爲複雜應用開發和簡單應用開發設計，由此也帶來兩者一些技術特色的不一樣。從工具自己角度看，兩者特色鮮明，在實際項目中，須要根據具體需求來衡量，進行工具的選擇。