什么是模塊

將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件), 并進行組合在一起
塊的內(nèi)部數(shù)據(jù)與實現(xiàn)是私有的(閉包/封裝), 只是向外部暴露一些接口(方法)與外部其它模塊通信

模塊化的進化過程

• 全局function模式 : 將不同的功能封裝成不同的全局函數(shù)

  • 代碼: 將不同的功能封裝成不同的全局函數(shù)
  • 問題: 污染全局命名空間, 容易引起命名沖突或數(shù)據(jù)不安全，而且模塊成員之間看不出直接關(guān)系(有點像jquery源碼)

function m1(){
  //...
}
function m2(){
  //...
}    

• namespace模式 : 簡單對象封裝

  *作用: 減少了全局變量铭段，解決命名沖突
  *問題: 數(shù)據(jù)不安全(外部可以直接修改模塊內(nèi)部的數(shù)據(jù));變量和方法都仍在一個對象(類)里封裝

let myModule = {
  data: 'www.baidu.com',
  foo() {
    console.log(`foo() ${this.data}`)
  },
  bar() {
    console.log(`bar() ${this.data}`)
  }
}
myModule.data = 'other data' //能直接修改模塊內(nèi)部的數(shù)據(jù)
myModule.foo() // foo() other data

這樣的寫法會暴露所有模塊成員骤宣，內(nèi)部狀態(tài)可以被外部改寫。

• IIFE模式：匿名函數(shù)自調(diào)用(閉包)
  • 作用: 數(shù)據(jù)是私有的, 外部只能通過暴露的方法操作
    *編碼: 將數(shù)據(jù)和行為封裝到一個函數(shù)內(nèi)部, 通過給window添加屬性來向外暴露接口
    問題: 如果當(dāng)前這個模塊依賴另一個模塊怎么辦?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
    myModule.foo()
    myModule.bar()
    console.log(myModule.data) //undefined 不能訪問模塊內(nèi)部數(shù)據(jù)
    myModule.data = 'xxxx' //不是修改的模塊內(nèi)部的data
    myModule.foo() //沒有改變
</script>
// module.js文件
(function(window) {
  let data = 'www.baidu.com'
  //操作數(shù)據(jù)的函數(shù)
  function foo() {
    //用于暴露有函數(shù)
    console.log(`foo() ${data}`)
  }
  function bar() {
    //用于暴露有函數(shù)
    console.log(`bar() ${data}`)
    otherFun() //內(nèi)部調(diào)用
  }
  function otherFun() {
    //內(nèi)部私有的函數(shù)
    console.log('otherFun()')
  }
  //暴露行為
  window.myModule = { foo, bar } //ES6寫法
})(window)

模塊化的好處(解耦)

• 避免命名沖突(減少命名空間污染)
• 更好的分離, 按需加載
• 更高復(fù)用性
• 高可維護性

通常來說序愚，一個文件就是一個模塊，有自己的作用域等限，只向外暴露特定的變量和函數(shù)爸吮。目前流行的js模塊化規(guī)范有CommonJS、AMD望门、CMD以及ES6的模塊系統(tǒng)形娇。

一、CommonJS

Node.js是commonJS規(guī)范的主要實踐者筹误，它有四個重要的環(huán)境變量為模塊化的實現(xiàn)提供支持：module桐早、exports、require厨剪、global哄酝。實際使用時，用module.exports定義當(dāng)前模塊對外輸出的接口（不推薦直接用exports）祷膳，用require加載模塊陶衅。

//m.js中導(dǎo)出：
let name = 'lisi';
let sayHello = () => {
   console.log('hello');
}
module.exports.man = man;
module.exports.sayHello = sayHello;

//index.js導(dǎo)入中：
let person = require('./m.js');
console,log(person)

CommonJS用同步的方式加載模塊。在服務(wù)端直晨，模塊文件都存放在本地磁盤搀军，讀取非常快勇皇，所以這樣做不會有問題罩句。但是在瀏覽器端，限于網(wǎng)絡(luò)原因敛摘，更合理的方案是使用異步加載门烂。

exports和module.export區(qū)別：
exports：對于本身來講是一個變量（對象），它不是module的引用着撩，它是{}的引用诅福，它指向module.exports的{}模塊。只能使用.語法 向外暴露變量拖叙。
module.exports：module是一個變量氓润，指向一塊內(nèi)存，exports是module中的一個屬性薯鳍，存儲在內(nèi)存中咖气，然后exports屬性指向{}模塊挨措。既可以使用.語法，也可以使用=直接賦值崩溪。

AMD和require.js

AMD是Asynchronous Module Definition的縮寫浅役，意思就是"異步模塊定義"。它采用異步方式加載模塊伶唯，模塊的加載不影響它后面語句的運行觉既。所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中乳幸，等到加載完成之后瞪讼，這個回調(diào)函數(shù)才會運行。

AMD也采用require()語句加載模塊粹断，但是require方法是同步的符欠。這對服務(wù)器端不是一個問題，因為所有的模塊都存放在本地硬盤瓶埋，可以同步加載完成希柿，等待時間就是硬盤的讀取時間。但是养筒，對于瀏覽器曾撤，這卻是一個大問題，因為模塊都放在服務(wù)器端闽颇，等待時間取決于網(wǎng)速的快慢盾戴，因此，瀏覽器端的模塊兵多，不能采用"同步加載"尖啡，只能采用"異步加載"。這就是AMD規(guī)范誕生的背景剩膘。
AMD不同于CommonJS衅斩，require()語句加載模塊要求兩個參數(shù)：

require([module], callback);
require(['clock'],function(clock){
  clock.start();
});

requireJs就是AMD規(guī)范的實現(xiàn)

三、CMD和sea.js

CMD(Common Module Definition), 是seajs推崇的規(guī)范怠褐，CMD則是依賴就近畏梆，用的時候再require。它寫起來是這樣的：

//定義沒有依賴的模塊
define(function(require, exports, module){
  exports.xxx = value
  module.exports = value
})
//定義有依賴的模塊
define(function(require, exports, module){
  //引入依賴模塊(同步)
  var module2 = require('./module2')
  //引入依賴模塊(異步)
    require.async('./module3', function (m3) {
    })
  //暴露模塊
  exports.xxx = value
})

//引入使用模塊：
define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})

AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同奈懒，而不是加載的時機或者方式不同奠涌，二者皆為異步加載模塊。
AMD依賴前置磷杏，js可以方便知道依賴模塊是誰溜畅，立即加載；而CMD就近依賴极祸，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K

/** AMD寫法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面聲明并初始化了要用到的所有模塊
    a.doSomething();
    if (false) {
        // 即便沒用到某個模塊 b慈格，但 b 還是提前執(zhí)行了
        b.doSomething()
    } 
});

/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在需要時申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});

/** sea.js **/
// 定義模塊 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加載模塊
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

四怠晴、ES6 Module

ES6模塊的設(shè)計思想是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系浴捆，以及輸入和輸出的變量蒜田。CommonJS和 AMD模塊，都只能在運行時確定這些東西（按需加載）选泻。
其模塊功能主要由兩個命令構(gòu)成：export和import冲粤。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能滔金。

/** 定義模塊 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模塊 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示色解，使用import命令的時候，用戶需要知道所要加載的變量名或函數(shù)名餐茵。其實ES6還提供了export default命令，為模塊指定默認輸出述吸，對應(yīng)的import語句不需要使用大括號忿族。這也更趨近于ADM的引用寫法。

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'

ES6的模塊不是對象蝌矛，import命令會被 JavaScript引擎靜態(tài)分析道批，在編譯時就引入模塊代碼，而不是在代碼運行時加載入撒，所以無法實現(xiàn)條件加載隆豹。也正因為這個，使得靜態(tài)分析成為可能茅逮。

ES6 模塊的特征：

• 嚴格模式：ES6 的模塊自動采用嚴格模式
• import read-only特性： import的屬性是只讀的璃赡，不能賦值，類似于const的特性
• export/import提升： import/export必須位于模塊頂級献雅，不能位于作用域內(nèi)碉考；其次對于模塊內(nèi)的import/export會提升到模塊頂部，這是在編譯階段完成的

ES6 模塊與 CommonJS 模塊的差異

1. CommonJS 模塊輸出的是一個值的拷貝挺身，ES6 模塊輸出的是值的引用侯谁。

• CommonJS 模塊輸出的是值的拷貝，也就是說章钾，一旦輸出一個值墙贱，模塊內(nèi)部的變化就影響不到這個值。
• ES6 模塊的運行機制與 CommonJS 不一樣贱傀。JS 引擎對腳本靜態(tài)分析的時候惨撇，遇到模塊加載命令import，就會生成一個只讀引用窍箍。等到腳本真正執(zhí)行時串纺，再根據(jù)這個只讀引用丽旅，到被加載的那個模塊里面去取值。換句話說纺棺，ES6 的import有點像 Unix 系統(tǒng)的“符號連接”榄笙，原始值變了，import加載的值也會跟著變祷蝌。因此茅撞，ES6 模塊是動態(tài)引用，并且不會緩存值巨朦，模塊里面的變量綁定其所在的模塊米丘。

2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口糊啡。

• 運行時加載: CommonJS 模塊就是對象拄查；即在輸入時是先加載整個模塊，生成一個對象棚蓄，然后再從這個對象上面讀取方法堕扶，這種加載稱為“運行時加載”。

• 編譯時加載: ES6 模塊不是對象梭依，而是通過 export 命令顯式指定輸出的代碼稍算，import時采用靜態(tài)命令的形式。即在import時可以指定加載某個輸出值役拴，而不是加載整個模塊糊探，這種加載稱為“編譯時加載”。

CommonJS 加載的是一個對象（即module.exports屬性）河闰，該對象只有在腳本運行完才會生成科平。而 ES6 模塊不是對象，它的對外接口只是一種靜態(tài)定義淤击，在代碼靜態(tài)解析階段就會生成匠抗。

首先看個CommonJS輸出拷貝的例子：

`// a.js
let a = 1;
let b = { num: 1 }
setTimeout(() => {
    a = 2;
    b = { num: 2 };
}, 200);
module.exports = {
    a,
    b,
};

// main.js
// node main.js
let {a, b} = require('./a');
console.log(a);  // 1
console.log(b);  // { num: 1 }
setTimeout(() => {
    console.log(a);  // 1
    console.log(b);  // { num: 1 }
}, 500);` 

所謂輸出拷貝，NodeJS 或者 webpack 對 CommonJS 的實現(xiàn)（可以看這篇文章）污抬，就會知道：exports對象是模塊內(nèi)外的唯一關(guān)聯(lián)汞贸， CommonJS 輸出的內(nèi)容，就是exports對象的屬性印机，模塊運行結(jié)束矢腻，屬性就確定了。

再看ES6 Module輸出的例子：

`// a.mjs
let a = 1;
let b = { num: 1 }
setTimeout(() => {
    a = 2;
    b = { num: 2 };
}, 200);
export {
    a,
    b,
};

// main.mjs
// node --experimental-modules main.mjs
import {a, b} from './a';
console.log(a);  // 1
console.log(b);  // { num: 1 }
setTimeout(() => {
    console.log(a);  // 2
    console.log(b);  // { num: 2 }
}, 500);` 

以上就是ES6 Module 輸出引用和CommonJS輸出值的區(qū)別射赛，模塊內(nèi)部引用的變化多柑，會反應(yīng)在外部，這是ES6 Module的規(guī)范楣责。

總結(jié)

• AMD/CMD/CommonJs 是js模塊化開發(fā)的規(guī)范竣灌，對應(yīng)的實現(xiàn)是require.js/sea.js/Node.js

• CommonJs 主要針對服務(wù)端聂沙，AMD/CMD/ES Module主要針對瀏覽器端，容易混淆的是AMD/CMD初嘹。

• AMD/CMD區(qū)別专控，雖然都是并行加載js文件则奥，但還是有所區(qū)別，AMD是預(yù)加載狭魂，在并行加載js文件同時洽损，還會解析執(zhí)行該模塊（因為還需要執(zhí)行售葡，所以在加載某個模塊前载慈，這個模塊的依賴模塊需要先加載完成）毅桃；而CMD是懶加載，雖然會一開始就并行加載js文件翁狐，但是不會執(zhí)行类溢，而是在需要的時候才執(zhí)行。

• AMD/CMD的優(yōu)缺點.一個的優(yōu)點就是另一個的缺點露懒， 可以對照瀏覽豌骏。

  • AMD優(yōu)點：加載快速，尤其遇到多個大文件隐锭，因為并行解析，所以同一時間可以解析多個文件计贰。
  • AMD缺點：并行加載钦睡，異步處理，加載順序不一定躁倒，可能會造成一些困擾荞怒，甚至為程序埋下大坑。
  • CMD優(yōu)點：因為只有在使用的時候才會解析執(zhí)行js文件秧秉，因此褐桌，每個JS文件的執(zhí)行順序在代碼中是有體現(xiàn)的，是可控的象迎。
  • CMD缺點：JS是單線程荧嵌，所有JS文件執(zhí)行時間疊加在AMD和CMD中是一樣的。但是CMD是使用時執(zhí)行砾淌，沒法利用空閑時間啦撮，而AMD是文件加載好就執(zhí)行，往往可以利用一些空閑時間汪厨。

• CommonJS和ES Module區(qū)別：CommonJS模塊輸出的是一個值的拷貝赃春，ES6 模塊輸出的是值的引用

• 如何使用？CommonJs的話劫乱，因為NodeJS就是它的實現(xiàn)织中，所以使用 node就行锥涕，也不用引入其他包。AMD則是通過<script>標(biāo)簽引入require.js狭吼，CMD則是引入sea.js