資訊專欄INFORMATION COLUMN
摘要：感謝感謝和在推動(dòng)模塊化發(fā)展方面做出的貢獻(xiàn)。與引用阮一峰老師的標(biāo)準(zhǔn)參考教程規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。規(guī)定了新的模塊加載方案。與引用阮一峰老師的入門它們有兩個(gè)重大差異。
前言
本篇我們重點(diǎn)介紹以下四種模塊加載規(guī)范：
AMD
CMD
CommonJS
ES6 模塊
最后再延伸講下 Babel 的編譯和 webpack 的打包原理。
require.js在了解 AMD 規(guī)范之前，我們先來看看 require.js 的使用方式。
項(xiàng)目目錄為：
* project/
* index.html
* vender/
* main.js
* require.js
* add.js
* square.js
* multiply.js
index.html 的內(nèi)容如下：
require.js
Content
data-main="vender/main" 表示主模塊是 vender 下的 main.js。
main.js 的配置如下：
// main.js
require(["./add", "./square"], function(addModule, squareModule) {
console.log(addModule.add(1, 1))
console.log(squareModule.square(3))
});
require 的第一個(gè)參數(shù)表示依賴的模塊的路徑，第二個(gè)參數(shù)表示此模塊的內(nèi)容。
由此可以看出，主模塊依賴 add 模塊和 square 模塊。
我們看下 add 模塊即 add.js 的內(nèi)容：
// add.js
define(function() {
console.log("加載了 add 模塊");
var add = function(x, y) {
return x + y;
};
return {
add: add
};
});
requirejs 為全局添加了 define 函數(shù)，你只要按照這種約定的方式書寫這個(gè)模塊即可。
那如果依賴的模塊又依賴了其他模塊呢？
我們來看看主模塊依賴的 square 模塊， square 模塊的作用是求出一個(gè)數(shù)字的平方，比如輸入 3 就返回 9，該模塊依賴一個(gè)乘法模塊，該乘法模塊即 multiply.js 的代碼如下：
// multiply.js
define(function() {
console.log("加載了 multiply 模塊")
var multiply = function(x, y) {
return x * y;
};
return {
multiply: multiply
};
});
而 square 模塊就要用到 multiply 模塊，其實(shí)寫法跟 main.js 添加依賴模塊一樣：
// square.js
define(["./multiply"], function(multiplyModule) {
console.log("加載了 square 模塊")
return {
square: function(num) {
return multiplyModule.multiply(num, num)
}
};
});
require.js 會(huì)自動(dòng)分析依賴關(guān)系，將需要加載的模塊正確加載。
requirejs 項(xiàng)目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/requirejs
而如果我們?cè)跒g覽器中打開 index.html，打印的順序?yàn)椋?/p>
加載了 add 模塊 加載了 multiply 模塊 加載了 square 模塊 2 9AMD
在上節(jié)，我們說了這樣一句話：
requirejs 為全局添加了 define 函數(shù)，你只要按照這種約定的方式書寫這個(gè)模塊即可。
那這個(gè)約定的書寫方式是指什么呢？
指的便是 The Asynchronous Module Definition (AMD) 規(guī)范。
所以其實(shí) AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
你去看 AMD 規(guī)范) 的內(nèi)容，其主要內(nèi)容就是定義了 define 函數(shù)該如何書寫，只要你按照這個(gè)規(guī)范書寫模塊和依賴，require.js 就能正確的進(jìn)行解析。
sea.js在國(guó)內(nèi)，經(jīng)常與 AMD 被一起提起的還有 CMD，CMD 又是什么呢？我們從 sea.js 的使用開始說起。
文件目錄與 requirejs 項(xiàng)目目錄相同:
* project/
* index.html
* vender/
* main.js
* require.js
* add.js
* square.js
* multiply.js
index.html 的內(nèi)容如下：
sea.js
Content
main.js 的內(nèi)容如下：
// main.js
define(function(require, exports, module) {
var addModule = require("./add");
console.log(addModule.add(1, 1))
var squareModule = require("./square");
console.log(squareModule.square(3))
});
add.js 的內(nèi)容如下：
// add.js
define(function(require, exports, module) {
console.log("加載了 add 模塊")
var add = function(x, y) {
return x + y;
};
module.exports = {
add: add
};
});
square.js 的內(nèi)容如下：
define(function(require, exports, module) {
console.log("加載了 square 模塊")
var multiplyModule = require("./multiply");
module.exports = {
square: function(num) {
return multiplyModule.multiply(num, num)
}
};
});
multiply.js 的內(nèi)容如下：
define(function(require, exports, module) {
console.log("加載了 multiply 模塊")
var multiply = function(x, y) {
return x * y;
};
module.exports = {
multiply: multiply
};
});
跟第一個(gè)例子是同樣的依賴結(jié)構(gòu)，即 main 依賴 add 和 square，square 又依賴 multiply。
seajs 項(xiàng)目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/seajs
而如果我們?cè)跒g覽器中打開 index.html，打印的順序?yàn)椋?/p>
加載了 add 模塊 2 加載了 square 模塊 加載了 multiply 模塊 9CMD
與 AMD 一樣，CMD 其實(shí)就是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
你去看 CMD 規(guī)范的內(nèi)容，主要內(nèi)容就是描述該如何定義模塊，如何引入模塊，如何導(dǎo)出模塊，只要你按照這個(gè)規(guī)范書寫代碼，sea.js 就能正確的進(jìn)行解析。
AMD 與 CMD 的區(qū)別從 sea.js 和 require.js 的例子可以看出：
1.CMD 推崇依賴就近，AMD 推崇依賴前置?？磧蓚€(gè)項(xiàng)目中的 main.js：
// require.js 例子中的 main.js
// 依賴必須一開始就寫好
require(["./add", "./square"], function(addModule, squareModule) {
console.log(addModule.add(1, 1))
console.log(squareModule.square(3))
});
// sea.js 例子中的 main.js
define(function(require, exports, module) {
var addModule = require("./add");
console.log(addModule.add(1, 1))
// 依賴可以就近書寫
var squareModule = require("./square");
console.log(squareModule.square(3))
});
2.對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行?？磧蓚€(gè)項(xiàng)目中的打印順序：
// require.js 加載了 add 模塊 加載了 multiply 模塊 加載了 square 模塊 2 9
// sea.js 加載了 add 模塊 2 加載了 square 模塊 加載了 multiply 模塊 9
AMD 是將需要使用的模塊先加載完再執(zhí)行代碼，而 CMD 是在 require 的時(shí)候才去加載模塊文件，加載完再接著執(zhí)行。
感謝感謝 require.js 和 sea.js 在推動(dòng) JavaScript 模塊化發(fā)展方面做出的貢獻(xiàn)。
CommonJSAMD 和 CMD 都是用于瀏覽器端的模塊規(guī)范，而在服務(wù)器端比如 node，采用的則是 CommonJS 規(guī)范。
導(dǎo)出模塊的方式：
var add = function(x, y) {
return x + y;
};
module.exports.add = add;
引入模塊的方式：
var add = require("./add.js");
console.log(add.add(1, 1));
我們將之前的例子改成 CommonJS 規(guī)范：
// main.js
var add = require("./add.js");
console.log(add.add(1, 1))
var square = require("./square.js");
console.log(square.square(3));
// add.js
console.log("加載了 add 模塊")
var add = function(x, y) {
return x + y;
};
module.exports.add = add;
// multiply.js
console.log("加載了 multiply 模塊")
var multiply = function(x, y) {
return x * y;
};
module.exports.multiply = multiply;
// square.js
console.log("加載了 square 模塊")
var multiply = require("./multiply.js");
var square = function(num) {
return multiply.multiply(num, num);
};
module.exports.square = square;
CommonJS 項(xiàng)目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/commonJS
如果我們執(zhí)行 node main.js，打印的順序?yàn)椋?/p>
加載了 add 模塊 2 加載了 square 模塊 加載了 multiply 模塊 9
跟 sea.js 的執(zhí)行結(jié)果一致，也是在 require 的時(shí)候才去加載模塊文件，加載完再接著執(zhí)行。
CommonJS 與 AMD引用阮一峰老師的《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》:
CommonJS 規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。ES6AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。
由于 Node.js 主要用于服務(wù)器編程，模塊文件一般都已經(jīng)存在于本地硬盤，所以加載起來比較快，不用考慮非同步加載的方式，所以 CommonJS 規(guī)范比較適用。
但是，如果是瀏覽器環(huán)境，要從服務(wù)器端加載模塊，這時(shí)就必須采用非同步模式，因此瀏覽器端一般采用 AMD 規(guī)范。
ECMAScript2015 規(guī)定了新的模塊加載方案。
導(dǎo)出模塊的方式：
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;
export {firstName, lastName, year};
引入模塊的方式：
import {firstName, lastName, year} from "./profile";
我們?cè)賹⑸厦娴睦痈某?ES6 規(guī)范：
目錄結(jié)構(gòu)與 requirejs 和 seajs 目錄結(jié)構(gòu)一致。
ES6
Content
注意！瀏覽器加載 ES6 模塊，也使用