<del id="y4c2k"></del>

前端組件化開發(fā)的意義

elisa.yang 發(fā)布于2019-08-23 16:28 / 2689人閱讀

摘要：組件化開發(fā)的優(yōu)點。可以很大程度的降低系統(tǒng)各個功能的耦合性，并且提高了功能內(nèi)部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復(fù)雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。

如今前端技術(shù)飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應(yīng)用）。本文主要是總結(jié)一下組件化開發(fā)思想重要點。

組件化可以幫助解決前端結(jié)構(gòu)的復(fù)用性問題，整個頁面可以由不同的組件組合、嵌套構(gòu)成。

一個組件有自己的現(xiàn)實形態(tài)和行為，組件的顯示形態(tài)和行為可以由（React中數(shù)據(jù)狀態(tài)（state）和配置參數(shù)（props）Vue中是data和props）共同決定。

數(shù)據(jù)狀態(tài)和配置參數(shù)的改變都會影響到組件的顯示形態(tài)。當數(shù)據(jù)變化的時候，組件的顯示需要更新。所以組件化模式能提供一種高效的自動化地幫我們更新頁面。降低了代碼的復(fù)雜度，帶來更好的可維護性。

那么我們在基于組件開發(fā)的時候就主要考慮分析需求。

拿到一個需求以后，我們要做的第一件事情就是理解需求、分析需求、劃分這個需求由哪些組件構(gòu)成。
組件的劃分沒有特別明確的標準。劃分組件的目的是為了代碼可復(fù)用性、可維護性。只要某個部分有可能復(fù)用到別的地方，你都可以把它抽離出來當成一個組件；或者把某一部分抽離出來對代碼的組織和管理會帶來幫助，你也可以毫不猶豫地把它抽離出來。

組件化開發(fā)的優(yōu)點。

說到底，前端組件化開發(fā)之后。可以很大程度的降低系統(tǒng)各個功能的耦合性，并且提高了功能內(nèi)部的聚合性。這對前端工程化以及降低代碼的維護難度，是有很大幫助的。
耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復(fù)雜度，提升開發(fā)效率，降低開發(fā)成本。
組件封裝的好，加班也少了，bug 也少了，就有更多時間喝喝咖啡、撩撩小姐姐、打打吃雞了。:) 美滋滋。

設(shè)計組件要遵循一個原則：一個組件只專注做一件事，且把這件事做好。

組件化開發(fā)的難點。
模塊（組件）之間需要共享數(shù)據(jù)”，和“數(shù)據(jù)可能被任意修改導(dǎo)致不可預(yù)料的結(jié)果”之間的矛盾。這個是前端組件開發(fā)需要處理的難點。
基于這個點目前我認為處理最好的工具就是Redux狀態(tài)管理工具。有興趣的同學(xué)可以移步Redux中文文檔。http://cn.redux.js.org/