前端開發框架對比（工具能夠從框架中找）（好的框架，事半功倍）

前端開發框架對比（工具能夠從框架中找）（好的框架，事半功倍）

1、總結

一句話總結：（工具能夠從框架中找），好的框架，事半功倍

一、炫酷內網開發框架？

強大的功能，豐富的控件庫，華麗的效果也使得 Ext JS 成爲內網開發利器。

二、Bootstrap地位？

桌面端老大

三、無縫調用 Google 地圖等 Google 應用框架？

Sencha GXT

四、國內外前端框架水平對比？

應該說 Kissy 是目前國內開發的最好的前端框架，在實際使用中也通過了檢驗，但跟國外成熟框架相比仍是有必定差距。

五、遊戲開發？

Sencha Ext JS，在 Sencha 看來，用 Animator 作遊戲都是輕鬆拿下。

 

由此咱們能夠看到，對於桌面端，目前 Bootstrap 和 jQuery UI 已經能夠知足大多數的開發需求，也在業界獲得了普遍的應用，有着豐富的組件和擴展，以及相對簡潔的語法和操做。應對咱們的基本需求已經足夠了。若是您對前端界面的效果有比較高的要求，但願能夠應用像結構樹這樣比較複雜的控件，建議您考慮 Dojo，抱了這多年的大腿也不是白抱的，效果仍是很不錯的。對於，局域網的應用，還能夠考慮 Sencha Ext JS 框架，效果更加震撼，可是對網絡的要求也更高。若是這些仍是不能知足您心裏的狂野，那隻能建議您使用 Flex 或者 SilverLight 了。相反，若是您對網絡速度很是敏感，但願找一個迷您而且功能不錯的框架，那 Mootools 會是您不錯的選擇。若是您很懷舊，也可使用 YUI，雖然曲線不夠性感，可是內容很豐富。若是您是一個 Ruby on Rails 的開發人員，建議您能夠先看一下 Prototype 框架，畢竟是默認的框架。若是您對上面說到的框架都不滿意，那建議您體驗一下國內的框架一段時間，而後再回過頭來看剛纔說到的框架，相信您必定會有一種豁然開朗的感受。

對於移動端的應用，jQuery Mobile, Foundation 依然是輕量級選擇，Dojo Mobile 和 Sencha Touch 會爲您提供更增強大的功能。同時，您還能夠與 PhoneGap 和 Cordova 框架結合使用，利用 Web 的技術開發移動應用。不過這種混合式開發模式興起時間並不長，還在不斷髮展中。

 

框架名稱	主要 平臺	基礎技術	佈局	CSS 版式	控件	特效	風格設置
	桌面端	jQuery, LESS	豐富	豐富	豐富	豐富	手動配置
	桌面端	jQuery	-	-	豐富	豐富	預置/可視化配置
	移動端	jQuery	豐富	-	豐富	豐富	預置/可視化配置
	桌面端	Ext JS, Sass	豐富	-	極豐富	極豐富	預置
	移動端	HTML5	豐富	-	豐富	豐富	-
	桌面端	Java, HTML5	豐富	-	豐富	豐富	-
	桌面端	Dojo Nano	豐富	豐富	極豐富	極豐富	CSS 代碼
Mobile	移動端	Dojo Nano	豐富	-	豐富	豐富	內置與移動端匹配
	桌面端	Mootools Core	-	-	少許	少許	-
	桌面端	Prototype	-	-	少許	豐富	-
	桌面端	YUI	豐富	-	豐富	豐富
	移動端	jQuery/Zepto, Sass	豐富	豐富	豐富	豐富
	桌面端	Kissy Core	-	-	豐富	少	-
	移動端	Kissy	-	-	少	少	-
	桌面端	QWrap	-	-	-	少
	桌面端	Tangram	-	-	少	少

 

 

2、前端開發框架對比

本文選取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 個國內外前端開發框架進行初步的橫向比較，能夠做爲你們挑選前端開發框架的初步參考。

近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 爲表明的前端開發框架如雨後春筍般擠入視野，可謂目不暇接。不管是桌面瀏覽器端仍是移動端都涌現出不少優秀的框架，極大豐富了開發素材，也方便了你們的開發。這些框架各有特色，本文對這些框架進行初步的介紹與比較，但願可以爲你們選擇框架提供一點幫助，也爲後續詳細研究這些框架的拋磚引玉。

JavaScript & CSS

目前前端框架主要採用 JavaScript+CSS 模式，咱們先來了解一下這二者。

預準備之 JavaScript

目前主流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，得到了用戶的普遍好評。國內的一些框架不少也是仿照 jQuery 對 JavaScript 進行了包裝，不過這些框架的鼻祖 YUI 仍是堅持用本身的 JavaScript 類庫。

jQuery 是目前用的最多的前端 JavaScript 類庫，據初步統計，目前 jQuery 的佔有率已經超過 46%，它算是比較輕量級的類庫，對 DOM 的操做也比較方便到位，支持的效果和控件也不少。同時，基於 jQuery 有不少擴展項目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)、Sizzle(CSS 的選擇引擎)。這些補充使得 jQuery 框架更加完整，更使人興奮的是，這些擴展與目前的框架基本都是兼容的，能夠交叉使用，使得前端開發更加豐富。

Ext 是 Sencha 公司推崇的 JavaScript 類庫，相比 jQuery，Ext JS 更重量級，動輒數兆的文件，使得 Ext 在外網使用的時候會顧慮不少。可是，另外一方面，在 Ext JS 龐大的文件背後是 Ext JS 強大的功能。Ext JS 的控件和功能能夠說強大和華麗到了讓人髮指的程度。圖表、菜單、特效，Ext JS 的控件庫很是豐富，同時它的交互也很是強大，獨立靠 Ext JS 幾乎就能夠取代控制層完成於客戶的交互。強大的功能，豐富的控件庫，華麗的效果也使得 Ext JS 成爲內網開發利器。

框架鼻祖 YUI 也有本身的 JavaScript 類庫，DOM 操做和效果處理也還比較方便，功能和控件也很齊全，可是相比 jQuery 和 Ext JS 顯得比較中庸一些。隨着 Yahoo!的沒落，YUI 的呼聲也逐漸被新起的框架淹沒，想來也讓人可惜。

除了上述的三個 JavaScript 類庫，還有 Dojo、Prototype、Mootools 等衆多類庫，因爲本文討論的框架多采用上述框架，因此其餘框架暫不討論。

預準備之 CSS

隨着 CSS3 的推出，瀏覽器對樣式的支持更加上了一個層次，效果更加出衆。各框架也紛紛開發出基於 CSS3 的樣式，讓框架更加豐富。

對於 CSS3，更是推出了一些預編譯的擴展框架，主要是 LESS、Sass 和 Compass(Compass 是基於 Sass 的擴展)。能夠方便地進行變量定義，格式引用，函數定義等操做，並內置了大量的效果。讓您的 CSS 開發效率提高一個檔次。根據 Chris Coyier 的比較，Sass+Compass 幾乎完勝 LESS。有興趣的讀者能夠自行參考http://css-tricks.com/sass-vs-less/。因爲 Sass 是用 Ruby 開發的，因此也須要相應的 Ruby 環境將文件編譯成 CSS 文件。

 

 

國內外前端開發框架對比

首先咱們先對目前國內外主流前端開發框架作一個基本的瞭解，以後再對他們進行一個直觀的對比。

Bootstrap

Bootstrap（http://www.bootcss.com）是目前桌面端最爲流行的開發框架，一經 Twitter 推出，勢不可擋。Bootstrap 主要針對桌面端市場，Bootstrap3 提出移動優先，不過目前桌面端依然仍是 Bootstrap 的主要目標市場。Bootstrap 主要基於 jQuery 進行 JavaScript 處理，支持 LESS 來作 CSS 的擴展。若是想要在 Bootstrap 框架中使用 Sass，則須要經過 Bootstrap-Sass（https://github.com/thomas-mcdonald/bootstrap-sass）項目增長兼容。Bootstrap 框架在佈局、版式、控件、特效方面都很是讓人滿意，都預置了豐富的效果，極大方便了用戶開發。在風格設置方面，還須要用戶在下載時手動設置，可配置粒度很是細，相應也比較繁瑣，不太直觀，須要對 Bootstrap 很是熟悉配置起來才能駕輕就熟。

在瀏覽器兼容性方面，目前 Firefox, Chrome, Opera, Safari, IE8+等主流瀏覽器 Bootstrap 都提供支持。可是在 IE 支持方面略顯短板，對 IE6 和 IE7 支持都不是特別理想。在 Bootstrap3 中甚至放棄了對 IE六、IE7 的支持。不過在國內，根據 CNZZ 的統計，目前 IE 的佔有率仍然達到 46.98%，同時大量國內瀏覽器也是採用 IE 內核。這讓咱們在使用 Bootstrap 的時候老是有所顧忌。在 Bootstrap2 上面，能夠經過 BSIE 項目增長對 IE6 的支持，可是也不能支持所有效果。

在框架擴展方面，隨着 Bootstrap 的普遍使用，擴展插件和組件也很是豐富，涉及顯示組件、兼容性、圖表庫等各個方面。

圖 1. Bootstrap 的佈局與效果示例

 

jQuery UI

jQuery UI（http://jqueryui.com/）是 jQuery 項目組中對桌面端的擴展，包括了豐富的控件和特效，與 jQuery 無縫兼容。同時，jQuery UI 中預置了多種風格供用戶選擇，避免了千篇一概。若是您對預置的風格不滿意，還能夠經過 jQuery UI 的可視化界面，自助對 jQuery UI 的顯示效果進行配置，很是方便，夠高端大氣上檔次。

圖 2. jQuery UI 的效果示例

 

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是 jQuery 項目對移動端的擴展，目前支持 iOS, Android, Windows Phone, Black Berry 等主流平臺。具體支持狀況能夠參見http://jquerymobile.com/gbs/。另外 jQuery Mobile 在佈局，控件和特效方面都很慷慨。在風格方面，與 jQuery UI 相似，除了預置的風格效果以外，還支持用戶可視化配置的效果。

可圈可點的是，jQuery Mobile 還與 Codiqa 無縫鏈接，用戶能夠直接經過拖拽實現對界面的設計，以及代碼的生成。

圖 3. jQuery Mobile 的效果示例

 

 

Sencha Ext JS

Sencha Ext JS（http://www.sencha.com/products/extjs）是 Sencha 基於 Ext JS 開發的前端框架，內容極其豐富，控件、特效等支持很是很是豐富，表格、圖畫、報告、佈局、甚至數據鏈接，無所不包。只有您想不到，沒有它辦不到。基於 Sass 和 Compass，使得用戶對格式的修改和特效製做更加方便。此外，Sencha 有豐富的產品線，Sencha Desktop Packager 可讓您的應用擁有桌面應用的效果, Sencha Animator 基於 CSS3 更加方便用戶對特效的製做，不光支持桌面端，移動端更是不在話下。在 Sencha 看來，用 Animator 作遊戲都是輕鬆拿下。Sencha Space 是基於 HTML5，提供製做跨平臺應用的利器。同時 Sencha Ext JS 對主流瀏覽器的支持也很是理想。

Sencha Ext JS 有着耀眼的光輝，可是光芒背後總歸有點陰影。除了以前提到的 Ext JS 太太重量級以外，商業化是 Sencha 的另外一把利劍。幫助 Sencha 披荊斬棘之時，也把大把的碼農砍在馬下。Sencha 規定，凡是商業化的應用，都須要付費。另外，Sencha 的輔助產品也所有收費，不然只能是試用版。這裏的輔助產品，其實包括了上面提到的全部產品。

圖 4. Sencha Ext JS 的效果示例

 

 

Sencha Touch

Sencha Touch（http://www.sencha.com/products/touch）是 Sencha 面向移動端的開發框架，基於 HTML5 技術，保證了對大多數移動平臺的支持。Sencha Touch 包括豐富的佈局，控件和特效。而且 Sencha Touch 對響應式支持的很好，在不一樣設備上，甚至在橫屏和豎屏時都會顯示不一樣的效果。這種效果是 Sencha Touch 控件自適應的。Sencha Touch 也實現了對大多數移動設備的支持。Sencha Architect 是對移動端的可視化編輯工具，有着不朽的效果，但也有着不菲的身價。

同時 Sencha Touch 也支持混合式 App 建立，也便是基於 Web 技術，配合 PhoneGap (http://phonegap.com/)或者 Cordova(http://cordova.apache.org/)之類的工具，就能夠構建移動應用。Sencha Touch、jQuery Mobile、Foundation 這些前端框架負責界面和效果的編寫，PhoneGap、Cordova 框架則容許經過 JavaScript 和其餘接口對手機設備的調用，開創了新的移動端開發模式，真正實現了移動端的跨平臺開發。

Sencha GXT

Sencha GXT（http://www.sencha.com/products/gxt/）是 Sencha 對 Google 的 Web Toolkit 框架的擴展。能夠支持經過 Java 文件的解析，生成 HTML5 頁面文件，能夠與 Java 環境無縫集成。有着豐富的控件和特效，而且能夠無縫調用 Google 地圖等 Google 應用。雖然開發時不是特別直觀，可是效果仍是很是豐富的。與 Sencha Ext JS 絲絕不顯弱勢。

圖 5. Sencha GXT 的效果示例

 

 

Dojo

目前惟一能與 Sencha Ext JS 一較高下的框架就只有 Dojo(http://dojotoolkit.org)了。抱着 IBM, VMWare 等衆多大腿，Dojo 的一顰一笑都額外惹人注目。Dojo 項目的產品線和功能也特別豐富。首先，Dojo 有本身的 DOM 解析器 Nano，是 DOM 解析和處理的內核。此外，Dojo 的 Web 框架有很是豐富的佈局、版式、控件以及特效，對多語言以及圖表的擴展支持都很是好，並支持對地圖的操做。你們能夠查看它的演示(http://demos.dojotoolkit.org/demos/)，與 Ext JS 的效果進行比較。此外，Dojo 還有本身的圖形化設計和開發工具 Maqetta，能夠經過拖拽實現設計。Dojo 的風格設置不是在下載的時候指定的，而是經過引用不一樣的 CSS 格式來實現。

Dojo 雖然比 jQuery 重量級很多，可是比 Ext JS 仍是輕量級一些，至少在文件大小上。另外，Dojo 還有本身的 CDN 機制，只要經過配置，就能夠對 Dojo 文件進行 CDN。因爲有 IBM,Oracle 等大佬的支持，Dojo 在與 Spring 等現有框架支持方面也表現得很理想。

圖 6. Dojo 的效果示例

 

 

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo 推出的移動端框架，表現也很不俗。在佈局，控件，特效方面都下了很多功夫。並支持與所用平臺匹配的風格設置，若是您不喜歡還能夠引用不一樣 CSS 文件來實現不一樣效果。

除了能夠在移動端的瀏覽器上使用，Dojo Mobile 也支持與 PhoneGap 無縫鏈接，能夠經過 Dojo Mobile 開發移動 App 應用。同時也具備不錯的響應性（在寬屏和窄屏上的顯示效果不一樣）。

圖 7. Dojo Mobile 在 IPhone 上的效果示例

 

Mootools

Mootools(http://mootools.net)能夠說是目前最輕量級的前端框架，內核 js 壓縮完以後只有 8k，完整版壓縮以後也不到 100k，遠比其餘框架要小不少。Mootools 有本身的面向對象設計的內核 Mootools Core。伴隨着最小的文件大小，框架的功能比其餘框架也要弱很多，只有在控件和特效上有少許支持。

圖 8. Mootools 效果示例

 

 

Prototype JS

Prototype JS（http://prototypejs.org）也是一個簡潔的框架，有着豐富的對 DOM 操做的功能，對 Ajax 和 JSON 支持得都很是好，在使用上與 jQuery 相比也相差很少。做爲 Rails 默認的 JavaScript 框架，相信對廣大開發人員也頗有借鑑意義的。

在擴展方面，Scriptaculous（http://script.aculo.us/）對 Prototype JS 進行了豐富的擴展，主要是在動畫特效、Ajax 控制、DOM 操做、單元測試方面等。

YUI

YUI（http://yuilibrary.com）做爲開源前端框架的鼻祖，在框架上的功力很是之深。有着本身的解析 DOM 的核心框架，而且在特效、動畫、圖表等方面都有豐富的擴展，並能夠經過 YQL 直接訪問 Yahoo！的數據。在用戶常用的功能方面都有着不錯的表現。

與 jQuery 靈活的語法相比，YUI 顯得更加中規中矩，在代碼組織、結構和模式方面都更加講究，更體現出工程師的嚴謹。同時 YUI 也有着豐富的產品線，擁有測試框架 YUITest、文檔生成框架 YUIDoc、自動構建框架 YUI Build，知足項目開發各方面的需求。隨着 Yahoo!的沒落，YUI 也感受逐漸步入暮年，但做爲至關嚴謹完整的前端框架鼻祖，足以秒殺其餘。

圖 9. YUI 的效果示例

 

Foundation

Foundation（http://foundation.zurb.com/）是 ZURB 旗下的主要面向移動端的開發框架，可是也保持對桌面端的兼容，目前已經更新到 Foundation4 版本。框架主要採用 jQuery 和 Zepto（語法酷似 jQuery，但比 jQuery 更輕量級）做爲 JavaScript 基礎，CSS 則基於 Sass、Compass，有着很好的擴展性，並有着豐富的佈局，版式和多種多樣的控件與特效，很是方便開發者使用。控件的響應式效果也幫助用戶識別不一樣瀏覽器效果。

ZURB 做爲一個完整的項目組，包括不少原型、設計、構建、分析等一系列工具，爲用戶提供完整的服務。固然，有不少服務是要收費的。

Foundation 主要以移動端風格爲主，如圖 10 所示。

圖 10. Foundation 的風格示例

 

 

 

Kissy

Kissy（http://docs.kissyui.com）是阿里集團自主開發的前端框架，目前在淘寶網、一淘網等阿里系網站上獲得很多應用。Kissy 框架模仿 jQuery 編寫了本身的內核 Kissy Core，用於對 DOM 的解析，Ajax 處理等。同時，有着豐富的控件，並實現了一些動畫效果和特效。一樣，在 Kissy 的控件中也能夠看到 Bootstrap 等國外框架的影子。此外，Kissy abc 項目工具能夠幫助用戶實現自動化構建，並有不少擴展組件方便用戶使用。

應該說 Kissy 是目前國內開發的最好的前端框架，在實際使用中也通過了檢驗，但跟國外成熟框架相比仍是有必定差距。

圖 11. Kissy 的效果示例

 

Kissy Mobile

Kissy Mobile（http://mobile.kissyui.com）是 Kissy 推出的移動版框架，意在開發出能夠在移動瀏覽器和移動應用上均可以使用的框架，不過目前項目內容還比較少，控件和特效也比較少，也不具備響應式的效果。

圖 12. Kissy Mobile 效果示例

 

Qwrap

Qwrap（http://www.qwrap.com/）是百度有啊團隊推出的 JavaScript 框架，如今被收入 360，被普遍應用與 360 產品中。Qwrap 綜合 jQuery、Prototype、YUI 特色，對 JavaScript 進行了封裝。可是，若是要把 Qwrap 算成一個前端開發框架仍是有些牽強，由於除了 JavaScript 類庫以外，Qwrap 基本乏善可陳，還處於發展階段。

Tangram

Tangram（http://tangram.baidu.com）是百度推出的另外一個 JavaScript 框架，被普遍應用於百度系旗下的產品，與 Qwrap 相似，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 作了很多擴展，可是做爲前端開發框架仍是顯得比較單薄。基於此，百度公司繼續推出了兩個基於 Tangram 的項目，Magic 和 Baidu Template。Magic 項目基於 Tangram 對控件和特效都作了擴展，增長了 10 個新的控件。Baidu Template 則更可能是針對移動端開發的擴展，目前對於大多數主流移動設備和操做系統都有支持。

瞭解完這些框架，咱們從平臺、基礎技術、佈局、CSS、控件、特效和風格設置等幾個方面來對它們進行一個基本比較：

表 1.國內外主流前端開發框架對比

框架名稱	主要 平臺	基礎技術	佈局	CSS 版式	控件	特效	風格設置
	桌面端	jQuery, LESS	豐富	豐富	豐富	豐富	手動配置
	桌面端	jQuery	-	-	豐富	豐富	預置/可視化配置
	移動端	jQuery	豐富	-	豐富	豐富	預置/可視化配置
	桌面端	Ext JS, Sass	豐富	-	極豐富	極豐富	預置
	移動端	HTML5	豐富	-	豐富	豐富	-
	桌面端	Java, HTML5	豐富	-	豐富	豐富	-
	桌面端	Dojo Nano	豐富	豐富	極豐富	極豐富	CSS 代碼
Mobile	移動端	Dojo Nano	豐富	-	豐富	豐富	內置與移動端匹配
	桌面端	Mootools Core	-	-	少許	少許	-
	桌面端	Prototype	-	-	少許	豐富	-
	桌面端	YUI	豐富	-	豐富	豐富
	移動端	jQuery/Zepto, Sass	豐富	豐富	豐富	豐富
	桌面端	Kissy Core	-	-	豐富	少	-
	移動端	Kissy	-	-	少	少	-
	桌面端	QWrap	-	-	-	少
	桌面端	Tangram	-	-	少	少

由此咱們能夠看到，對於桌面端，目前 Bootstrap 和 jQuery UI 已經能夠知足大多數的開發需求，也在業界獲得了普遍的應用，有着豐富的組件和擴展，以及相對簡潔的語法和操做。應對咱們的基本需求已經足夠了。若是您對前端界面的效果有比較高的要求，但願能夠應用像結構樹這樣比較複雜的控件，建議您考慮 Dojo，抱了這多年的大腿也不是白抱的，效果仍是很不錯的。對於，局域網的應用，還能夠考慮 Sencha Ext JS 框架，效果更加震撼，可是對網絡的要求也更高。若是這些仍是不能知足您心裏的狂野，那隻能建議您使用 Flex 或者 SilverLight 了。相反，若是您對網絡速度很是敏感，但願找一個迷您而且功能不錯的框架，那 Mootools 會是您不錯的選擇。若是您很懷舊，也可使用 YUI，雖然曲線不夠性感，可是內容很豐富。若是您是一個 Ruby on Rails 的開發人員，建議您能夠先看一下 Prototype 框架，畢竟是默認的框架。若是您對上面說到的框架都不滿意，那建議您體驗一下國內的框架一段時間，而後再回過頭來看剛纔說到的框架，相信您必定會有一種豁然開朗的感受。

對於移動端的應用，jQuery Mobile, Foundation 依然是輕量級選擇，Dojo Mobile 和 Sencha Touch 會爲您提供更增強大的功能。同時，您還能夠與 PhoneGap 和 Cordova 框架結合使用，利用 Web 的技術開發移動應用。不過這種混合式開發模式興起時間並不長，還在不斷髮展中。

 

 

結束語

上面只是當前涌現出的前端開發框架中的一部分，相信還有更多優秀的框架還在研發中心，到此咱們對「百花齊放」這一詞有了更直觀的感受，也說明在沉寂了多年以後，前端開發的工做愈來愈得到你們的重視，也註定會愈來愈繁榮。文中的建議只表明筆者我的的初淺意見，你們最終的選擇還要結合實際的開發需求。