資訊專欄INFORMATION COLUMN
摘要：以上級(jí)別的框架，屬于前端的重度封裝，通過(guò)框架暴露的接口進(jìn)行開發(fā)，開發(fā)人員甚至不需要太多前端知識(shí)，只需要詳細(xì)查看框架的開發(fā)文檔即可。現(xiàn)在回過(guò)頭來(lái)看系列框架，它們其實(shí)并不是給后臺(tái)程序員準(zhǔn)備的框架。
各大前端框架可以按照“封裝度”的標(biāo)準(zhǔn)來(lái)區(qū)分。
設(shè)計(jì)剛出的一套網(wǎng)頁(yè)皮膚，封裝度為0。層層封裝到可以直接用后臺(tái)語(yǔ)言寫頁(yè)面，封裝度為10。那么我是這樣來(lái)區(qū)分前端框架的。
1級(jí)——純html+css
放5年前，基本就是用Dreamweaver剛排出來(lái)的頁(yè)面或者網(wǎng)頁(yè)查看源代碼扒下來(lái)的皮膚。不涉及到j(luò)s，就是純頁(yè)面皮膚。
2級(jí)—— bootstrap系列
bootstrap的出現(xiàn)是一個(gè)里程碑事件。引入了不少html5/css3的特性。由于它對(duì)響應(yīng)式的支持以及良好的體驗(yàn)，給人一種耳目一新的感覺(jué)。其源碼，不管是css還是js都值得學(xué)習(xí)一下，看后經(jīng)常會(huì)有“原來(lái)還可以這樣做”這種恍然大悟的感覺(jué)。不過(guò)歸根結(jié)底是一套u(yù)i皮膚+少量js組成的框架，屬于封裝度偏低的框架。經(jīng)典頁(yè)面大概是這樣：
3~4級(jí)—— metronic/adminLTE系列
基于bootstrap或者其他1級(jí)框架，然后集成了各種jQuery插件、富文本編輯器等js庫(kù)，組成的一個(gè)大雜燴工具包和案例庫(kù)。皮膚基本是基于bootstrap自定義的一套主題。案例比較詳盡，開發(fā)的時(shí)候找到需要的組件把前端代碼復(fù)制粘貼，再稍微調(diào)試一下就能達(dá)到良好的視覺(jué)效果。根據(jù)集成的第三方庫(kù)的多少，基本可以劃分到3~4級(jí)封裝度這樣的范圍。這個(gè)級(jí)別的框架的代碼更多的是屬于粘合劑，將各種不同的第三方庫(kù)的前端代碼粘合起來(lái)。經(jīng)典頁(yè)面大概是這樣：
5級(jí)—— jQuery-ui
這里要多帶帶把jQuery-ui拿出來(lái)講，并不是因?yàn)樗姆庋b度有多高，而是我認(rèn)為它是一個(gè)分界點(diǎn)。jQuery以下級(jí)別的框架，代碼以css為主，自身的js代碼少，框架量級(jí)更輕，更靈活，更適合互聯(lián)網(wǎng)web產(chǎn)品。jQuery以上級(jí)別的框架，屬于前端的重度封裝，通過(guò)框架暴露的接口進(jìn)行開發(fā)，開發(fā)人員甚至不需要太多前端知識(shí)，只需要詳細(xì)查看框架的開發(fā)文檔即可。jQuery以上級(jí)別的框架更適合傳統(tǒng)管理軟件的開發(fā)。
6~7級(jí)—— easy-ui/DWZ
easy-ui基于jQuery-ui，不過(guò)具有更豐富的組件庫(kù)。貌似商業(yè)版收費(fèi)很高。聽(tīng)說(shuō)某大型國(guó)企花了大價(jià)錢購(gòu)買下來(lái)使用。DWZ是國(guó)產(chǎn)框架中我認(rèn)為綜合表現(xiàn)還不錯(cuò)的，完全免費(fèi)，有問(wèn)題可以在他們的QQ群里提。其余的之前還用過(guò)金蝶的operamasks-ui，不過(guò)現(xiàn)在好像已經(jīng)不更新了。這一類級(jí)別的框架還有一個(gè)另外的稱呼——“富客戶端框架”，意思就是重度js框架。使用起來(lái)開發(fā)效率很高，當(dāng)年也是一度百花齊放，框架輩出。經(jīng)典頁(yè)面大概是這樣：
8級(jí)—— extjs系列
extjs屬于前端框架領(lǐng)域中的龐然大物，封裝程度很高，具有自成體系的元素選擇引擎和瀏覽器兼容方案，js寫法上也有自己的方式。組件很多很全。只看extjs的官方文檔和示例幾乎不必學(xué)習(xí)任何其他的前端知識(shí)就可以做出“很漂亮”的前端頁(yè)面。當(dāng)然頁(yè)面很容易“撞衫”。使用時(shí)間長(zhǎng)了，會(huì)對(duì)其產(chǎn)生嚴(yán)重依賴，離開extjs，幾乎不會(huì)寫前端頁(yè)面了。經(jīng)典頁(yè)面大概是這樣：
9級(jí)——vaadin/GWT
最后一級(jí)，也是封裝度最高的一級(jí)，也就是所謂的使用后臺(tái)語(yǔ)言寫前端。如果說(shuō)之前的八級(jí)至少前端和后端還是相對(duì)分離的，后臺(tái)程序在java中寫，前臺(tái)程序在html或者js中寫；那么這一級(jí)別的框架簡(jiǎn)直會(huì)顛覆你的認(rèn)知！只需在后臺(tái)使用java寫好了類和對(duì)象，并設(shè)置好相關(guān)的屬性，網(wǎng)頁(yè)的元素是自動(dòng)通過(guò)后臺(tái)對(duì)象生成的。這當(dāng)然有好處，媽媽再也不用擔(dān)心我不會(huì)寫js和css了。然而就學(xué)一下html/css/js真的那么難嗎？個(gè)人認(rèn)為，盡管GWT有g(shù)oogle的這么強(qiáng)悍的背書，但是這種9級(jí)封裝的本質(zhì)上把前后臺(tái)耦合得更緊密。一個(gè)人做一個(gè)項(xiàng)目還可以考慮，但是一個(gè)團(tuán)隊(duì)前后臺(tái)分離、模塊化開發(fā)的時(shí)候，使用這種框架是一種災(zāi)難！所以我是極度不建議使用9級(jí)封裝框架的。
綜上，針對(duì)不同的編程方式，給出以下參考：
1 DOP（Deadline Oriented Program，面向截止日期編程）的程序猿們有兩種選擇：a、努力學(xué)習(xí)html/css/js，使用2~3級(jí)框架；b、看不上前端代碼的，6~8級(jí)是不錯(cuò)的選擇。對(duì)于業(yè)務(wù)優(yōu)先、老板整天嚷嚷時(shí)間有多緊、客戶有多急切的項(xiàng)目，你可以直接選b了，我覺(jué)得老板是不會(huì)給你時(shí)間學(xué)習(xí)html/css/js的。
2 EOP（Experience Oriented Program，面向用戶體驗(yàn)編程）的程序猿們，大多數(shù)做的是追求極致用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品吧。那果斷選1級(jí)封裝度的框架，可適當(dāng)借鑒2~4級(jí)的框架。
3 MOP（Money Oriented Program，面向人民幣編程）對(duì)于一直做后臺(tái)，趁過(guò)年放假想賺個(gè)外快的程序猿們，我知道你們也不想在前端領(lǐng)域有多大發(fā)展，搞好后臺(tái)就足夠一輩子衣食無(wú)憂了，所以還是選擇6~8級(jí)吧。
此外，需要考慮搜索引擎優(yōu)化的項(xiàng)目，慎用富客戶端或者重ajax應(yīng)用。
最后告訴大家，這些都是幾年前我為了治療自己的選擇恐懼癥而進(jìn)行的一些分析。
現(xiàn)在，答主我已經(jīng)不再糾結(jié)各種前端框架了。
有朋友提到backbonejs/angularjs/reactjs/vuejs這些新興框架，感覺(jué)很有必要補(bǔ)充完善一下這個(gè)答案。
前端崗位正是在網(wǎng)頁(yè)前端復(fù)雜性逐漸增加的推動(dòng)下產(chǎn)生的。說(shuō)實(shí)話，很多老程序員以前是看不上前端行業(yè)的，認(rèn)為無(wú)非是一些奇巧淫技而已。而現(xiàn)在，以javascript為基礎(chǔ)的前端技術(shù)已經(jīng)成功逆襲，nodejs的發(fā)展更是讓js有了揚(yáng)眉吐氣的一天。
現(xiàn)在回過(guò)頭來(lái)看backbonejs/angularjs/reactjs/vuejs系列框架，它們其實(shí)并不是給后臺(tái)程序員準(zhǔn)備的框架。不要輕信它們官網(wǎng)上的提到的“簡(jiǎn)單易用快速上手”之類的宣傳語(yǔ)，那不是跟后臺(tái)程序員和js初學(xué)者說(shuō)的。如果你對(duì)js原型鏈、作用域、異步回調(diào)的概念還很模糊，用了這些框架只會(huì)讓自己陷入泥潭難以自拔！
雖然你也可以將這些框架簡(jiǎn)單粗暴得劃分到7級(jí)封裝度左右，但是我并不認(rèn)為這些“深度前端”框架適合后臺(tái)開發(fā)者。
當(dāng)然啦，事無(wú)絕對(duì)，如果你像我一樣興趣廣泛，喜歡折騰，前后端雙修，那你自然清楚該選什么前端框架，也就不會(huì)到知乎上來(lái)問(wèn)這個(gè)問(wèn)題了。
這就是現(xiàn)在的我，有了一定的前端功力，開源社區(qū)的森林里那么多豐富的資源，枝葉、落花都是利刃，也無(wú)需在框架上糾結(jié)了。
Materialize前端只需要簡(jiǎn)單的設(shè)計(jì)就搞定。后端寫起來(lái)得心應(yīng)手，真是方便。
Admin LTE：基于Bootstrap的一套后臺(tái)系統(tǒng)
https://www.zhihu.com/questio...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52935.html
摘要：以上級(jí)別的框架，屬于前端的重度封裝，通過(guò)框架暴露的接口進(jìn)行開發(fā)，開發(fā)人員甚至不需要太多前端知識(shí)，只需要詳細(xì)查看框架的開發(fā)文檔即可?，F(xiàn)在回過(guò)頭來(lái)看系列框架，它們其實(shí)并不是給后臺(tái)程序員準(zhǔn)備的框架。 各大前端框架可以按照封裝度的標(biāo)準(zhǔn)來(lái)區(qū)分。 設(shè)計(jì)剛出的一套網(wǎng)頁(yè)皮膚，封裝度為0。層層封裝到可以直接用后臺(tái)語(yǔ)言寫頁(yè)面，封裝度為10。那么我是這樣來(lái)區(qū)分前端框架的。 1級(jí)——純html+css 放5年...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無(wú)可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：后端開發(fā)的疑惑后端開發(fā)最常面對(duì)的一個(gè)問(wèn)題性能高并發(fā)等等。而到了時(shí)代，在方面有了前后端分離概念移動(dòng)后端更是無(wú)力渲染天然前后端分離。 先來(lái)上一張前端頁(yè)面的效果圖（Vue + Vux + Vuex + Vue-Router）。showImg(https://segmentfault.com/img/remote/1460000010207850); 第一次做gif 沒(méi)什么經(jīng)驗(yàn)，太大了。加載...
閱讀 696·2021-11-18 10:07
閱讀 2890·2021-09-22 16:04
閱讀 890·2021-08-16 10:50
閱讀 3365·2019-08-30 15:56
閱讀 1795·2019-08-29 13:22
閱讀 2705·2019-08-26 17:15
閱讀 1254·2019-08-26 10:57
閱讀 1118·2019-08-23 15:23
