第一階段——無模組化

將所有JS檔案都放在一塊，程式碼執行順序就按照檔案的順序執行。
缺點是汙染全域性作用域。每一個模組都是暴露在全域性中的，容易產生命名衝突。
還有要手動處理各程式碼的依賴關係。

第二階段——commonJS規範

是一個JavaScript模組化的規範，一個檔案就是一個模組，內部定義的變數就屬於這個模組裡的，不會對外暴露，所以不會汙染全域性變數。

1. 通過require引入模組
2. 通過module.exports匯出模組

//a.js
var num = 100;
var add = function(val){
   return val + num
}
module.exports.num = num;
module.exports.add = add ;
//b.js
var moduleA = require('./a.js')
var fn = moduleA.add;
 

3. 同步載入模組，等當前模組載入完成了才進行下一步，伺服器端檔案都是儲存在硬碟上，所以同步載入沒問題。但是瀏覽器上，需要把檔案從伺服器端請求過來，比較慢，所以同步載入不適合用在瀏覽器上

第三階段——AMD規範

因為commonJS規範不適用於瀏覽器，因為要從伺服器載入檔案，不能用同步模式，所以有了AMD規範，該規範的實現，就是requireJs了。

define(function () {
    var alertName = function (str) {
      alert("I am " + str);
    }
    var alertAge = function (num) {
      alert("I am " + num + " years old");
    }
    return {
      alertName: alertName,
      alertAge: alertAge
    };
  });
//引入模組：
require(['alert'], function (alert) {
  alert.alertName('JohnZhu');
  alert.alertAge(21);
});
 

依賴前置，require([dep1, dep2],callback)，先載入依賴再執行回撥函式
優點是可以在瀏覽器環境中非同步載入模組，而且可以並行載入多個模組

第四階段——CMD規範

和requirejs非常類似，即一個js檔案就是一個模組，但是可以通過按需載入的方式，而不是必須在模組開始就載入所有的依賴。

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})
 

第五階段——ES6的模組化

使用ES6的語法，export和import實現模組化，用的比較多就不介紹了。缺點是瀏覽器暫不支援，需要babel編譯過

特殊規範——UMD

相容AMD，CommonJS 模組化語法。
總結：