相信很多人和我一樣看過(guò)很多組件化和模塊化設(shè)計(jì)的文章，但依然沒(méi)有搞清楚這兩個(gè)的區(qū)別雕沉，在寫這篇文章之前集乔，我一直以為組件化和模塊化是一個(gè)概念（捂臉），在閱文無(wú)數(shù)后坡椒，決定做個(gè)總結(jié)扰路，加上案例講解，來(lái)幫助理解這兩者的概念倔叼。

本文概要：

什么是組件和模塊

組件和模塊的區(qū)別

為什么要使用組件化和模塊化

組件的創(chuàng)建和嵌套方法

組件化和模塊化源于軟件開發(fā)汗唱，現(xiàn)在越來(lái)越被更多地應(yīng)用于UI設(shè)計(jì)當(dāng)中。下面是我為了便于理解做了個(gè)示意圖丈攒。

一哩罪、什么是組件和模塊

1.1組件：把重復(fù)的代碼提取出來(lái)合并成為一個(gè)個(gè)組件，組件最重要的就是重用（復(fù)用）巡验，位于框架最底層际插，其他功能都依賴于組件，可供不同功能使用显设，獨(dú)立性強(qiáng)框弛。

1.2模塊：分屬同一功能/業(yè)務(wù)的代碼進(jìn)行隔離（分裝）成獨(dú)立的模塊，可以獨(dú)立運(yùn)行捕捂，以頁(yè)面瑟枫、功能或其他不同粒度劃分程度不同的模塊斗搞，位于業(yè)務(wù)框架層，模塊間通過(guò)接口調(diào)用慷妙，目的是降低模塊間的耦合僻焚，由之前的主應(yīng)用與模塊耦合，變?yōu)橹鲬?yīng)用與接口耦合膝擂，接口與模塊耦合虑啤。

模塊就像有多個(gè)USB插口的充電寶，可以和多部手機(jī)充電猿挚，接口可以隨意插拔咐旧。復(fù)用性很強(qiáng)，可以獨(dú)立管理绩蜻。

二、組件和模塊的區(qū)別

2.1組件：就像一個(gè)個(gè)小的單位室埋，多個(gè)組件可以組合成組件庫(kù)办绝，方便調(diào)用和復(fù)用，組件間也可以嵌套姚淆，小組件組合成大組件孕蝉。

2.2模塊：就像是獨(dú)立的功能和項(xiàng)目（如淘寶：注冊(cè)、登錄腌逢、購(gòu)物降淮、直播...），可以調(diào)用組件來(lái)組成模塊搏讶，多個(gè)模塊可以組合成業(yè)務(wù)框架佳鳖。

三、為什么要使用組件化和模塊化媒惕？

3.1開發(fā)和調(diào)試效率高：隨著功能越來(lái)越多系吩，代碼結(jié)構(gòu)會(huì)越發(fā)復(fù)雜，要修改某一個(gè)小功能妒蔚，可能要重新翻閱整個(gè)項(xiàng)目的代碼穿挨，把所有相同的地方都修改一遍，重復(fù)勞動(dòng)浪費(fèi)時(shí)間和人力肴盏，效率低科盛；使用組件化，每個(gè)相同的功能結(jié)構(gòu)都調(diào)用同一個(gè)組件菜皂，只需要修改這個(gè)組件贞绵，即可全局修改。

3.2可維護(hù)性強(qiáng)：便于后期代碼查找和維護(hù)幌墓。

3.3避免阻斷：模塊化是可以獨(dú)立運(yùn)行的但壮，如果一個(gè)模塊產(chǎn)生了bug冀泻，不會(huì)影響其他模塊的調(diào)用。

3.4版本管理更容易：如果由多人協(xié)作開發(fā)蜡饵，可以避免代碼覆蓋和沖突弹渔。

組件化和模塊化一般情況是一起出現(xiàn)的，他們就像好兄弟溯祸，雖然可以分離但最好一起有個(gè)照應(yīng)肢专。

如圖：“我的淘寶”頁(yè)調(diào)用了會(huì)員模塊、物流模塊焦辅、充值模塊和運(yùn)動(dòng)模塊博杖，而且可以發(fā)現(xiàn)他們調(diào)用了同一個(gè)組件在“我的淘寶”來(lái)展示各自的 模塊。

四筷登、組件的創(chuàng)建和嵌套方法

了解了程序邏輯剃根，那么在我們?cè)O(shè)計(jì)中如何運(yùn)用呢，我用sketch簡(jiǎn)單演示一下組件的創(chuàng)建和嵌套前方。（PS中的智能對(duì)象也能達(dá)到相應(yīng)的目的）

4.1組件的創(chuàng)建：

選中要?jiǎng)?chuàng)建的組件的元素狈醉，點(diǎn)擊創(chuàng)建組件，在組件中就可以看到該組件惠险，修改組件樣式苗傅，會(huì)發(fā)現(xiàn)所有使用該組件的樣式都發(fā)生了改變。

4.2組件的嵌套：

在組件中班巩，找到剛剛創(chuàng)建的組件渣慕，選中組件中的按鈕元素，再次點(diǎn)擊創(chuàng)建組件抱慌，可以看到生成了一個(gè)新的組件逊桦，改變新組件的樣式，發(fā)現(xiàn)原組件也同步發(fā)生了變化遥缕，返回看到所有應(yīng)用該嵌套組件的樣式都被改變卫袒。

下面來(lái)總結(jié)一下本文內(nèi)容：

組件：把重復(fù)的代碼提取出來(lái)合并成為一個(gè)個(gè)組件，組件最重要的就是重用（復(fù)用）

模塊：分屬同一功能/業(yè)務(wù)的代碼進(jìn)行隔離（分裝）成獨(dú)立的模塊单匣，可以獨(dú)立運(yùn)行夕凝，獨(dú)立管理，每個(gè)模塊有很多接口户秤，可供調(diào)用

組件化模塊化優(yōu)點(diǎn)：開發(fā)調(diào)試效率高码秉、可維護(hù)性強(qiáng)、避免阻斷鸡号、版本管理更容易