發(fā)展過程
CommonJS吉捶、AMD皆尔、CMD、requeir珊拼， moudle.exports流炕， exports，import剑辫，export...原地爆炸...
先從時(shí)間線上大概對(duì)這幾種規(guī)范有個(gè)大致了解
- 2009 -> CommonJS
- 2010 -> AMD規(guī)范
- 2011 -> CMD規(guī)范
- 2015 -> ES6 Module
CommonJS
CommonJS規(guī)范誕生比較早渠欺，Mozilla工程師Kevin Dangoo在2009年發(fā)起，它出現(xiàn)的目的是希望JS可以運(yùn)行到更多地方胳岂，主要是服務(wù)端舔稀，前期的nodejs采用了這種規(guī)范。
用法示例
module.exports或exports負(fù)責(zé)對(duì)外暴漏數(shù)據(jù)产园，require來引入
<!--a.js-->
module.exports = {
name: '四大名將'
}
<!--也可以用exports導(dǎo)出-->
<!--export.name = '四大名將'-->
<!--b.js-->
const res = require('./a.js')
console.log(res.name) // 四大名將
module.exports 和 exports的區(qū)別
乍一看，還以為CommonJS提供了兩種方法來導(dǎo)出數(shù)據(jù)断箫，其實(shí)不然秋冰，require并不認(rèn)識(shí)exports剑勾，之所以它也好使，那是因?yàn)槟K內(nèi)部這些代碼的作用虽另。
var module = {
exports: {
<!--導(dǎo)出的內(nèi)容-->
}
}
var exports = module.exports
return module.exports
require方能看到的只有module.exports這個(gè)對(duì)象捂刺，它是看不到exports這個(gè)對(duì)象的，而我們?cè)诰帉懩K時(shí)用到的exports實(shí)際上是對(duì)module.exports的引用森缠。
舉個(gè)例子
<!--a.js-->
exports = {
name: '四大名將'
}
如果這樣導(dǎo)出仪缸，exports被重新賦值，指向的地址便不再是module.exports宾茂，所以此時(shí)的exports失去了它的導(dǎo)出功能拴还，只會(huì)導(dǎo)出一個(gè)默認(rèn)空對(duì)象
AMD (Asynchronous Module Definition)
AMD規(guī)范在2010由requireJS提出，CommonJS規(guī)范主要是彌補(bǔ)服務(wù)端的模塊化機(jī)制坟奥，不像服務(wù)器加載速度很快拇厢，客戶端加載時(shí)需要等待晒喷，可能存在假死情況凉敲，鑒于瀏覽器的特殊情況寺旺，AMD規(guī)范出來了势决，它采用異步方式加載模塊定義的所有依賴，在依賴加載完成后再執(zhí)行回調(diào)函數(shù)陈莽。
define([module-name?], [dependencies?], [factory])
- module-name:字符串虽抄，模塊名稱(可選)
- dependencies:要載入的依賴模塊(可選)，數(shù)組格式私植，相對(duì)路徑
- factory: 工廠方法车酣，返回一個(gè)模塊函數(shù)
<!-- 定義模塊 -->
<!-- AMD中require的模塊會(huì)先加載完成 依賴前置 提前執(zhí)行 -->
define('module', ['dep1', 'dep2'], function(dep1, dep2){
function foo(){
dep1.doSomething();
dep2.doSomething();
}
return {
foo : foo
};
})
<!-- 數(shù)組中聲明需要加載的模塊湖员，可以是模塊名、js文件路徑 -->
<!-- 兩個(gè)參數(shù)：加載的模塊清女，加載成功后的回調(diào)函數(shù) -->
require(['module'], function(module){
module.foo()
});
CMD (Common Module Definition)
CMD規(guī)范在2011年由seaJS提出晰筛，CMD規(guī)范和AMD規(guī)范類似，主要區(qū)別是CMD規(guī)范是就近加載依賴曙博，延遲執(zhí)行怜瞒，只有到require時(shí)依賴才執(zhí)行。
<!-- a.js -->
define(function(require, exports, module) {
function foo(){
<!-- require的模塊此時(shí)才會(huì)執(zhí)行 依賴就近 延遲執(zhí)行 而AMD中依賴是前置的 一開始就全都執(zhí)行完畢了 -->
var dep1 = require('dep1')
dep1.doSomething();
}
<!--暴漏給外部調(diào)用-->
exports.foo = foo
/** return或者exports都行
return {
foo : foo
};
**/
});
<!-- b.js -->
seajs.use("./a", function(a){
a.foo()
});
ES6 Module
2015年es6橫空出世惠窄，引入了新特性 ES Module漾橙，諸如export, import等命令霜运。
es6的module比較常用蒋腮，貼一個(gè)阮一峰的es6鏈接ES6 Module
最后藕各，圣誕快樂～
