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作為重量級的Javascript框架，提供了對絕大多數Web開發功能需求的支持。而jQuery除了對Web繪圖功能支持不夠以外，其余功能基本都可以通過引入第三方插件來提供支持。不過還是會涉及到前文提到的代碼協議問題和插件間的兼容性問題。
代碼風格
從代碼風格上來看，除去jQuery標志性的“$”符號外，其實dojo與jQuery在一些常用API上的命名和參數列表基本相似。
#p#
核心代碼性能
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分別為復雜應用開發和簡單應用開發設計，由此也帶來二者一些技術特點的不同。從工具本身角度看，二者特點鮮明，在實際項目中，需要根據具體需求來衡量，進行工具的選擇。
原文鏈接：http://www.mhtml5.com/2012/06/5174.html
【編輯推薦】
