相信很多人和我一樣看過很多組件化和模塊化設計的文章，但依然沒有搞清楚這兩個的區別，在寫這篇文章之前，我一直以為組件化和模塊化是一個概念（捂臉），在閱文無數后，決定做個總結，加上案例講解，來幫助理解這兩者的概念。
組件化和模塊化源於軟件開發，現在越來越被更多地應用於UI設計當中。下面是我為了便於理解做了個示意圖。
一、什么是組件和模塊
1.1 組件：把重復的代碼提取出來合並成為一個個組件，組件最重要的就是重用（復用），位於框架最底層，其他功能都依賴於組件，可供不同功能使用，獨立性強。
1.2 模塊：分屬同一功能/業務的代碼進行隔離（分裝）成獨立的模塊，可以獨立運行，以頁面、功能或其他不同粒度划分程度不同的模塊，位於業務框架層，模塊間通過接口調用，目的是降低模塊間的耦合，由之前的主應用與模塊耦合，變為主應用與接口耦合，接口與模塊耦合。模塊就像有多個USB插口的充電寶，可以和多部手機充電，接口可以隨意插拔。復用性很強，可以獨立管理。
二、組件和模塊的區別
2.1 組件：就像一個個小的單位，多個組件可以組合成組件庫，方便調用和復用，組件間也可以嵌套，小組件組合成大組件。
2.2 模塊：就像是獨立的功能和項目（如淘寶：注冊、登錄、購物、直播...），可以調用組件來組成模塊，多個模塊可以組合成業務框架。
小結：即從UI拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為組件。模塊化只是在文件層面上，對代碼或資源的拆分；而組件化是在設計層面上，對UI（用戶界面）的拆分。
三、為什么要使用組件化和模塊化？
3.1 開發和調試效率高：隨着功能越來越多，代碼結構會越發復雜，要修改某一個小功能，可能要重新翻閱整個項目的代碼，把所有相同的地方都修改一遍，重復勞動浪費時間和人力，效率低；使用組件化，每個相同的功能結構都調用同一個組件，只需要修改這個組件，即可全局修改。
3.2 可維護性強：便於后期代碼查找和維護。
3.3 避免阻斷：模塊化是可以獨立運行的，如果一個模塊產生了bug，不會影響其他模塊的調用。
3.4 版本管理更容易：如果由多人協作開發，可以避免代碼覆蓋和沖突。
組件化和模塊化一般情況是一起出現的，他們就像好兄弟，雖然可以分離但最好一起有個照應。如“我的淘寶”頁調用了會員模塊、物流模塊、充值模塊和運動模塊，而且可以發現他們調用了同一個組件在“我的淘寶”來展示各自的模塊。
下面來總結一下本文內容：
組件：把重復的代碼提取出來合並成為一個個組件，組件最重要的就是重用（復用）。
模塊：分屬同一功能/業務的代碼進行隔離（分裝）成獨立的模塊，可以獨立運行，獨立管理，每個模塊有很多接口，可供調用。
組件化模塊化優點：開發調試效率高、可維護性強、避免阻斷、版本管理更容易。