Dojo與jQuery綜合比較分析

發表於2012-07-09

來源: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綜合比較分析

程式設計風格

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上的命名和引數列表基本相似。

Dojo與jQuery綜合比較分析

核心程式碼效能

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

1.  新增500個DOM節點;

2.  改變新增節點的style屬性;

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

4.  為每個節點繫結滑鼠事件;

這四步對應的dojo程式碼如下:

四個步驟對應的jQuery程式碼如下:

Firefox/Chrome/IE8的測試結果如下所示:

 

Dojo與jQuery綜合比較分析

Dojo與jQuery綜合比較分析

Dojo與jQuery綜合比較分析

 

根據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分別為複雜應用開發和簡單應用開發設計,由此也帶來二者一些技術特點的不同。從工具本身角度看,二者特點鮮明,在實際專案中,需要根據具體需求來衡量,進行工具的選擇。

 

相關文章