主要針對(duì)CommonJs和ES6 Module進(jìn)行學(xué)習(xí)
commonJS
一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域逝撬，也就是說戴质，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取式撼，除非定義為global對(duì)象的屬性童社。
輸出模塊變量的最好方法是使用module.exports對(duì)象。
加載模塊使用require方法著隆，該方法讀取一個(gè)文件并執(zhí)行扰楼，返回文件內(nèi)部的module.exports對(duì)象
commonJS用同步的方式加載模塊。在服務(wù)端美浦，模塊文件都存在本地磁盤弦赖，讀取非常快浦辨，所以這樣做不會(huì)有問題蹬竖。但是在瀏覽器端，限于網(wǎng)絡(luò)原因流酬，更合理的方案是使用異步加載币厕，所以在瀏覽器端一般就不使用commonJS了
CommonJS規(guī)范規(guī)定，每個(gè)模塊內(nèi)部芽腾，module變量代表當(dāng)前模塊旦装。這個(gè)變量是一個(gè)對(duì)象，它的exports屬性（即module.exports）是對(duì)外的接口摊滔。加載某個(gè)模塊同辣，其實(shí)是加載該模塊的module.exports屬性。
var x = 5;
var addX = function (value) {
return value + x;
};
//一個(gè)一個(gè) 導(dǎo)出
module.exports.x = x;
module.exports.addX = addX;
//整體導(dǎo)出
module.exports = { x: x, addX:addX }
上面代碼通過module.exports輸出變量x和函數(shù)addX惭载。require方法用于加載模塊旱函。
var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6
為了方便，Node為每個(gè)模塊提供一個(gè)exports變量描滔，指向module.exports棒妨。這等同在每個(gè)模塊頭部，有一行這樣的命令含长。
var exports = module.exports;
造成的結(jié)果是券腔，在對(duì)外輸出模塊接口時(shí)，可以向exports對(duì)象添加方法拘泞。
exports.area = function (r) {
return Math.PI * r * r;
};
exports.circumference = function (r) {
return 2 * Math.PI * r;
};
ES6 Module
ES6 Module主要由兩個(gè)命令構(gòu)成：export和import纷纫。
export命令：用于規(guī)定模塊的對(duì)外接口
import命令：用于輸入其他模塊提供的功能。
export命令
一個(gè)模塊就是一個(gè)獨(dú)立的文件陪腌。該文件內(nèi)部的所有變量辱魁，外部無法獲取烟瞧。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
export命令除了輸出變量染簇，還可以輸出函數(shù)或類（class）:
export function multiply(x, y) {
return x * y;
};
需要特別注意的是参滴，export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系锻弓。
// 報(bào)錯(cuò)
export 1;
// 報(bào)錯(cuò)
var m = 1;
export m;
正確的寫法為：
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
// function和class的輸出砾赔，也必須遵守這樣的寫法
// 報(bào)錯(cuò)
function f() {}
export f;
// 正確
export function f() {};
// 正確
function f() {}
export {f};
import 命令
使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過import命令加載這個(gè)模塊青灼。
// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
如果想為輸入的變量重新取一個(gè)名字暴心，import命令要使用as關(guān)鍵字，將輸入的變量重命名杂拨。
import { lastName as surname } from './profile.js';
export default 命令
從前面的例子可以看出专普，使用import命令的時(shí)候，用戶需要知道所要加載的變量名或函數(shù)名扳躬，否則無法加載脆诉。但是甚亭，用戶肯定希望快速上手贷币，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法亏狰。
為了給用戶提供方便役纹，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令暇唾，為模塊指定默認(rèn)輸出促脉。
// export-default.js
export default function () {
console.log('foo');
}
上面代碼是一個(gè)模塊文件export-default.js，它的默認(rèn)輸出是一個(gè)函數(shù)策州。
其他模塊加載該模塊時(shí)瘸味，import命令可以為該匿名函數(shù)指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面代碼的import命令够挂，可以用任意名稱指向export-default.js輸出的方法旁仿，這時(shí)就不需要知道原模塊輸出的函數(shù)名。需要注意的是孽糖，這時(shí)import命令后面枯冈，不使用大括號(hào)。
export default命令用在非匿名函數(shù)前办悟，也是可以的
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者寫成
function foo() {
console.log('foo');
}
export default foo;
上面代碼中尘奏，foo函數(shù)的函數(shù)名foo，在模塊外部是無效的病蛉。加載的時(shí)候炫加，視同匿名函數(shù)加載瑰煎。
參考：Module的語法
CommonJs和 ES6 Module 的區(qū)別
CommonJs導(dǎo)出的是變量的一份拷貝，ES6 Module導(dǎo)出的是變量的綁定（export default 是特殊的）
CommonJs是單個(gè)值導(dǎo)出琢感，ES6 Module可以導(dǎo)出多個(gè)
CommonJs是動(dòng)態(tài)語法可以寫在判斷里丢间，ES6 Module靜態(tài)語法只能寫在頂層
CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口驹针。
ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化烘挫，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量柬甥。CommonJS 和 AMD 模塊饮六，都只能在運(yùn)行時(shí)確定這些東西。比如苛蒲，CommonJS 模塊就是對(duì)象卤橄，輸入時(shí)必須查找對(duì)象屬性。
// CommonJS模塊
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
上面代碼的實(shí)質(zhì)是整體加載fs模塊（即加載fs的所有方法）臂外，生成一個(gè)對(duì)象（_fs）窟扑，然后再從這個(gè)對(duì)象上面讀取 3 個(gè)方法。這種加載稱為“運(yùn)行時(shí)加載”漏健，因?yàn)橹挥羞\(yùn)行時(shí)才能得到這個(gè)對(duì)象嚎货，導(dǎo)致完全沒辦法在編譯時(shí)做“靜態(tài)優(yōu)化”。
ES6 模塊不是對(duì)象蔫浆，而是通過export命令顯式指定輸出的代碼殖属，再通過import命令輸入。
// ES6模塊
import { stat, exists, readFile } from 'fs';
上面代碼的實(shí)質(zhì)是從fs模塊加載 3 個(gè)方法瓦盛，其他方法不加載洗显。這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載，即 ES6 可以在編譯時(shí)就完成模塊加載原环，效率要比 CommonJS 模塊的加載方式高挠唆。當(dāng)然，這也導(dǎo)致了沒法引用 ES6 模塊本身嘱吗，因?yàn)樗皇菍?duì)象玄组。
AMD與CMD的比較
AMD：依賴前置，預(yù)執(zhí)行（異步加載：依賴先執(zhí)行）;偏瀏覽器端柜与。
CMD：依賴就近巧勤，懶（延遲）執(zhí)行（運(yùn)行到需加載，根據(jù)順序執(zhí)行）弄匕；偏l瀏覽器端颅悉。
AMD用戶體驗(yàn)好，因?yàn)闆]有延遲迁匠，依賴模塊提前執(zhí)行了; CMD性能好剩瓶，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行
CommonJs用在服務(wù)器端驹溃，AMD和CMD用在瀏覽器環(huán)境
AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出延曙。
AMD:提前執(zhí)行（異步加載：依賴先執(zhí)行）+ 延遲執(zhí)行
CMD:延遲執(zhí)行（運(yùn)行到需加載豌鹤，根據(jù)順序執(zhí)行）
