前端框架調研分析

04-22

如今的CSS前端框架的發展非常迅猛，但是真正好的框架不多。加之CSS3和HTML5的迅速發展，也使得前端框架市場越演越烈。當然每一個前端框架都有自己的強項和弱項，以及適合的領域，根據我們公司的軟體產品特點對目前使用率和流行程度比較高的前端框架做出如下分析：

目前我們公司軟體類產品框架大部分使用的是Ext，相比jQuery，Dojo更重量級，動輒數兆的文件，使得Ext在外網使用的時候會顧慮很多。但是，另一方面，在Ext JS龐大的文件背後是Ext JS強大的功能。圖表、菜單、特效，以及非常豐富的控制項，同時它的交互也非常強大，獨立靠Ext JS幾乎就可以取代控制層完成於客戶的交互。這樣也使得Ext JS成為內網開發的利器。

首頁我們先對目前國內外主流前端開發框架做一個基本的了解，之後再對他們進行一個直觀的對比。

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 中甚至放棄了對 IE6、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 的效果示例

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 的輔助產品也全部收費，否則只能是試用版。這裡的輔助產品，其實包括了上面提到的所有產品。

jQuery

jQuery(http://jQuery.com),同樣是一個輕量級的庫，擁有強大的選擇器、出色的DOM操作、可靠的事件處理、完善的兼容性和鏈式操作等功能。JQuery憑藉簡潔的語法和跨平台的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax的操作。其獨特而優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，無論是網頁設計師，後台開發者，業餘愛好者還是項目管理者，都有足夠的理由去學習jQuery。

總之，每個JavaScript庫都有各自的優點和缺點，同時也有各自的支持者和反對者，目前幾個最流行的JavaScript庫的Google訪問量如下圖：

很明顯，自從jQuery誕生那天起，其關注度就一直在穩步上升，jQuery已經逐漸從其他JavaScript庫中脫穎而出，成為Web開發人員的最佳選擇。

我們在看看國內外主流框架的對比：