在前端開發中，在使用webpack等構建工具開發中我們經常使用import * from 或者是require來引入我們需要的模塊，那麼下面來聊聊前端模塊化幾種規範。
爲什麼需要模塊化
在早期我們寫js代碼通常是這樣子：
var a=1;
var b=1;
function a(){
}
function b(){
}這樣子會造成命名衝突和全局污染。
同時當我們在同一個頁面請求過多的js文件時會造成頁面阻塞和http請求過多。
模塊化規範
由於上面的種種缺點，這時候模塊化顯得非常重要，前期的模塊化通過閉包來達到變量私有化和模塊化。
var module=(function(){
var a = 1;
var b = function(){
}
return {
b:b
}
})()但是這樣子還是不能解決加載問題。 這時js模塊加載器誕生了，並逐漸形成幾種模塊化規範。
CommonJS規範
CommonJS簡介
CommonJS規範是在node的模塊系統基礎上提出來的，也就是CommonJS在服務器中使用，不能在瀏覽器環境中使用。
CommonJS規範規定，每個模塊內部，module變量代表當前模塊（一個js文件就是一個模塊）。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，其實是加載該模塊的module.exports屬性。
CommonJS代碼書寫
var a = 1;
var b = function (){
}
module.exports.a = a;
module.exports.b = b;上面代碼通過module.exports輸出變量a和函數b。
require方法引入
var main = require('./main')
main.a
main.b其實這些代碼在我們使用webpack配置的時候經常用到，webpack是運行在node環境中的，他使用的是CommonJS規範。
CommonJS規範特點
- 所有模塊都是運行在模塊作用域，不會污染全局
- 模塊多次運行，只執行一次，然後緩存起來，要讓模塊重新執行只能清緩存
- 他是按照引入的順序執行的，也是就是同步執行
ADM
ADM簡介
上面說了CommonJS的執行是同步進行的，而且瀏覽器環境中沒有CommonJS模塊中的必要的字段，所以他不適合瀏覽器環境，這時候requirejs應勢而生，它的誕生逐漸形成了ADM規範。
ADM規範中規定所有模塊和依懶項異步加載，這樣子js文件就不是一次性引入了。
ADM模塊代碼書寫
我們說ADM規範主要使用requirejs。
//a.js
define([jquery.js],function($){
var aa = 1
return{
a:aa
}
})
//b.js
define([jquery.js],function($){
var bb = 2;
return {
b:bb
}
})上面文件a.js和b.js通過define方法定義各自的模塊。
通過require方法引入:
require([a.js,b.js],function(a,b){
console.log(a.aa) //1
console.log(b.bb)//2
})ADM規範模塊特點
- 按需加載，也就是說你引入模塊才加載，不會在頁面上一次性加載
- 異步加載，所有加載都是異步，不會阻塞頁面
CDM
CDM介紹
在seajs出現後又形成了CDM規範，CDM規範和ADM類似，都是爲了適應瀏覽器，但是CDM推崇就近依賴，ADM推崇依賴前置。
CDM模塊代碼書寫
define(function(require,exports,module){
var $ = require(jquery.js)
exports.sayHello = function() {
$('#hello').toggle('slow');
};
})CDM規範中模塊代碼書寫和CommonJS相似，其實ADM規範中也可以這樣子引用模塊。具體可以看seajs使用文檔和requirejs使用文檔
CDM和ADM規範
CDM規範和ADM規範是類似的，都是異步按需引入。
但是他們執行的時機不同。
CDM是加載模塊後立刻執行，也就是提前執行，
而ADM是加載模塊後遇到require方法才執行模塊，也就是延遲執行，可以參考這篇文章中的幾個列子。
ES6模塊化規範
在前面幾個模塊化規範發展中，逐漸形成了ES6規範，也是我們在項目中用的最多的了，也是我們最熟悉的模塊化規範了，這裏就不展開說了。
參考：
https://blog.csdn.net/weixin_40969472/article/details/78646003
http://www.360doc.com/content/19/0519/15/13328254_836725029.shtml
http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html