前端開發的模塊化和組件化的定義，以及兩者的關係？

01-08

最近剛接觸前端開發，對一些概念理解不是很清楚：
比如什麼是模塊化，什麼是組件化，兩者有什麼關係或兩者怎麼結合起來使用。
希望舉一些栗子來說明問題（因剛接觸這塊，有栗子比較助於理解）。
最後希望推薦下目前有什麼好的基於ES6的前端模塊化解決方案

模塊化中的模塊一般指的是 Javascript 模塊，比如一個用來格式化時間的模塊。

組件則包含了 template、style 和 script，而它的 Script 可以由各種模塊組成。比如一個顯示時間的組件會調用上面的那個格式化時間的模塊。

@張雲龍畫的一張圖完美地解釋了它們之間的關係：

模塊化的訴求是解耦，組件化的訴求是好用

剛接觸前端就這麼高級，script就夠用了吧

如果組織合理，script也能構建一個不小的程序

來說說模塊化吧，我們的程序稍微大點就要分開寫了，不然幾萬行代碼放一起不得瘋了，就像我們平時用電腦也會把電影和音樂分開放吧，這其實就可以算是模塊

分開後就帶來了依賴的問題，文件多了手動管理依賴就毀了，就有了amd cmd commonjs等，這些規範其實是為了解決模塊的依賴，而不是模塊本身，代碼分開就是模塊

個人理解模塊化是組件化的前提

組件化和模塊化的價值都在於分治，web應用系統的複雜度不斷提升，兼顧開發效率和產品實際運行效率，會在開發階段運用組件化和模塊化的手段分離關注點，結合構建工具合理打包。組件化更多關注的是UI部分，你看到的一個管理界面的彈出框，頭部，內容區，確認按鈕和頁腳都可以是個組件，這些組件可以組成一個彈出框組件，跟其他組件組合又是一個新的組件。模塊化側重於功能或者數據的封裝，一組相關的組件可以定義成一個模塊，一個暴露了通用驗證方法的對象可以定義成一個模塊，一個全局的json配置文件也可以定義成一個模塊。封裝隔離來後，更重要的是解決模塊間的依賴關係。babel作為現在最火的es6轉換器，用babelify或者webpack的babel loader再或者基於task的構建系統插件都可以很方便用起來es6 modules

從應用中去理解概念會更直觀，請Google 「ES6 modules」，「Web Component」，認真讀完就大概理解了。

模塊：按照項目業務內容來劃分大模塊；

組件：按照一些小功能的通用性和可復用性來抽象組件；

一般來說，模塊是由很多小組件組成的。雖然兩者側重點不同，但是從包含關係上講，組件是模塊的子集。

某大牛的文章：前端工程——基礎篇 · Issue #10 · fouber/blog · GitHub

應該可以解答題主的問題。隨便截一張圖：

模塊是抽象的，比如：把這個當做一個模塊進行開發。

組件是具體的，比如：這個組件不好用，這個組件太大，這個組件不好看。這些都是具體的，客觀的。

通常來講，組件是由一系列模塊組成的帶有生命周期的有機整體。反過來，一個大的模塊，也是可以包含一系列的組件。

你感覺什麼都不會，但是什麼都知道時就可以了

仔細想了一下，談談個人理解：

從整體概念來講，模塊化是一種分治的思想，組件化是模塊化思想的實現手段；

從復用的角度來講，模塊一般是項目範圍內的，比如一個項目劃分為子系統、模塊、子模塊，而組件可以是提出來跨項目復用的，這可能是兩者最重要的區別；

從歷史發展角度來講，最開始提出的項目級模塊化開發，而後進一步提升到通用功能組件化開發，這是隨著前端開發越來越複雜、對效率要求越來高而演變過來的。

前端組件化開發的難點感覺就是在於前端技術體系與運行環境非常複雜，JS,CSS,HTML,瀏覽器差異，這些東西都要整合起來，而且即要能夠合併起來提升性能，又要能分開實現按需載入，十分頭疼。

模塊是內容。

組件是功能。

————————————

個人覺得。。。