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