關(guān)于模塊化、組件化的理解

546669204 發(fā)布于2019-08-20 18:29 / 2656人閱讀

摘要：以上是小可對模塊化的一些理解，有錯誤請江湖上各位好友指正，嘻嘻多多交流，一起成長進步

模塊化、組件化是一種開發(fā)思想，是一種開發(fā)思路上的解決方案，我們大多數(shù)人要是沒有深入理解這個概念的話，會有一種模糊摸不著模塊化、組件化意思的感覺，會有一種想用模塊化、組件化來實現(xiàn)項目卻不知道怎么下手。其實，只要記住，模塊化只是一種思想，不是一種具體的解決方案。

在項目中，我們可能用到類似bootstrap里的組件（button）一樣,我們把這些組件理解為組件化開發(fā)的實現(xiàn)，意識上，我們大多數(shù)人會刻意去區(qū)分組件化、模塊化，其實這只是我們中文上去區(qū)分，英文上都是model,都只是一種解決思路，不同的是，需求不同，實現(xiàn)出來的代碼效果也是不同。舉個例子，bootstrap里的button組件，它是有一個獨立的可執(zhí)行的單員，就直接引用，在頁面上你就會看到一個button的按鈕出現(xiàn)，這也就是所說的顆粒化，而bootstrap里的柵格系統(tǒng)，你不可能單單引用柵格系統(tǒng)的樣式類，頁面中就會呈現(xiàn)出具體的效果出來，還需依賴一個具體的html標簽或者其他的組件，而button組件是不需要依賴其他的組件或者什么的，人們就會慣性的理解成button是一個組件，柵格系統(tǒng)是一個模塊，因為button是獨立的。其實，他們都一樣，只是需求不同，都是用模塊化的思路解決方案。button的需求是開發(fā)一個ui組件，柵格系統(tǒng)是開發(fā)一個排版布局的布局解決方案。

事實上，模塊化（組件化、模塊化總稱為模塊化吧，不區(qū)分了）在我們實際項目開發(fā)上回很常用到，容易理解的是開發(fā)一個下拉框通用組件這種封裝好的組件，難以理解的就是定義一個margin外邊距的一系列的屬性樣式集合，比如margin：10，margin：20，margin：30等，這也是一個模塊，定義的一個實現(xiàn)不同外邊距的需求的模塊實現(xiàn)。

當(dāng)然，模塊化說了是一種思路，不僅僅是體現(xiàn)在具體的代碼邏輯上，還體現(xiàn)在文件管理上，頁面布局等等，比如，webpack模塊化管理工具上實現(xiàn)的多個入口的配置，按照頁面或者頁面中的不同模塊區(qū)域?qū)s/css圖片等進行壓縮整合按照不同頁面呈現(xiàn)、不同模塊區(qū)域呈現(xiàn)導(dǎo)入不同的文件，這也是模塊化的思維。
以上是小可對模塊化的一些理解，有錯誤請江湖上各位好友指正，嘻嘻~多多交流，一起成長進步~