幾年前,還是痴迷java的那會兒,我也曾糾結於前端框架的選擇。試圖找出一套一勞永逸的前端框架繼承到專案架構中。搜遍全網得出以下結論:

各大前端框架可以按照“封裝度”的標準來區分。

設計剛出的一套網頁面板,封裝度為0。層層封裝到可以直接用後臺語言寫頁面,封裝度為10。那麼我是這樣來區分前端框架的。

1級——純html+css
放5年前,基本就是用Dreamweaver剛排出來的頁面或者網頁檢視原始碼扒下來的面板。不涉及到js,就是純頁面面板。
--------------------------------
2級—— bootstrap系列
bootstrap的出現是一個里程碑事件。發源於twitter,引入了不少html5/css3的特性。由於它對響應式的支援以及良好的體驗,給人一種耳目一新的感覺。其原始碼,不管是css還是js都值得學習一下,看後經常會有“原來還可以這樣做”這種恍然大悟的感覺。不過歸根結底是一套ui面板+少量js組成的框架,屬於封裝度偏低的框架。經典頁面大概是這樣:

--------------------------------
3~4級—— metronic/adminLTE系列
基於bootstrap或者其他1級框架,然後集成了各種jQuery外掛、富文字編輯器等js庫,組成的一個大雜燴工具包和案例庫。面板基本是基於bootstrap自定義的一套主題。案例比較詳盡,開發的時候找到需要的元件把前端程式碼複製貼上,再稍微除錯一下就能達到良好的視覺效果。根據整合的第三方庫的多少,基本可以劃分到3~4級封裝度這樣的範圍。這個級別的框架的程式碼更多的是屬於粘合劑,將各種不同的第三方庫的前端程式碼粘合起來。經典頁面大概是這樣:

--------------------------------
5級—— jQuery-ui
這裡要單獨把jQuery-ui拿出來講,並不是因為它的封裝度有多高,而是我認為它是一個分界點。jQuery以下級別的框架,程式碼以css為主,自身的js程式碼少,框架量級更輕,更靈活,更適合網際網路web產品。jQuery以上級別的框架,屬於前端的重度封裝,通過框架暴露的介面進行開發,開發人員甚至不需要太多前端知識,只需要詳細檢視框架的開發文件即可。jQuery以上級別的框架更適合傳統管理軟體的開發。
--------------------------------
6~7級—— easy-ui/DWZ
easy-ui基於jQuery-ui,不過具有更豐富的元件庫。貌似商業版收費很高。聽說某大型國企花了大價錢購買下來使用。DWZ是國產框架中我認為綜合表現還不錯的,完全免費,有問題可以在他們的QQ群裡提。其餘的之前還用過金蝶的operamasks-ui,不過現在好像已經不更新了。這一類級別的框架還有一個另外的稱呼——“富客戶端框架”,意思就是重度js框架。使用起來開發效率很高,當年也是一度百花齊放,框架輩出。經典頁面大概是這樣:
----------------------------------------------------------------
8級—— extjs系列
extjs屬於前端框架領域中的龐然大物,封裝程度很高,具有自成體系的元素選擇引擎和瀏覽器相容方案,js寫法上也有自己的方式。元件很多很全。只看extjs的官方文件和示例幾乎不必學習任何其他的前端知識就可以做出“很漂亮”的前端頁面。當然頁面很容易“撞衫”。使用時間長了,會對其產生嚴重依賴,離開extjs,幾乎不會寫前端頁面了。經典頁面大概是這樣:

--------------------------------
9級——vaadin/GWT
最後一級,也是封裝度最高的一級,也就是所謂的使用後臺語言寫前端。如果說之前的八級至少前端和後端還是相對分離的,後臺程式在java中寫,前臺程式在html或者js中寫;那麼這一級別的框架簡直會顛覆你的認知!只需在後臺使用java寫好了類和物件,並設定好相關的屬性,網頁的元素是自動通過後臺物件生成的。這當然有好處,媽媽再也不用擔心我不會寫js和css了。然而就學一下html/css/js真的那麼難嗎?個人認為,儘管GWT有google的這麼強悍的背書,但是這種9級封裝的本質上把前後臺耦合得更緊密。一個人做一個專案還可以考慮,但是一個團隊前後臺分離、模組化開發的時候,使用這種框架是一種災難!所以我是極度不建議使用9級封裝框架的。
--------------------------------

綜上,針對不同的程式設計方式,給出以下參考:

1 DOP(Deadline Oriented Program,面向截止日期程式設計)的程式猿們有兩種選擇:a、努力學習html/css/js,使用2~3級框架;b、看不上前端程式碼的,6~8級是不錯的選擇。對於業務優先、老闆整天嚷嚷時間有多緊、客戶有多急切的專案,你可以直接選b了,我覺得老闆是不會給你時間學習html/css/js的。

2 EOP(Experience Oriented Program,面向使用者體驗程式設計)的程式猿們,大多數做的是追求極致使用者體驗的網際網路產品吧。那果斷選1級封裝度的框架,可適當借鑑2~4級的框架。

3 MOP(Money Oriented Program,面向人民幣程式設計)對於一直做後臺,趁過年放假想賺個外快的程式猿們,我知道你們也不想在前端領域有多大發展,搞好後臺就足夠一輩子衣食無憂了,所以還是選擇6~8級吧。

此外,需要考慮搜尋引擎優化的專案,慎用富客戶端或者重ajax應用。

什麼?你還需要考慮ie6的相容性?出門左轉有一面牆,你可以撞上去了,不送!

最後告訴大家,這些都是幾年前我為了治療自己的選擇恐懼症而進行的一些分析。

現在,答主我已經不再糾結各種前端框架了。因為心中有劍,枝葉、落花皆可為劍。