JS模塊化開發規范，以下介紹三種
commonJS規范（Nodejs模塊系統遵循此規范，適用於服務端）
1、 規范定義
CommonJS規范規定，一個文件就是一個模塊，用module變量代表當前模塊。 Node在其內部提供一個Module的構建函數。所有模塊都是Module的實例
2、 module.exports屬性定義模塊
module.exports屬性表示當前模塊對外輸出的接口，其他文件加載該模塊，實際上就是讀取module.exports變量。
//moduleA.js
module.exports.funcA= function(){
console.log('This is moduleA!');
}
3、模塊引用
require函數的基本功能是，讀入並執行一個JavaScript文件，然后返回該模塊的exports對象。在moduleB模塊中加載引入moduleA模塊，便可以使用funA方法了，示例代碼如下：
//moduleB.js
var a = require('./moduleA');
a.funcA();//打印'This is moduleA!'
AMD規范（RequireJs JS模塊加載器遵循此規范，適用於瀏覽器）
1、定義模塊：define方法 define(id?, [deps,]?, factory);
l 第一個參數，id（名字），是個字符串。它指的是定義中模塊的名字，這個參數是可選的。如果沒有提供該參數，模塊的名字應該默認為模塊加載器請求的指定腳本的名字。如果提供了該參數，模塊名必須是“頂級”的和絕對的（不允許相對名字）。
l 第二個參數，dependencies（依賴），是個定義中模塊所依賴模塊的數組。依賴模塊必須根據模塊的工廠方法優先級執行，並且執行的結果應該按照依賴數組中的位置順序以參數的形式傳入（定義中模塊的）工廠方法中。
l 第三個參數，factory（工廠方法），為模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值。
2、require方法：加載模塊require([module], callback);
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：
require(['a'], function (a) {
a.FuncA();
});
//js/index.js(requirejs的使用)
<script data-main="js/ctr/index" src="js/lib/require.js" type="text/javascript"></script>
require.config({
//baseUrl——用於加載模塊的根路徑。
//paths——用於映射不存在根路徑下面的模塊路徑。
//shims——配置在腳本/模塊外面並沒有使用RequireJS的函數依賴並且初始化函數。
//deps——加載依賴關系數組
baseUrl : "js",
paths: {
'jquery': '../lib/jquery'
},
shim: {//加載非AMD規范的模塊
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"],//deps數組，表明該模塊的依賴性
exports: 'jqueryForm'
}
}
});
require(['jquery'], function($) {
$(document).on('click', '#clickBtn', function() {
$('#showMsg').html('看看jquery加載進來了沒有');
});
});
CMD規范（seaJS 模塊加載器）
1、規范定義
CMD是國內大牛玉伯在開發SeaJS的時候提出來的，屬於CommonJS的一種規范，根據瀏覽器的異步環境做了自己的實現。它和 AMD 很相似，盡量保持簡單，並與 CommonJS 和 Node.js 的 Modules 規范保持了很大的兼容性。
2、define方法：定義模塊 define( id?, [deps,]?, factory ); 前兩個參數項可選
define('hello', ['jquery'], function(require, exports, module) {
// 模塊代碼
});
3、require方法：加載模塊
1.require 是同步往下執行，require.async 則是異步回調執行。require.async 一般用來加載可延遲異步加載的模塊。
2.除了給 exports 對象增加成員，還可以使用 return 直接向外提供接口
3.module.exports 的賦值需要同步執行，不能放在回調函數里。
4.exports 是 module.exports 的一個引用
define(function(require, exports, module) {
// 錯誤用法,對 module.exports 的賦值需要同步執行，不能放在回調函數里。
setTimeout(function() {
module.exports = { a: "hello" };
}, 0);
// 異步加載模塊，在加載完成時，執行回調
require.async(['./c', './d'], function(c, d) {
c.doSomething();
d.doSomething();
});
//向外暴露接口的方法3種
// 1.給 module.exports 賦值
module.exports = new SomeClass();
// 2.給 exports 對象增加成員
exports.doSomething = function() {};
// 3.通過 return 直接提供接口
return {
foo: 'bar',
doSomething: function() {}
};
});
//js/index.js(seajs的使用)
define(function(require, exports, module) {
// var $ = require("$");
module.exports= {
init: function() {
console.log('index.js is loaded!');
}
};
});
seajs.config({
base: "./js/lib/",// Sea.js 的基礎路徑
alias: {// 別名配置
'$':'jquery/1.12.3/jquery-1.12.3',
'jquery':'jquery/1.12.3/jquery-1.12.3',
},
paths: {// 路徑配置
'basePath': './js/lib/'
},
vars: {// 變量配置
'jquery_version': 'jquery-1.12.3'
},
map: [// 映射配置
[ '.js', '-debug.js' ]
],
preload: ['$'], //預加載項'$'
debug: true,// 調試模式
charset: 'utf-8'// 文件編碼
});
seajs.use(['$','./js/ctr/index.js'], function($,index) {
$(document).ready(function(){
index.init();
});
});