大話前端組件化

發(fā)布時(shí)間：2021-06-22 15:26:45

在軟件工程中系統(tǒng)的架構(gòu)也在隨著規(guī)模不斷的演進(jìn)，最初的面向過程的軟件開發(fā)到現(xiàn)在面向?qū)ο蟮能浖_發(fā)。軟件工程也逐漸進(jìn)入組件化開發(fā)階段。然而前端的組件化的發(fā)展一直滯后，傳統(tǒng)的桌面開發(fā)早已經(jīng)進(jìn)入組件化開發(fā)階段。

  Web1.0時(shí)代前端主要是HTML與CSS的天下，JS則是簡(jiǎn)單的輔助工具而已。到了Web2.0時(shí)代前端開始走向以AJax技術(shù)為核心輕量級(jí)別交互，以JQuery、ExtJS、Dojo代表前端類庫（后兩者為框架）為導(dǎo)向的開發(fā)開始迅猛發(fā)展。JQuery在前端領(lǐng)域叱咤風(fēng)云多年，人們都紛紛認(rèn)為JQuery戰(zhàn)無不勝。而ExtJS、Dojo在UI組件上做的面面俱到，對(duì)于當(dāng)時(shí)的管理類Web系統(tǒng)來說也是福音。同時(shí)也看見前端組件化初見苗頭（實(shí)現(xiàn)了一些初級(jí)的組件化開發(fā)模式，如：jQuery的擴(kuò)展...），人們都紛紛意識(shí)到前端組件化帶來的巨大好處。

  到了Web2.0后半頁移動(dòng)互聯(lián)網(wǎng)的迅速崛起，交互從傳統(tǒng)的PC轉(zhuǎn)到移動(dòng)端。而移動(dòng)端對(duì)于交互性與性能的要求也要比PC端強(qiáng)的多。同時(shí)瀏覽器的信息量也越來越大，傳統(tǒng)的框架與類庫已經(jīng)不堪重負(fù)。已經(jīng)無法保證前端維護(hù)性與性能。

  人們就開始思考前端已經(jīng)早已不是類庫能解決的問題了，前端已經(jīng)成為一個(gè)工程化的問題。第一代前端框架涌現(xiàn)出來，以Knockout.js、Ember.js、Backbone.js為代表。第二代前端框架：以Angular.js、React.js、Vue.js、Avalon.js。第二代前端框架幾乎以MVVM為導(dǎo)向，除了React.js。以React.js與Vue.js為代表的前端框架已經(jīng)使用了組件化的思路進(jìn)行開發(fā)軟件，圍繞組件進(jìn)行業(yè)務(wù)架構(gòu)。

Angular.js 1.x架構(gòu)圖

Avalon.js 1.x架構(gòu)圖

Vue.js 1.x架構(gòu)圖

React.js 15.x架構(gòu)圖

  在前端進(jìn)入組件化的階段的同時(shí)也遇到了不少的問題，這些問題在傳統(tǒng)的桌面端早已經(jīng)不是問題。前端組件化主要面對(duì)以下問題：組件與子組件通訊、可視化組件的外觀可維護(hù)性、復(fù)雜組件的可維護(hù)性、組件與組件的隔離性等。組件化意在解決業(yè)務(wù)開發(fā)人員在開發(fā)業(yè)務(wù)時(shí)無需關(guān)心組件內(nèi)部細(xì)節(jié)進(jìn)行快速的使用組件進(jìn)行設(shè)計(jì)業(yè)務(wù)，組件化可以說是對(duì)面向?qū)ο缶幊痰耐暾麑?shí)現(xiàn)。

  組件化對(duì)Web開發(fā)有著深遠(yuǎn)的影響，直接影響到Web的設(shè)計(jì)、維護(hù)、測(cè)試，組件的切分，組件的開發(fā)。傳統(tǒng)的網(wǎng)頁開發(fā)模式將被推倒重來。新型的組件也將重新發(fā)明，重新發(fā)明輪子是不可避免的。同時(shí)組件也要兼顧各個(gè)消費(fèi)端的需求。組件由單一服務(wù)于PC轉(zhuǎn)向任何支持瀏覽器的平臺(tái)。

  目前來看，組件化的的實(shí)現(xiàn)分兩路：以模板驅(qū)動(dòng)JS為代表的Angular、Vue、以JS驅(qū)動(dòng)的React，同時(shí)以Web Component原生瀏覽器特性驅(qū)動(dòng)的框架也在崛起Polymer、Nova。不得不說原生或兼容原生的組件化才是未來。

Web應(yīng)該具備原生可視化程序的那些特征？

  組件化：

  組件化是核心之中核心，為什么要組件化？以前我們?cè)赪eb端做的UI都很直接而簡(jiǎn)單。界面都是Div套上去搞定，取值都是“$(xx).xxx”。這種模式在幾年看開發(fā)速度確實(shí)很快。但是客戶的需求復(fù)雜以后，要你在Div里修改內(nèi)容。而且同樣的東西不止出現(xiàn)在一個(gè)地方。當(dāng)時(shí)如果要去解決，無非兩種辦法，第一Copy幾份，第二做個(gè)類似JQuery擴(kuò)展的，將相同的東西抽象在一起，然后“$xxx(div)”后它就變成你想要的部件。其實(shí)到這里Web已經(jīng)進(jìn)化了一點(diǎn)點(diǎn)，可以重用大部分的代碼了，那它究竟算不算真正的組件呢？答案很簡(jiǎn)單：不算。可能你要問為什么不算？

  當(dāng)前你進(jìn)一步接觸需求后，客戶要求你能夠?qū)ivA中的某個(gè)地方加上BDiv，而BDiv不是什么時(shí)候都會(huì)出現(xiàn)。或者讓你嵌套多層。然后每一層的功能都不太一樣。這時(shí)候應(yīng)該就頭痛了。擴(kuò)展的代碼就相當(dāng)冗余了很難維護(hù)，而且樣式很難修改。為什么會(huì)這樣呢？其實(shí)原因很簡(jiǎn)單，因?yàn)槟阋恢闭J(rèn)為Web上所有的東西在同一層。并沒有將它們按層次劃分來進(jìn)行管理。所以以前看到的組件都是“偽組件”。下面一幅圖將展示真正的組件結(jié)構(gòu)。

真正的組件該有的樣子

  上面這個(gè)圖如果用傳統(tǒng)的實(shí)現(xiàn)思路應(yīng)該是比較頭痛的。需要做很多封裝才能達(dá)到這個(gè)界面。但如果將它們一層層的拆開來實(shí)現(xiàn)，然后就像搭積木一樣，有層次的拼在一起。這個(gè)問題就可能變的簡(jiǎn)單。如果每個(gè)組件都可以封裝并且嵌套，上層組件之間只需要關(guān)心它需要的下層組件的屬性和方法就行了。這樣思維就很有層次，不在頭痛如何組織的問題。

  組件化還有一個(gè)意義在于把相同的功能抽象成基本的另一個(gè)組件，然后多個(gè)類似組件都可以去繼承它，并做個(gè)性化的擴(kuò)展定制。

  組件化是相當(dāng)美好的東西，解決了標(biāo)準(zhǔn)化的問題。但是Web要實(shí)現(xiàn)談何容易。而且要讓每個(gè)開發(fā)者都很快掌握，這樣的框架實(shí)現(xiàn)也是相當(dāng)困難。

  隔離性：

  Web的CSS，JS，DOM都是很平直的東西。都可以直接影響。如果要做組件，那么需要將組件進(jìn)行隔離。樣式需要隔離，DOM需要隔離。這樣組件與組件之間才不會(huì)產(chǎn)生干擾。

  可測(cè)試性：

  Web的測(cè)試遠(yuǎn)遠(yuǎn)沒有原生應(yīng)用的測(cè)試做的好，如果要進(jìn)行組件化，那么對(duì)每個(gè)組件，尤其是嵌套組件與組合組件的測(cè)試尤其重要。好的框架應(yīng)該能快速定位組件，以及方法。很好的展示當(dāng)前組件的結(jié)構(gòu)，便于修改問題。

  劃分性：

  重用公用基礎(chǔ)的組件，根據(jù)需求搭建面向業(yè)務(wù)的組件與重構(gòu)新的組件，這樣組件化的真正生產(chǎn)力才能發(fā)揮出來，但是要能做到靈活開發(fā)，這樣的框架實(shí)現(xiàn)談何容易。

  非入侵性：

  新的組件放在舊的業(yè)務(wù)，要保證融合，這樣的框架才能滿足現(xiàn)有的需求，如果每次升級(jí)都要徹底拋棄舊的東西，這樣對(duì)開發(fā)來說也是巨大的工作量。

  學(xué)習(xí)臺(tái)階：

  以前Web端都是前端開發(fā)或UI設(shè)計(jì)做HTML模板，后端套模板。如果現(xiàn)在將這些開發(fā)都放在前端，前端必須掌握一定的JS和框架的知識(shí)。如果讓一個(gè)以前寫HTML的接觸這樣的框架。如果他們不能理解那么這樣的框架真的好嗎？

組件化僅僅只是前端邁向標(biāo)準(zhǔn)化的一個(gè)開始！

  如果說組件化框架是骨架，保證各個(gè)組件的獨(dú)立性，那么業(yè)務(wù)就是靈魂。凝聚不同的部件。業(yè)務(wù)不僅僅需要輸入輸出的組件，需要一套能適應(yīng)Web端的業(yè)務(wù)架構(gòu)，保證業(yè)務(wù)與組件分離，這樣業(yè)務(wù)才能高效重用，界面更換應(yīng)該不影響前端的業(yè)務(wù)部分。

尾巴：

  到目前為止前端領(lǐng)域依然是火熱的造輪子階段，誰也不比誰好，你有張良計(jì)我有過墻梯，都有自己不足的地方。組件化的浪潮勢(shì)必可擋，以React與Vue代表的組件化框架最有希望成為出色的工具。但是在前端蓬勃發(fā)展（打爛仗）時(shí)代相信會(huì)有更好的輪子解決他們沒有解決的問題。

  前端框架真正要解決的問題是開發(fā)效率與維護(hù)效率，而目前的框架主要解決組件的重用性與運(yùn)行效率。真正開發(fā)問題實(shí)際上是卡在不斷制造業(yè)務(wù)層的輪子與框架的使用門檻與組件的維護(hù)效率。沒有一套完善的前端框架對(duì)效率的提升還是很有限的，不然還是在走以前的老路，只是路好走了點(diǎn)，解決了一個(gè)問題，其他各種問題出來了，抵消掉了框架的優(yōu)勢(shì)。那也算不上革命的創(chuàng)新。

  前端組件化很有可能將Web帶到3.0階段，前端渲染將成主流。搜索引擎勢(shì)必推出新的機(jī)制對(duì)新的信息進(jìn)行收錄。