FE.ES-JavaScript的模塊化歷史

模塊化以前的JavaScript

//Global污染，命名污染
function foo(){}

//命名空間 NameSpace模式
var Module= {
    foo: function(){},
}
Module.foo();
//減小Global上變量數量，但仍不安全

//匿名閉包 IIFE模式
var Module = (function(global){
    var _private = $("body");
    var foo = function(){console.log(_private)}
    return {
        foo: foo
    }
})($)
Module.foo();
Module._private; // undefined

COMMONJS

Node 應用由模塊組成，採用 CommonJS 模塊規範。每一個文件就是一個模塊，有本身的做用域。在一個文件裏面定義的變量、函數、類，都是私有的，對其餘文件不可見。在服務器端，模塊的加載是運行時同步加載的；在瀏覽器端，模塊須要提早編譯打包處理。

• 全部代碼都運行在模塊做用域，不會污染全局做用域。
• 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。
• 模塊加載的順序，按照其在代碼中出現的順序。

//add.js
module.exports.add = function(a, b) {
  return a + b;
};
//main.js
const add = require("./add.js").add;
module.exports.square_difference = function(a, b) {
  return add(a, b) * decrease(a, b);
};

AMD

（Asynchronous Module Definition 異步加載模塊定義 ）
用於瀏覽器端，異步加載，依賴前置（提早加載）其核心接口是：define(id?, dependencies?, factory)

//require.js
var a = require("./a");
a.doSomething();
var b = require("./b")
b.doSomething();
// AMD recommended style
define(["a", "b"], function(a, b){
    a.doSomething();
    b.doSomething();
})

AMD規範以後又容許輸出模塊兼容CommonJS規範和依賴後置，代碼和下面的cmd同樣。

CMD

（Common Module Definition 通用模塊定義 ）
用於瀏覽器端，異步加載，依賴就近。

//sea.js
define(function(require, exports, module){
    var a = require("a");
    a.doSomething();
    var b = require("b");
    b.doSomething();    // 依賴就近，延遲執行
})

UMD

相似於兼容 CommonJS 和 AMD 的語法糖

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {// AMD
        define(['b'], function (b) {
            return (root.returnExportsGlobal = factory(b));
        });
    } else if (typeof module === 'object' && module.exports) {// CommonJS. (Node)
        module.exports = factory(require('b'));
    } else {// Browser globals
        root.returnExportsGlobal = factory(root.b);
    }
}(typeof self !== 'undefined' ? self : this, function (b) {
    return {};
}));

ES Moulde

import XXX from './a.js'
export function a() {}
//export default function() {}

對比 CommonJS 和 ES6 循環依賴處理

在 CommonJS 規範中，當遇到 require() 語句時，會執行 require 模塊中的代碼，並緩存執行的結果，當下次再次加載時不會重複執行，而是直接取緩存的結果。
ES6 中,import 優先於模塊內的其餘內容執行。export與其對應的值是動態綁定關係，實時取到模塊內部的值。

參考資料：
前端模塊化詳解
模塊系統
探索 JavaScript 中的依賴管理及循環依賴