共同問題一：如何實(shí)現(xiàn)組件化
組件化有兩個(gè)好處：
功能封裝
跨項(xiàng)目復(fù)用
所有框架贱鼻，無論用什么語(yǔ)言來實(shí)現(xiàn)根灯，都有一些基本的問題需要解決宽堆。
一血巍、如何設(shè)計(jì)組件的生命周期旬渠？
雖然技術(shù)細(xì)節(jié)有差異扎即，但是基本的結(jié)構(gòu)是類似的宏胯，都需要經(jīng)歷幾個(gè)基本的階段：初始化谜酒、渲染坟比、存活期芦鳍、銷毀。
二葛账、組件之間如何通訊柠衅？
OK，無論什么 UI 框架籍琳，有了 UI 組件之后菲宴，緊接著就需要解決組件間通訊的問題。
你只要能解決以下 3 種情況就能解決絕大部分的問題了：父子間如何通訊趋急？兄弟間如何通訊喝峦？遠(yuǎn)房親戚之間如何通訊？
無論哪種框架呜达，典型的解決方案有 3 種：父子之間通過事件或者直接調(diào)用進(jìn)行通訊谣蠢；兄弟、遠(yuǎn)房親戚之間利用事件總線進(jìn)行通訊查近；利用 cookie眉踱、localstorage、甚至服務(wù)端 session 進(jìn)行通訊霜威。
三谈喳、如何管理組件的狀態(tài)？
UI 組件不僅僅有外觀侥祭，外觀只是一張畫皮叁执，里面要有數(shù)據(jù)才行，既然有數(shù)據(jù)矮冬，就要有狀態(tài)管理的問題谈宛。
在狀態(tài)管理這塊，需要仔細(xì)設(shè)計(jì)這些問題：是否需要雙向綁定胎署？如何配合路由保持組件狀態(tài)吆录？
四、組件樣式怎么做琼牧？
因?yàn)槭乔岸丝蚣芑煮荩悦烙^的問題也不能放松哀卫。所幸的是，在移動(dòng)互聯(lián)網(wǎng)時(shí)代撬槽，用戶都已經(jīng)習(xí)慣了“扁平化”此改、“極簡(jiǎn)主義”這些設(shè)計(jì)風(fēng)格，我們可以利用市面上現(xiàn)有的 CSS 樣式庫(kù)來給我們的組件“化妝”侄柔。
共同問題二：如何實(shí)現(xiàn)模塊化
如你所知共啃，在 Java 里面，我們有完善的 Class/Package/Jar/ClassLoader 這些機(jī)制的支持暂题。當(dāng) JVM 發(fā)現(xiàn)所需要的 .class 文件沒有加載的時(shí)候移剪，它自己會(huì)使用 ClassLoader 去加載，不需要程序員自己操心薪者。
但是在 JS 里面不行纵苛，由于 JavaScript 這門語(yǔ)言本身的缺陷，它沒有提供完善的模塊化支持言津，這就導(dǎo)致了所有前端框架必須自己解決模塊化的問題攻人。
但是，值得慶幸的是纺念，我們有了 Node.js贝椿，有了 Webpack，再也不用像前幾年那樣自己搞 RequireJS 了陷谱！這就是為什么市面上主流的前端框架都使用 Webpack 來做自己的 CLI 的原因烙博。
總結(jié)：無論你目前在使用什么前端框架，無論你以后想學(xué)哪些前端框架烟逊，只要緊緊扣住“組件化”和“模塊化”這兩條主線渣窜，心里就會(huì)有大方向了，絕對(duì)不會(huì)迷失在茫茫多的技術(shù)細(xì)節(jié)里面宪躯。
---------------------
作者：GitChat的博客
來源：CSDN
原文：https://blog.csdn.net/valada/article/details/84344756
版權(quán)聲明：本文為博主原創(chuàng)文章乔宿，轉(zhuǎn)載請(qǐng)附上博文鏈接！
