0-模塊化開發的歷史

前端模塊化
指的範圍比較廣具體有
‘html模塊化’：jsp的include、php的include、前端的iframe等等，由於頁面數據通常與程序的model綁定在一塊兒的，因此html的模塊化每每要結合異步js、或同步後端語言來完成。因此通常沒有人去單獨說html的模塊化，固然若是html是純靜態資源就無所謂了
‘js模塊化’：劃重點
‘css模塊化’：參考 https://www.jianshu.com/p/d46bc8cf3afa
html模板可複用、css可複用、js可複用
目前我以爲作的最好的就是基於腳手架搭建的vue項目了，由於一個單文件組件就是一個模塊，而一個模塊內包含了獨立可服用的全部前端的東西--模板（html）、表現（css）、行爲（js）

前端模塊化與js模塊化
由於js是最能體現出前端模塊化，因此通常說前端模塊化指的就是js模塊化

 

講講js模塊化開發歷史
上邊我也說了，前端模塊開發的重點在於js模塊化開發，因此我下邊講的都是js模塊化開發
JavaScript做爲一款靈活性和可塑性較強的語言，由前端到後端顯示了它及其旺盛的生命力。而JavaScript的模塊化之路卻比較坎坷和多元化，初學者可能會對這些概念及其關係搞得暈頭轉向，好比CommonJS、AMD、ES六、CMD、UMD等。本文將簡要概述它們之間的關係和區別，爲了理清它們之間的關係，我畫了張圖。

 

CommonJS
CommonJS規範出現的最先，它的目的很明確，就是解決JavaScript的模塊開發規範問題
咱們先從CommonJS談起，由於在網頁端沒有模塊化編程只是頁面JavaScript邏輯複雜，但也能夠工做下去，在服務器端卻必定要有模塊，因此雖然JavaScript在web端發展這麼多年，第一個流行的模塊化規範卻由服務器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌着JavaScript模塊化編程正式登上舞臺。可是等到在瀏覽器實現的時候，尷尬的事情來了，NodeJS應用加載的模塊都是基於本地磁盤的，而瀏覽器卻收到網絡延遲的影響，而各個模塊的延遲長短並不肯定，這就給依賴形成了很大的麻煩，好比執行模塊先於被依賴的模塊下載下來了，那麼是執行失敗。也就是說，CommonJS是適用於同步的，而客戶端的js均是異步加載的，並不適應該規範，因而AMD就出現了。

AMD
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規範，因爲不是JavaScript原生支持，使用AMD規範進行頁面開發須要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化的產出。
利用異步回調的思路，成功的解決了CommonJS問題‘多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器’。可是繼而又引起了一個問題--js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長，AMD的模塊依賴在聲明的時候就要被所有加載到瀏覽器中執行一遍。即所謂的‘AMD是依賴前置，提早加載依賴’。CMD就誕生了

CMD
實際上AMD就已是完美的前端模塊式開發了，可是爲了優化性能，仍是出了CMD模塊化開發規範。CMD性能好，由於只有用戶須要的時候才執行。項目加載的時候，會把全部的所依賴的js下載到本地，可是並不執行，直到遇到require某模塊的時候，纔會被執行。即所謂的‘CMD依賴後置，使用時才加載’
這樣項目所需依賴則js徹底存儲到本地了，而後就能夠如同nodeJs（commonJs）同樣去require了

AMD與CMD的最大區別
AMD會下載完全部的依賴並所有執行加載到瀏覽器，
而CMD只會把全部的依賴預先下載到本地，可是並不會當即執行一次（加載到瀏覽器）。
AMD下載>加載（也叫作執行、解釋）
CMD下載>遇到require則加載

不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行。仁者見仁智者見智吧。

至於UMD我以爲純屬扯淡，本事知識點很少，就是加了判斷當前是什麼環境，用那種模塊化開發機制好

 

做者感想

先後端模塊化的最大差異在於

	模塊文件讀取	規範
後端	同步全部的文件均在服務器本地，因此加載起來時間徹底能夠忽略。也就是說java的import xxx，node的requre xxx，php的include不一樣文件時，誰在前，誰先被引入	拿java來講，模塊化機制從誕生那一刻就有了，一個packge就是一個模塊，是用import導入，便可訪問裏邊全部的class等等不存在爭議 node，一個文件就是一個模塊，用require去導入，即commomJ規範，也沒爭議
前端	全部文件均在服務器，而js腳本確實在客戶端執行，若是用同步的方式去引入，放在前邊的，受網絡影響，並不必定會先加載進來，若是程序須要按順序加載執行某些邏輯，就不行了，這也是爲啥AMD、CMD誕生的緣由了 固然啊，若是是webapp、小程序啊，這些全部文件都是在本地的，是徹底不受約束的	AMD、CMD define來定義模塊，CMD建議一個文件定義一個模塊，即一個文件只有一個define Es6的import目前只是語法糖，es的模塊化規範還沒有真正完善，並且瀏覽器目前也均沒法實現

 

 

 

 

 

 

 

 

 

 

 

對規範支持

若是模塊化開發的話,後端node平臺是直接支持的，可是前端就不行了，瀏覽器這些規範、關鍵字均不被識別
因此要想使用這些模塊化開發，有兩種辦法，要麼使用他們的實現require.js、sea.js，或者使用webpack、babel編譯成瀏覽器識別的
除此以外，像小程序是微信端直接支持模塊開發的，提供了機制和關鍵字，其底層實質估計多半也是用了webpack進行編譯的
像腳手架搭建的vue項目也是能直接使用模塊化開發的，底層多半也是用了webpack編譯，只是是自動化熱編譯，你察覺不帶而已
還有angular（注意不是angularJs）也是一樣的緣由能夠直接使用模塊開發（angular這個套的有深一些，他是用了typescript語法import什麼的，而後被webpack編譯成es5被瀏覽器執行）

 

參考http://www.qdfuns.com/notes/20963/fc5ee24d4c0cff32334846bdd0c74c42.htmlhttp://www.zhaiqianfeng.com/2017/06/ES6-CommonJS-CMD-AMD-UMD.htmlhttps://www.cnblogs.com/jackyWHJ/articles/4943271.htmlhttps://www.cnblogs.com/highsea90/p/4383895.htmlhttp://blog.csdn.net/csdn_yudong/article/details/52206789http://www.ruanyifeng.com/blog/2012/10/javascript_module.html