當(dāng)一個網(wǎng)站復(fù)雜度較高需要多人協(xié)作開發(fā)時履怯，傳統(tǒng)的非模塊化編程模式容易導(dǎo)致代碼沖突和依賴等問題步咪，而模塊化編程的誕生正是為了解決此類問題。然而殖演，在ES6之前，原生JavaScript是不支持模塊化的年鸳，因此就出現(xiàn)了一系列的JavaScript庫來實現(xiàn)此功能趴久，這些庫主要遵循以下三種規(guī)范：
① CommonJS
② AMD
③ CMD
接下來我就粗略地講講這三種規(guī)范。
一阻星、CommonJS規(guī)范
關(guān)鍵詞： module朋鞍，exports已添，require
CommonJS規(guī)范下的模塊調(diào)用是同步的妥箕，也就是說必須等模塊加載完成之后，接下來的代碼才能繼續(xù)運行更舞。因此畦幢，該規(guī)范主要適用于服務(wù)端，因為服務(wù)端可以直接從硬盤中調(diào)用所需要的模塊缆蝉，而這個過程速度是非秤畲校快的。相比之下刊头，通過網(wǎng)絡(luò)調(diào)用所需模塊的瀏覽器客戶端則不適合使用該規(guī)范黍瞧。
目前使用該規(guī)范的典型代表有：Node.js、微信小程序原杂。
下面以Node.js中的兩個小例子印颤，簡單講講CommonJS規(guī)范下的模塊化編程。
1. 無返回值的模塊調(diào)用
//module.js
console.log('這是一個模塊穿肄。');
//main.js
require('./module'); // 或?qū)懗?require('./module.js')年局，但千萬注意不能寫成 require('module')
以上module.js和main.js兩個文件處于同一目錄下际看。
2. 有返回值的模塊調(diào)用
//module.js
function foo(){
console.log('這是一個模塊。');
}
module.exports = { // 此處提供模塊對外接口
foo: foo // 此處對外接口中的方法名不一定要與以上定義的方法名一致矢否，比如可以寫成 func: foo仲闽，那么此時調(diào)用時就應(yīng)該寫成 module.func()
};
//main.js
var module = require('./module.js'); // 加載module模塊
module.foo(); // 此處調(diào)用module模塊下的foo方法，該方法名須與模塊中對外接口方法名一致
二僵朗、AMD規(guī)范
關(guān)鍵詞： define赖欣，require
與CommonJS不同，AMD規(guī)范下的模塊調(diào)用是異步的验庙，主要適用于瀏覽器客戶端畏鼓。
目前使用該規(guī)范的典型代表有：require.js、curl.js壶谒。
下面以require.js為例云矫，簡單講講AMD規(guī)范下的模塊化編程。
<!--HTML-->
<script src="scripts/require.js"></script>
<script src="scripts/main.js" data-main="scripts/main"></script>
1. 無返回值的模塊調(diào)用
//module.js
console.log('這是一個模塊汗菜。');
//main.js
require(['scripts/module']); // 請求的模塊路徑用數(shù)組表示
2. 有返回值的模塊調(diào)用
//module.js
function foo(){
console.log('這是一個模塊让禀。');
}
define(function(){
return {
foo: foo
}
});
//main.js
require(['scripts/module'],function(module){
module.foo();
});
三、CMD規(guī)范
關(guān)鍵詞： use陨界，define巡揍，require，exports菌瘪，module
CMD規(guī)范結(jié)合了以上兩種規(guī)范的特點腮敌，既可以同步調(diào)用，也可以異步調(diào)用俏扩，在語法上也非常相似糜工。
目前使用該規(guī)范的典型代表有：sea.js。
下面就以sea.js為例录淡，簡單講講CMD規(guī)范下的模塊化編程捌木。
<!--HTML-->
<script src="scripts/sea.js"></script>
<!--引入主模塊，模塊根目錄為sea.js所在目錄嫉戚，有點類似于C語言中的main函數(shù)-->
<script type="text/javascript">
seajs.use('main');
</script>
1. 無返回值的模塊調(diào)用
//module.js
console.log('這是一個模塊刨裆。');
//main.js
define(function(require,exports,module){
require('module');
});
這里需要重點說明一下，define()中回調(diào)函數(shù)中所傳參數(shù)名稱不允許修改彬檀。
2. 有返回值的模塊調(diào)用
定義模塊：
//module.js
function foo(){
console.log('這是一個模塊帆啃。');
}
define(function(require,exports,module){
//也可以直接通過return方式暴露模塊接口，這樣就與AMD規(guī)范相同
module.exports = {
foo: foo
}
});
調(diào)用模塊存在同步和異步兩種方式：
① 同步調(diào)用
//main.js
define(function(require,exports,module){
var module = require('module');
module.foo();
});
② 異步調(diào)用
//main.js
define(function(require,exports,module){
require.async('module',function(module){
module.foo();
});
});
本次有關(guān)JavaScript模塊化編程規(guī)范的分享就到這里窍帝，若有不到之處努潘，歡迎指正，謝謝！
