一、CommonJs
1般婆，CommonJS 基本介紹（require導(dǎo)入加載 , exports 輸出,modul.exports輸出）
（1）CommonJS 是一種思想到腥，它是為 JS 的表現(xiàn)來制定規(guī)范。由于 JS 沒有模塊系統(tǒng)蔚袍、標(biāo)準(zhǔn)庫較少乡范、缺乏包管理工具，因此 CommonJS 應(yīng)運而生啤咽。
（2）CommonJS 的目標(biāo)是希望 JS 可以在任何地方運行晋辆，不只是瀏覽器中。只要我們的 JavaScript 是根據(jù) CommonJS API 編寫的宇整，那么就可以在與 CommonJS 兼容的系統(tǒng)上運行瓶佳。
（3）根據(jù) CommonJS API 編寫的 JavaScript 可以做下面這些事情：
- 編寫服務(wù)端應(yīng)用
- 編寫命令行工具
- 編寫基于 GUI 的桌面應(yīng)用
（4）CommonJS 規(guī)范有很多實現(xiàn)，最有名要數(shù) NodeJS 了鳞青。
2霸饲，CommonJS 的模塊規(guī)范
一個文件就是一個模塊索赏，擁有單獨的作用域。普通方式定義的變量贴彼、函數(shù)潜腻、對象都屬于該模塊內(nèi)。
- 通過
require來加載模塊器仗。 - 通過
exports和modul.exports來暴露模塊中的內(nèi)容融涣。
3，使用樣例1：使用 exports 暴露模塊接口
（1）下面我們在 Node.js 中創(chuàng)建一個模塊精钮，文件名為：dog.js
exports.say = function() {
console.log('Hello dog');
}
（2）創(chuàng)建一個 main.js 文件威鹿，引入這個模塊并調(diào)用。
var dog = require('./dog');
dog.say();
4轨香，使用樣例2：使用 modul.exports 暴露模塊對象
var say = function() {
console.log('Hello dog');
}
modul.exports = say // 不可以直接賦值,這樣會報錯的忽你，注意跟exports區(qū)別
modul.exports = { say： say} 或者 modul.exports.say = say}
（2）創(chuàng)建一個 main.js 文件，引入這個模塊并調(diào)用臂容。
var dog = require('./dog');
dog.say();
--------------modul.exports跟exports區(qū)別-------------------待續(xù)----------------------------
二科雳、ES2015(export輸出, import導(dǎo)入加載)
1，ES2015 基本介紹
2015 年 6 月脓杉， ES2015（即 ECMAScript 6糟秘、ES6） 正式發(fā)布。ES2015 是該語言的一個顯著更新球散，也是自 2009 年 ES5 標(biāo)準(zhǔn)確定后的第一個重大更新尿赚。
雖然 ES2015 提出了許多令人激動的新特性，但由于目前 JavaScript 的運行環(huán)境眾多蕉堰，對 ECMAScript 標(biāo)準(zhǔn)的支持程度也不一樣凌净。
2，ES2015 的模塊規(guī)范
- 一個模塊就是一個獨立的文件屋讶。該文件內(nèi)部的所有變量冰寻，外部無法獲取。
-
export命令用于規(guī)定模塊的對外接口丑婿。 -
import命令用于輸入其他模塊提供的功能性雄。 - ES6 模塊的設(shè)計思想是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系羹奉，以及輸入和輸出的變量。
3约计，使用樣例1：使用 export 命令規(guī)定對外接口
（1）下面我們在 Node.js 中創(chuàng)建一個模塊诀拭，文件名為：dog.js
//圓面積計算
export function area(radius) {
return Math.PI * radius * radius;
}
//圓周長計算
export function circumference(radius) {
return 2 * Math.PI * radius;
}
（2）創(chuàng)建一個 main.js 文件，引入這個模塊并調(diào)用煤蚌。這里 import 命令使用大括號的形式加載模塊對外的接口耕挨。
import {area,circumference} from './dog';
console.log('圓面積：' + area(10));
console.log('圓周長：' + circumference(11));
當(dāng)然也可以使用星號（*）指定一個對象细卧，實現(xiàn)模塊的整體加載。
import * as circle from './hangge';
console.log('圓面積：' + circle.area(10));
console.log('圓周長：' + circle.circumference(11));
（3）由于 NodeJS 目前還不支持 ES2015 的 Module筒占，這里我們借助 babel-node 來執(zhí)行贪庙，運行結(jié)果如下
4，使用樣例2：使用 export default 命令來輸出模塊
（1）下面我們使用 export default 命令用于指定模塊的默認(rèn)輸出翰苫。模塊文件名為：dog.js
//圓面積計算（作為默認(rèn)接口）
export default function(radius) {
return Math.PI * radius * radius;
}
//圓周長計算
export function circumference(radius) {
return 2 * Math.PI * radius;
}
（2）創(chuàng)建一個 main.js 文件止邮，引入這個模塊并調(diào)用。注意：對于 export default 指定模塊的默認(rèn)輸出奏窑，import 語句不需要使用大括號导披。
import area, {circumference} from './hangge';
console.log('圓面積：' + area(10));
console.log('圓周長：' + circumference(11));
（3）同樣借助 babel-node 來執(zhí)行，運行結(jié)果如下：
----------------------------------待續(xù)-----------原理-------------------
三埃唯、AMD (define, require)
1撩匕，AMD 基本介紹
- AMD 全稱為 Asynchromous Module Definition（異步模塊定義）
- AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，它是一個在瀏覽器端模塊化開發(fā)的規(guī)范墨叛。
- AMD 模式可以用于瀏覽器環(huán)境并且允許非同步加載模塊止毕，也可以按需動態(tài)加載模塊。
2漠趁，AMD 的模塊規(guī)范
- AMD 通過異步加載模塊滓技。模塊加載不影響后面語句的運行。所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中棚潦。
- AMD 規(guī)范只定義了一個函數(shù) define令漂，通過 define 方法定義模塊。該函數(shù)的描述如下：
define(id?, dependencies?, factory)
id：指定義中模塊的名字（可選）丸边。如果沒有提供該參數(shù)叠必，模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字。
如果提供了該參數(shù)妹窖，模塊名必須是“頂級”的和絕對的（不允許相對名字）纬朝。
dependencies：當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識的數(shù)組字面量（可選）骄呼。
factory：一個需要進(jìn)行實例化的函數(shù)或者一個對象共苛。
- AMD 規(guī)范允許輸出模塊兼容 CommonJS 規(guī)范，這時 define 方法如下：
define(function (require, exports, module) {
var reqModule = require("./someModule");
requModule.test();
exports.asplode = function () {
//someing
}
});
3蜓萄，使用樣例1：獨立模塊
（1）我們使用 RequireJS 定義一個不依賴其他模塊得獨立模塊隅茎，文件名：dog.js
define(function(){
var add = function(x,y) {
return x + y;
};
return {
add : add
}
});
（2）接著創(chuàng)建一個 html 頁面，其內(nèi)部加載并調(diào)用這個模塊嫉沽。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(['dog'], function (m){
console.log(m.add(2,3));
});
</script>
</head>
<body>
</body>
</html>
4辟犀，使用樣例2：存在依賴的函數(shù)式定義
下面定義的模塊又依賴于 cart 和 inventory 這兩個模塊（它們都處在同一個文件夾下）
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
四、CMD( exports 暴露模塊接口绸硕、modul.exports 暴露模塊對象堂竟， seajs.use引入)
1魂毁，CMD 基本介紹
（1）CMD 全稱為 Common Module Definition，它是國內(nèi)玉伯大神在開發(fā) SeaJS 的時候提出來的出嘹。
（2）CMD 與 AMD 挺相近席楚，二者區(qū)別如下：
- 對于依賴的模塊 CMD 是延遲執(zhí)行，而 AMD 是提前執(zhí)行（不過 RequireJS 從 2.0 開始税稼，也改成可以延遲執(zhí)行烦秩。 ）
- CMD 推崇依賴就近，AMD 推崇依賴前置娶聘。
- AMD 的 api 默認(rèn)是一個當(dāng)多個用闻镶，CMD 嚴(yán)格的區(qū)分推崇職責(zé)單一，其每個 API 都簡單純粹丸升。例如：AMD 里 require 分全局的和局部的铆农。CMD 里面沒有全局的 require，提供
seajs.use()來實現(xiàn)模塊系統(tǒng)的加載啟動狡耻。
2墩剖，使用樣例1：使用 exports 暴露模塊接口
（1）下面使用 sea.js 創(chuàng)建一個模塊，文件名為：dog.js
define(function(require, exports) {
// 對外提供name屬性
exports.name = 'hangge';
// 對外提供hello方法
exports.hello = function() {
console.log('Hello hangge.com');
};
});
（2）接著創(chuàng)建一個 html 頁面夷狰，其內(nèi)部加載并調(diào)用這個模塊岭皂。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript">
//加載一個模塊，在加載完成時沼头，執(zhí)行回調(diào)
seajs.use('dog', function(a) {
a.hello();
});
</script>
</head>
<body>
</body>
</html>
3爷绘，使用樣例2：使用 modul.exports 暴露模塊對象
（1）下面我們把一個對象封裝到模塊中，文件名為：dog.js
define(function(require, exports, module) {
// 對外提供接口
module.exports = {
name: 'hangge',
hello: function() {
console.log('Hello hangge.com');
}
};
});
（2）接著創(chuàng)建一個 html 頁面进倍，其內(nèi)部加載并調(diào)用這個模塊土至。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript">
//加載一個模塊，在加載完成時猾昆，執(zhí)行回調(diào)
seajs.use('dog', function(a) {
a.hello();
});
</script>
</head>
<body>
</body>
</html>
-------------------------------------------待續(xù)------------------------------------
