層層封裝到可以直接用后臺語言寫頁面，封裝度為10。

1級——純html+css

放5年前，基本就是用Dreamweaver剛排出來的頁面或者網(wǎng)頁查看源代碼扒下來的皮膚。不涉及到j(luò)s，就是純頁面皮膚。

2級—— bootstrap系列

bootstrap的出現(xiàn)是一個里程碑事件。引入了不少html5/css3的特性。由于它對響應(yīng)式的支持以及良好的體驗，給人一種耳目一新的感覺。其源碼，不管是css還是js都值得學(xué)習(xí)一下，看后經(jīng)常會有“原來還可以這樣做”這種恍然大悟的感覺。不過歸根結(jié)底是一套ui皮膚+少量js組成的框架，屬于封裝度偏低的框架。經(jīng)典頁面大概是這樣：

3~4級—— metronic/adminLTE系列

基于bootstrap或者其他1級框架，然后集成了各種jQuery插件、富文本編輯器等js庫，組成的一個大雜燴工具包和案例庫。皮膚基本是基于bootstrap自定義的一套主題。案例比較詳盡，開發(fā)的時候找到需要的組件把前端代碼復(fù)制粘貼，再稍微調(diào)試一下就能達到良好的視覺效果。根據(jù)集成的第三方庫的多少，基本可以劃分到3~4級封裝度這樣的范圍。這個級別的框架的代碼更多的是屬于粘合劑，將各種不同的第三方庫的前端代碼粘合起來。經(jīng)典頁面大概是這樣：

5級—— jQuery-ui

這里要單獨把jQuery-ui拿出來講，并不是因為它的封裝度有多高，而是我認為它是一個分界點。jQuery以下級別的框架，代碼以css為主，自身的js代碼少，框架量級更輕，更靈活，更適合互聯(lián)網(wǎng)web產(chǎn)品。jQuery以上級別的框架，屬于前端的重度封裝，通過框架暴露的接口進行開發(fā)，開發(fā)人員甚至不需要太多前端知識，只需要詳細查看框架的開發(fā)文檔即可。jQuery以上級別的框架更適合傳統(tǒng)管理軟件的開發(fā)。

6~7級—— easy-ui/DWZ

easy-ui基于jQuery-ui，不過具有更豐富的組件庫。貌似商業(yè)版收費很高。聽說某大型國企花了大價錢購買下來使用。DWZ是國產(chǎn)框架中我認為綜合表現(xiàn)還不錯的，完全免費，有問題可以在他們的QQ群里提。其余的之前還用過金蝶的operamasks-ui，不過現(xiàn)在好像已經(jīng)不更新了。這一類級別的框架還有一個另外的稱呼——“富客戶端框架”，意思就是重度js框架。使用起來開發(fā)效率很高，當(dāng)年也是一度百花齊放，框架輩出。經(jīng)典頁面大概是這樣：

8級—— extjs系列

extjs屬于前端框架領(lǐng)域中的龐然大物，封裝程度很高，具有自成體系的元素選擇引擎和瀏覽器兼容方案，js寫法上也有自己的方式。組件很多很全。只看extjs的官方文檔和示例幾乎不必學(xué)習(xí)任何其他的前端知識就可以做出“很漂亮”的前端頁面。當(dāng)然頁面很容易“撞衫”。使用時間長了，會對其產(chǎn)生嚴重依賴，離開extjs，幾乎不會寫前端頁面了。經(jīng)典頁面大概是這樣：

9級——vaadin/GWT

最后一級，也是封裝度最高的一級，也就是所謂的使用后臺語言寫前端。如果說之前的八級至少前端和后端還是相對分離的，后臺程序在java中寫，前臺程序在html或者js中寫；那么這一級別的框架簡直會顛覆你的認知！只需在后臺使用java寫好了類和對象，并設(shè)置好相關(guān)的屬性，網(wǎng)頁的元素是自動通過后臺對象生成的。這當(dāng)然有好處，媽媽再也不用擔(dān)心我不會寫js和css了。然而就學(xué)一下html/css/js真的那么難嗎？個人認為，盡管GWT有g(shù)oogle的這么強悍的背書，但是這種9級封裝的本質(zhì)上把前后臺耦合得更緊密。一個人做一個項目還可以考慮，但是一個團隊前后臺分離、模塊化開發(fā)的時候，使用這種框架是一種災(zāi)難！所以我是極度不建議使用9級封裝框架的。

綜上，針對不同的編程方式，給出以下參考：

1 DOP（Deadline Oriented Program，面向截止日期編程）的程序猿們有兩種選擇：

a、努力學(xué)習(xí)html/css/js，使用2~3級框架；

b、看不上前端代碼的，6~8級是不錯的選擇。對于業(yè)務(wù)優(yōu)先、老板整天嚷嚷時間有多緊、客戶有多急切的項目，你可以直接選b了，我覺得老板是不會給你時間學(xué)習(xí)html/css/js的。

2 EOP（Experience Oriented Program，面向用戶體驗編程）的程序猿們，大多數(shù)做的是追求極致用戶體驗的互聯(lián)網(wǎng)產(chǎn)品吧。那果斷選1級封裝度的框架，可適當(dāng)借鑒2~4級的框架。

3 MOP（Money Oriented Program，面向人民幣編程）對于一直做后臺，趁過年放假想賺個外快的程序猿們，我知道你們也不想在前端領(lǐng)域有多大發(fā)展，搞好后臺就足夠一輩子衣食無憂了，所以還是選擇6~8級吧。

前端崗位正是在網(wǎng)頁前端復(fù)雜性逐漸增加的推動下產(chǎn)生的。說實話，很多老程序員以前是看不上前端行業(yè)的，認為無非是一些奇巧淫技而已。而現(xiàn)在，以javascript為基礎(chǔ)的前端技術(shù)已經(jīng)成功逆襲，nodejs的發(fā)展更是讓js有了揚眉吐氣的一天。

現(xiàn)在回過頭來看backbonejs/angularjs/reactjs/vuejs系列框架，它們其實并不是給后臺程序員準(zhǔn)備的框架。不要輕信它們官網(wǎng)上的提到的“簡單易用快速上手”之類的宣傳語，那不是跟后臺程序員和js初學(xué)者說的。如果你對js原型鏈、作用域、異步回調(diào)的概念還很模糊，用了這些框架只會讓自己陷入泥潭難以自拔！

雖然你也可以將這些框架簡單粗暴得劃分到7級封裝度左右，但是我并不認為這些“深度前端”框架適合后臺開發(fā)者。

如今互聯(lián)網(wǎng)公司對于中高級的前端工程師或后端工程師，都是需要了解并學(xué)習(xí)一些后（前）端技術(shù)，對高端程序員的要求，不是精通某一門語言或者某一個平臺，而是工程能力／解決問題能力以及學(xué)習(xí)能力。

如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，對前端感興趣，可以加入前端學(xué)習(xí)交流群：784783012 里面可以與大神一起交流并走出迷茫。小白可進群免費領(lǐng)取學(xué)習(xí)資料，看看前輩們是如何在編程的世界里傲然前行。

點擊：加入