jquery中模塊化和組件化的區(qū)別：1、模塊化是將分屬同一功能/業(yè)務(wù)的代碼隔離（分裝）成獨(dú)立的模塊；而組件化是把重復(fù)的代碼提取出來(lái)合并成為一個(gè)個(gè)組件。2、模塊之間有依賴的關(guān)系，可通過(guò)路由器進(jìn)行模塊之間的耦合問(wèn)題；而組件之間低依賴，比較獨(dú)立，每個(gè)組件單獨(dú)提出來(lái)也能正常使用，有很高的重用性。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

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

看圖哈 關(guān)系以及映射關(guān)系

1、什么是組件化和模塊化

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

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

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

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

組件之間低依賴，比較獨(dú)立，每個(gè)組件單獨(dú)提出來(lái)也能正常使用，很高的重用性

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

模塊之間有依賴的關(guān)系，可通過(guò)路由器進(jìn)行模塊之間的耦合問(wèn)題。

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

• 開(kāi)發(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è)組件，即可全局修改。

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

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

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

下面來(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)：開(kāi)發(fā)調(diào)試效率高、可維護(hù)性強(qiáng)、避免阻斷、版本管理更容易