預籌備之 JavaScript
今朝支流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，獲得了用戶的廣泛好評。海內的一些框架許多也是模仿 jQuery 對 JavaScript 中止了包裝，不外這些框架的開山祖師 YUI 照樣堅持用本身的 JavaScript 類庫。css
jQuery 是今朝用的最多的前端 JavaScript 類庫，據初步統計，今朝 jQuery 的佔有率曾經跨越 46%，它算是比擬輕量級的類庫，對 DOM 的操縱也比擬便利到位，支撐的後果和控件也許多。同時，基於 jQuery 有許多擴大名目，包含 jQuery UI(jQuery 支撐的一些控件和後果框架)、jQuery Mobile(挪動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)、Sizzle(CSS 的抉擇引擎)。這些彌補使得 jQuery 框架加倍完備，更令人高興的是，這些擴大與今朝的框架根本都是兼容的，可以穿插應用，使得前端開闢加倍豐碩。html
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 的呼聲也漸漸被新起的框架吞沒，想來也讓人惋惜。react
除上述的三個 JavaScript 類庫，另有 Dojo、Prototype、Mootools 等浩繁類庫，因爲本文批評辯論的框架多采納上述框架，以是其他框架暫不批評辯論。jquery
預籌備之 CSS
跟着 CSS3 的推出，瀏覽器對款式的支撐加倍上了一個條理，後果加倍出衆。各框架也紛繁開闢出基於 CSS3 的款式，讓框架加倍豐碩。git
對付 CSS3，更是推出了一些預編譯的擴大框架，重若是 LESS、Sass 和 Compass(Compass 是基於 Sass 的擴大)。可以便利地中止變量界說，格局援用，函數界說等操縱，並內置了大批的後果。讓您的 CSS 開闢效力晉升一個品位。依據 Chris Coyier 的比擬，Sass+Compass 險些完勝 LESS。有興趣的讀者可以自行參考http://css-tricks.com/sass-vs-less/。因爲 Sass 是用 Ruby 開闢的，以是也必要響應的 Ruby 環境將文件編譯成 CSS 文件。github
回頁首web
海內外前端開闢框架比較
起首我們先對今朝海內外支流前端開闢框架作一個根本的懂得，之後再對他們中止一個直觀的比較。apache
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/）是baidu有啊團隊推出的 JavaScript 框架，如今被支出 360，被廣泛應用與 360 產物中。Qwrap 綜合 jQuery、Prototype、YUI 特點，對 JavaScript 中止了封裝。然則，假如要把 Qwrap 算成一個前端開闢框架照樣有些牽強，因爲除 JavaScript 類庫之外，Qwrap 根本乏善可陳，還處於成長階段。
Tangram
Tangram（http://tangram.baidu.com）是baidu推出的另外一個 JavaScript 框架，被廣泛應用於baidu系旗下的產物，與 Qwrap 類似，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 作了不少擴大，然則做爲前端開闢框架照樣顯得比擬薄弱。基於此，baidu公司繼承推出了兩個基於 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 的技巧開闢挪動應用。不外這類混合式開闢形式鼓起光陰並不長，還在賡續成長中。
回頁首
結束語
下面只是之後涌現出的前端開闢框架中的一部分，信任另有更多優良的框架還在研發中間，到此我們對「百花齊放」這一詞有了更直觀的感到，也闡明在沉靜了多年之後，前端開闢的事情越來越獲得人人的看重，也註定會越來越繁華。文中的倡議只表明筆者我的的初淺見解，人人終極的抉擇還要聯合現實的開闢必要。
參考資料
進修
- Sass 與 LESS 比擬，從說話能力、變量處置、函數擴大等多角度詳細地比擬了 Sass 和 LESS，爲用戶給出了抉擇倡議。
- PhoneGap，PhoneGap 是今朝廣泛應用的挪動端開闢框架，共同 PhoneGap 的 SDK 開闢者可以經由過程 Web 技巧開闢出跨平臺的挪動應用。
- Cordova，Cordova 是 Apache 公司推出的挪動開闢框架，也是讓開闢者可以應用 Web 技巧開闢跨平臺挪動應用。
- developerWorks Web development 專區：經由過程專門對於 Web 技巧的文章和教程，擴大您在網站開闢方面的技巧。
- developerWorks Ajax 資本中間：這是無關 Ajax 編程模子信息的一站式中間，包含許多文檔、教程、服裝論壇t.vhao.net、blog、wiki 和消息。任何 Ajax 的新信息都能在這裏找到。
- developerWorks Web 2.0 資本中間，這是無關 Web 2.0 相干信息的一站式中間，包含大批 Web 2.0 技巧文章、教程、下載和相干技巧資本。您還可以經由過程 Web 2.0 新手入門 欄目，敏捷懂得 Web 2.0 的相干觀點。
- 檢查 HTML5 專題，懂得更多和 HTML5 相干的常識和意向。
批評辯論
- 參加 developerWorks 中文社區。檢查開闢職員推動的博客、服裝論壇t.vhao.net、組和維基，並與其他 developerWorks 用戶交換。
條批評
-
IBM Bluemix 資本中間
文章、教程、演示，贊助您構建、安排和治理雲應用。
-
developerWorks 中文社區
馬上參加來自 IBM 的業餘 IT 交際收集。
-
IBM 軟件資本中間
免費下載、試用軟件產物，構建應用並晉升技巧。
回頁首