近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動端都涌現(xiàn)出很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對這些框架進(jìn)行初步的介紹與比較，希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助，也為后續(xù)詳細(xì)研究這些框架的拋磚引玉。

JavaScript & CSS

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

預(yù)準(zhǔn)備之 JavaScript

目前主流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，獲得了用戶的廣泛好評。國內(nèi)的一些框架很多也是仿照 jQuery 對 JavaScript 進(jìn)行了包裝，不過這些框架的鼻祖 YUI 還是堅持用自己的 JavaScript 類庫。

jQuery 是目前用的最多的前端 JavaScript 類庫，據(jù)初步統(tǒng)計，目前 jQuery 的占有率已經(jīng)超過 46%，它算是比較輕量級的類庫，對 DOM 的操作也比較方便到位，支持的效果和控件也很多。同時，基于 jQuery 有很多擴(kuò)展項(xiàng)目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)、Sizzle(CSS 的選擇引擎)。這些補(bǔ)充使得 jQuery 框架更加完整，更令人興奮的是，這些擴(kuò)展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發(fā)更加豐富。

Ext 是 Sencha 公司推崇的 JavaScript 類庫，相比 jQuery，Ext JS 更重量級，動輒數(shù)兆的文件，使得 Ext 在外網(wǎng)使用的時候會顧慮很多。但是，另一方面，在 Ext JS 龐大的文件背后是 Ext JS 強(qiáng)大的功能。Ext JS 的控件和功能可以說強(qiáng)大和華麗到了讓人發(fā)指的程度。圖表、菜單、特效，Ext JS 的控件庫非常豐富，同時它的交互也非常強(qiáng)大，獨(dú)立靠 Ext JS 幾乎就可以取代控制層完成于客戶的交互。強(qiáng)大的功能，豐富的控件庫，華麗的效果也使得 Ext JS 成為內(nèi)網(wǎng)開發(fā)利器。

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

除了上述的三個 JavaScript 類庫，還有 Dojo、Prototype、Mootools 等眾多類庫，由于本文討論的框架多采用上述框架，所以其他框架暫不討論。

預(yù)準(zhǔn)備之 CSS

隨著 CSS3 的推出，瀏覽器對樣式的支持更加上了一個層次，效果更加出眾。各框架也紛紛開發(fā)出基于 CSS3 的樣式，讓框架更加豐富。

對于 CSS3，更是推出了一些預(yù)編譯的擴(kuò)展框架，主要是 LESS、Sass 和 Compass(Compass 是基于 Sass 的擴(kuò)展)。可以方便地進(jìn)行變量定義，格式引用，函數(shù)定義等操作，并內(nèi)置了大量的效果。讓您的 CSS 開發(fā)效率提升一個檔次。根據(jù) Chris Coyier 的比較，Sass+Compass 幾乎完勝 LESS。有興趣的讀者可以自行參考。由于 Sass 是用 Ruby 開發(fā)的，所以也需要相應(yīng)的 Ruby 環(huán)境將文件編譯成 CSS 文件。

國內(nèi)外前端開發(fā)框架對比

首先我們先對目前國內(nèi)外主流前端開發(fā)框架做一個基本的了解，之后再對他們進(jìn)行一個直觀的對比。

Bootstrap

Bootstrap（）是目前桌面端最為流行的開發(fā)框架，一經(jīng) Twitter 推出，勢不可擋。Bootstrap 主要針對桌面端市場，Bootstrap3 提出移動優(yōu)先，不過目前桌面端依然還是 Bootstrap 的主要目標(biāo)市場。Bootstrap 主要基于 jQuery 進(jìn)行 JavaScript 處理，支持 LESS 來做 CSS 的擴(kuò)展。如果想要在 Bootstrap 框架中使用 Sass，則需要通過 Bootstrap-Sass（）項(xiàng)目增加兼容。Bootstrap 框架在布局、版式、控件、特效方面都非常讓人滿意，都預(yù)置了豐富的效果，極大方便了用戶開發(fā)。在風(fēng)格設(shè)置方面，還需要用戶在下載時手動設(shè)置，可配置粒度非常細(xì)，相應(yīng)也比較繁瑣，不太直觀，需要對 Bootstrap 非常熟悉配置起來才能得心應(yīng)手。

在瀏覽器兼容性方面，目前 Firefox, Chrome, Opera, Safari, IE8+等主流瀏覽器 Bootstrap 都提供支持。但是在 IE 支持方面略顯短板，對 IE6 和 IE7 支持都不是特別理想。在 Bootstrap3 中甚至放棄了對 IE6、IE7 的支持。不過在國內(nèi)，根據(jù) CNZZ 的統(tǒng)計，目前 IE 的占有率仍然達(dá)到 46.98%，同時大量國內(nèi)瀏覽器也是采用 IE 內(nèi)核。這讓我們在使用 Bootstrap 的時候總是有所顧忌。在 Bootstrap2 上面，可以通過 BSIE 項(xiàng)目增加對 IE6 的支持，但是也不能支持全部效果。

在框架擴(kuò)展方面，隨著 Bootstrap 的廣泛使用，擴(kuò)展插件和組件也非常豐富，涉及顯示組件、兼容性、圖表庫等各個方面。

jQuery UI

jQuery UI（）是 jQuery 項(xiàng)目組中對桌面端的擴(kuò)展，包括了豐富的控件和特效，與 jQuery 無縫兼容。同時，jQuery UI 中預(yù)置了多種風(fēng)格供用戶選擇，避免了千篇一律。如果您對預(yù)置的風(fēng)格不滿意，還可以通過 jQuery UI 的可視化界面，自助對 jQuery UI 的顯示效果進(jìn)行配置，非常方便，夠高端大氣上檔次。

jQuery Mobile

jQuery Mobile ()是 jQuery 項(xiàng)目對移動端的擴(kuò)展，目前支持 iOS, Android, Windows Phone, Black Berry 等主流平臺。具體支持情況可以參見。另外 jQuery Mobile 在布局，控件和特效方面都很慷慨。在風(fēng)格方面，與 jQuery UI 類似，除了預(yù)置的風(fēng)格效果之外，還支持用戶可視化配置的效果。

可圈可點(diǎn)的是，jQuery Mobile 還與 Codiqa 無縫連接，用戶可以直接通過拖拽實(shí)現(xiàn)對界面的設(shè)計，以及代碼的生成。

Sencha Ext JS

Sencha Ext JS（）是 Sencha 基于 Ext JS 開發(fā)的前端框架，內(nèi)容極其豐富，控件、特效等支持非常非常豐富，表格、圖畫、報告、布局、甚至數(shù)據(jù)連接，無所不包。只有您想不到，沒有它辦不到。基于 Sass 和 Compass，使得用戶對格式的修改和特效制作更加方便。此外，Sencha 有豐富的產(chǎn)品線，Sencha Desktop Packager 可以讓您的應(yīng)用擁有桌面應(yīng)用的效果, Sencha Animator 基于 CSS3 更加方便用戶對特效的制作，不光支持桌面端，移動端更是不在話下。在 Sencha 看來，用 Animator 做游戲都是輕松拿下。Sencha Space 是基于 HTML5，提供制作跨平臺應(yīng)用的利器。同時 Sencha Ext JS 對主流瀏覽器的支持也非常理想。

Sencha Ext JS 有著耀眼的光輝，但是光芒背后總歸有點(diǎn)陰影。除了之前提到的 Ext JS 太過重量級之外，商業(yè)化是 Sencha 的另一把利劍。幫助 Sencha 披荊斬棘之時，也把大把的碼農(nóng)砍在馬下。Sencha 規(guī)定，凡是商業(yè)化的應(yīng)用，都需要付費(fèi)。另外，Sencha 的輔助產(chǎn)品也全部收費(fèi)，否則只能是試用版。這里的輔助產(chǎn)品，其實(shí)包括了上面提到的所有產(chǎn)品。

Sencha Touch

Sencha Touch（）是 Sencha 面向移動端的開發(fā)框架，基于 HTML5 技術(shù)，保證了對大多數(shù)移動平臺的支持。Sencha Touch 包括豐富的布局，控件和特效。并且 Sencha Touch 對響應(yīng)式支持的很好，在不同設(shè)備上，甚至在橫屏和豎屏?xí)r都會顯示不同的效果。這種效果是 Sencha Touch 控件自適應(yīng)的。Sencha Touch 也實(shí)現(xiàn)了對大多數(shù)移動設(shè)備的支持。Sencha Architect 是對移動端的可視化編輯工具，有著不朽的效果，但也有著不菲的身價。

同時 Sencha Touch 也支持混合式 App 創(chuàng)建，也即是基于 Web 技術(shù)，配合 PhoneGap ()或者 Cordova()之類的工具，就可以構(gòu)建移動應(yīng)用。Sencha Touch、jQuery Mobile、Foundation 這些前端框架負(fù)責(zé)界面和效果的編寫，PhoneGap、Cordova 框架則允許通過 JavaScript 和其他接口對手機(jī)設(shè)備的調(diào)用，開創(chuàng)了新的移動端開發(fā)模式，真正實(shí)現(xiàn)了移動端的跨平臺開發(fā)。

Sencha GXT

Sencha GXT（）是 Sencha 對 Google 的 Web Toolkit 框架的擴(kuò)展。可以支持通過 Java 文件的解析，生成 HTML5 頁面文件，可以與 Java 環(huán)境無縫集成。有著豐富的控件和特效，并且可以無縫調(diào)用 Google 地圖等 Google 應(yīng)用。雖然開發(fā)時不是特別直觀，但是效果還是非常豐富的。與 Sencha Ext JS 絲毫不顯弱勢。

Dojo

目前唯一能與 Sencha Ext JS 一較高下的框架就只有 Dojo()了。抱著 IBM, VMWare 等眾多大腿，Dojo 的一顰一笑都額外惹人注目。Dojo 項(xiàng)目的產(chǎn)品線和功能也特別豐富。首先，Dojo 有自己的 DOM 解析器 Nano，是 DOM 解析和處理的內(nèi)核。此外，Dojo 的 Web 框架有非常豐富的布局、版式、控件以及特效，對多語言以及圖表的擴(kuò)展支持都非常好，并支持對地圖的操作。大家可以查看它的演示()，與 Ext JS 的效果進(jìn)行比較。此外，Dojo 還有自己的圖形化設(shè)計和開發(fā)工具 Maqetta，可以通過拖拽實(shí)現(xiàn)設(shè)計。Dojo 的風(fēng)格設(shè)置不是在下載的時候指定的，而是通過引用不同的 CSS 格式來實(shí)現(xiàn)。

Dojo 雖然比 jQuery 重量級不少，但是比 Ext JS 還是輕量級一些，至少在文件大小上。另外，Dojo 還有自己的 CDN 機(jī)制，只要通過配置，就可以對 Dojo 文件進(jìn)行 CDN。由于有 IBM,Oracle 等大佬的支持，Dojo 在與 Spring 等現(xiàn)有框架支持方面也表現(xiàn)得很理想。

Dojo Mobile

Dojo Mobile()是 Dojo 推出的移動端框架，表現(xiàn)也很不俗。在布局，控件，特效方面都下了不少功夫。并支持與所用平臺匹配的風(fēng)格設(shè)置，如果您不喜歡還可以引用不同 CSS 文件來實(shí)現(xiàn)不同效果。

除了可以在移動端的瀏覽器上使用，Dojo Mobile 也支持與 PhoneGap 無縫連接，可以通過 Dojo Mobile 開發(fā)移動 App 應(yīng)用。同時也具有不錯的響應(yīng)性（在寬屏和窄屏上的顯示效果不同）。

Mootools

Mootools()可以說是目前最輕量級的前端框架，內(nèi)核 js 壓縮完之后只有 8k，完整版壓縮之后也不到 100k，遠(yuǎn)比其他框架要小很多。Mootools 有自己的面向?qū)ο笤O(shè)計的內(nèi)核 Mootools Core。伴隨著最小的文件大小，框架的功能比其他框架也要弱不少，只有在控件和特效上有少量支持。

Prototype JS

Prototype JS（）也是一個簡潔的框架，有著豐富的對 DOM 操作的功能，對 Ajax 和 JSON 支持得都非常好，在使用上與 jQuery 相比也相差不多。作為 Rails 默認(rèn)的 JavaScript 框架，相信對廣大開發(fā)人員也很有借鑒意義的。

在擴(kuò)展方面，Scriptaculous（）對 Prototype JS 進(jìn)行了豐富的擴(kuò)展，主要是在動畫特效、Ajax 控制、DOM 操作、單元測試方面等。

YUI

YUI（）作為開源前端框架的鼻祖，在框架上的功力非常之深。有著自己的解析 DOM 的核心框架，并且在特效、動畫、圖表等方面都有豐富的擴(kuò)展，并可以通過 YQL 直接訪問 Yahoo！的數(shù)據(jù)。在用戶經(jīng)常使用的功能方面都有著不錯的表現(xiàn)。

與 jQuery 靈活的語法相比，YUI 顯得更加中規(guī)中矩，在代碼組織、結(jié)構(gòu)和模式方面都更加講究，更體現(xiàn)出工程師的嚴(yán)謹(jǐn)。同時 YUI 也有著豐富的產(chǎn)品線，擁有測試框架 YUITest、文檔生成框架 YUIDoc、自動構(gòu)建框架 YUI Build，滿足項(xiàng)目開發(fā)各方面的需求。隨著 Yahoo!的沒落，YUI 也感覺逐漸步入暮年，但作為相當(dāng)嚴(yán)謹(jǐn)完整的前端框架鼻祖，足以秒殺其他。

Foundation

Foundation（）是 ZURB 旗下的主要面向移動端的開發(fā)框架，但是也保持對桌面端的兼容，目前已經(jīng)更新到 Foundation4 版本。框架主要采用 jQuery 和 Zepto（語法酷似 jQuery，但比 jQuery 更輕量級）作為 JavaScript 基礎(chǔ)，CSS 則基于 Sass、Compass，有著很好的擴(kuò)展性，并有著豐富的布局，版式和多種多樣的控件與特效，非常方便開發(fā)者使用。控件的響應(yīng)式效果也幫助用戶識別不同瀏覽器效果。

ZURB 作為一個完整的項(xiàng)目組，包括很多原型、設(shè)計、構(gòu)建、分析等一系列工具，為用戶提供完整的服務(wù)。當(dāng)然，有很多服務(wù)是要收費(fèi)的。

Foundation 主要以移動端風(fēng)格為主，如圖 10 所示。

Kissy

Kissy（）是阿里集團(tuán)自主開發(fā)的前端框架，目前在淘寶網(wǎng)、一淘網(wǎng)等阿里系網(wǎng)站上得到不少應(yīng)用。Kissy 框架模仿 jQuery 編寫了自己的內(nèi)核 Kissy Core，用于對 DOM 的解析，Ajax 處理等。同時，有著豐富的控件，并實(shí)現(xiàn)了一些動畫效果和特效。同樣，在 Kissy 的控件中也可以看到 Bootstrap 等國外框架的影子。此外，Kissy abc 項(xiàng)目工具可以幫助用戶實(shí)現(xiàn)自動化構(gòu)建，并有很多擴(kuò)展組件方便用戶使用。

應(yīng)該說 Kissy 是目前國內(nèi)開發(fā)的最好的前端框架，在實(shí)際使用中也經(jīng)過了檢驗(yàn)，但跟國外成熟框架相比還是有一定差距。

Kissy Mobile

Kissy Mobile（）是 Kissy 推出的移動版框架，意在開發(fā)出可以在移動瀏覽器和移動應(yīng)用上都可以使用的框架，不過目前項(xiàng)目內(nèi)容還比較少，控件和特效也比較少，也不具有響應(yīng)式的效果。

Qwrap

Qwrap（）是百度有啊團(tuán)隊(duì)推出的 JavaScript 框架，現(xiàn)在被收入 360，被廣泛應(yīng)用與 360 產(chǎn)品中。Qwrap 綜合 jQuery、Prototype、YUI 特點(diǎn)，對 JavaScript 進(jìn)行了封裝。但是，如果要把 Qwrap 算成一個前端開發(fā)框架還是有些牽強(qiáng)，因?yàn)槌?JavaScript 類庫之外，Qwrap 基本乏善可陳，還處于發(fā)展階段。

Tangram

Tangram（）是百度推出的另一個 JavaScript 框架，被廣泛應(yīng)用于百度系旗下的產(chǎn)品，與 Qwrap 類似，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 做了不少擴(kuò)展，但是作為前端開發(fā)框架還是顯得比較單薄。基于此，百度公司繼續(xù)推出了兩個基于 Tangram 的項(xiàng)目，Magic 和 Baidu Template。Magic 項(xiàng)目基于 Tangram 對控件和特效都做了擴(kuò)展，增加了 10 個新的控件。Baidu Template 則更多是針對移動端開發(fā)的擴(kuò)展，目前對于大多數(shù)主流移動設(shè)備和操作系統(tǒng)都有支持。

了解完這些框架，我們從平臺、基礎(chǔ)技術(shù)、布局、CSS、控件、特效和風(fēng)格設(shè)置等幾個方面來對它們進(jìn)行一個基本比較：

由此我們可以看到，對于桌面端，目前 Bootstrap 和 jQuery UI 已經(jīng)可以滿足大多數(shù)的開發(fā)需求，也在業(yè)界得到了廣泛的應(yīng)用，有著豐富的組件和擴(kuò)展，以及相對簡潔的語法和操作。應(yīng)對我們的基本需求已經(jīng)足夠了。如果您對前端界面的效果有比較高的要求，希望可以應(yīng)用像結(jié)構(gòu)樹這樣比較復(fù)雜的控件，建議您考慮 Dojo，抱了這多年的大腿也不是白抱的，效果還是很不錯的。對于，局域網(wǎng)的應(yīng)用，還可以考慮 Sencha Ext JS 框架，效果更加震撼，但是對網(wǎng)絡(luò)的要求也更高。如果這些還是不能滿足您內(nèi)心的狂野，那只能建議您使用 Flex 或者 SilverLight 了。相反，如果您對網(wǎng)絡(luò)速度非常敏感，希望找一個迷您并且功能不錯的框架，那 Mootools 會是您不錯的選擇。如果您很懷舊，也可以使用 YUI，雖然曲線不夠性感，但是內(nèi)容很豐富。如果您是一個 Ruby on Rails 的開發(fā)人員，建議您可以先看一下 Prototype 框架，畢竟是默認(rèn)的框架。如果您對上面說到的框架都不滿意，那建議您體驗(yàn)一下國內(nèi)的框架一段時間，然后再回過頭來看剛才說到的框架，相信您一定會有一種豁然開朗的感覺。

對于移動端的應(yīng)用，jQuery Mobile, Foundation 依然是輕量級選擇，Dojo Mobile 和 Sencha Touch 會為您提供更加強(qiáng)大的功能。同時，您還可以與 PhoneGap 和 Cordova 框架結(jié)合使用，利用 Web 的技術(shù)開發(fā)移動應(yīng)用。不過這種混合式開發(fā)模式興起時間并不長，還在不斷發(fā)展中。

結(jié)束語

上面只是當(dāng)前涌現(xiàn)出的前端開發(fā)框架中的一部分，相信還有更多優(yōu)秀的框架還在研發(fā)中心，到此我們對“百花齊放”這一詞有了更直觀的感覺，也說明在沉寂了多年之后，前端開發(fā)的工作越來越獲得大家的重視，也注定會越來越繁榮。文中的建議只代表筆者個人的初淺意見，大家最終的選擇還要結(jié)合實(shí)際的開發(fā)需求。

參考資料

學(xué)習(xí)

• ，從語言能力、變量處理、函數(shù)擴(kuò)展等多角度詳細(xì)地比較了 Sass 和 LESS，為用戶給出了選擇建議。
• ，PhoneGap 是目前廣泛使用的移動端開發(fā)框架，配合 PhoneGap 的 SDK 開發(fā)者可以通過 Web 技術(shù)開發(fā)出跨平臺的移動應(yīng)用。
• ，Cordova 是 Apache 公司推出的移動開發(fā)框架，也是讓開發(fā)者可以使用 Web 技術(shù)開發(fā)跨平臺移動應(yīng)用。
• ：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開發(fā)方面的技能。
• ：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
• ，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過  欄目，迅速了解 Web 2.0 的相關(guān)概念。
• 查看 ，了解更多和 HTML5 相關(guān)的知識和動向。

討論

• 加入 。查看開發(fā)人員推動的博客、論壇、組和維基，并與其他 developerWorks 用戶交流。

本文轉(zhuǎn)載自