JS模塊規範：AMD、UMD、CMD、commonJS、ES6 module

commonJS

• 特色：

一、模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。
二、模塊加載會阻塞接下來代碼的執行，須要等到模塊加載完成才能繼續執行——同步加載。

• 環境：服務器環境
• 應用：nodejs的模塊規範是參照commonJS實現的。
• 語法：

一、導入：require('路徑')
二、導出：module.exports和exports

• 注意：module.exports和exports的的區別是exports只是對module.exports的一個引用，至關於Node爲每一個模塊提供一個exports變量，指向module.exports。這等同在每一個模塊頭部，有一行var exports = module.exports;這樣的命令。
• demo

// a.js
// 至關於這裏還有一行：var exports = module.exports;代碼
exports.a = 'Hello world';  // 至關於：module.exports.a = 'Hello world';

// b.js
var moduleA = require('./a.js');
console.log(moduleA.a);     // 打印出hello world

AMD

• 特色：

一、異步加載
二、管理模塊之間的依賴性，便於代碼的編寫和維護。

• 環境：瀏覽器環境
• 應用：requireJS是參照AMD規範實現的
• 語法：

一、導入：require(['模塊名稱'], function ('模塊變量引用'){// 代碼});
三、導出：define(function (){return '值');

• demo

// a.js
define(function (){
　　return {
　　　a:'hello world'
　　}
});
// b.js
require(['./a.js'], function (moduleA){
    console.log(moduleA.a); // 打印出：hello world
});

CMD

• 特色

一、CMD是在AMD基礎上改進的一種規範，和AMD不一樣在於對依賴模塊的執行時機處理不一樣，CMD是就近依賴，而AMD是前置依賴。

• 環境：瀏覽器環境
• 應用：seajs是參照UMD規範實現的，requireJS的最新的幾個版本也是部分參照了UMD規範的實現
• 語法：

一、導入：define(function(require, exports, module) {});
二、導出：define(function (){return '值');

• demo

// a.js
define(function (require, exports, module){
　　exports.a = 'hello world';
});
// b.js
define(function (require, exports, module){
    var moduleA = require('./a.js');
    console.log(moduleA.a); // 打印出：hello world
});

UMD

• 特色：

一、兼容AMD和commonJS規範的同時，還兼容全局引用的方式

• 環境：瀏覽器或服務器環境
• 應用：無
• 語法：

一、無導入導出規範，只有以下的一個常規寫法：

• 常規寫法：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之類的
        module.exports = factory(require('jquery'));
    } else {
        //瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

ES6 module

• 特色：

一、按需加載（編譯時加載）
二、import和export命令只能在模塊的頂層，不能在代碼塊之中（如：if語句中）,import()語句能夠在代碼塊中實現異步動態按需動態加載

• 環境：瀏覽器或服務器環境（之後可能支持）
• 應用：ES6的最新語法支持規範
• 語法：

一、導入：import {模塊名A，模塊名B...} from '模塊路徑'
二、導出：export和export default
三、import('模塊路徑').then()方法

• 注意：export只支持對象形式導出，不支持值的導出，export default命令用於指定模塊的默認輸出，只支持值導出，可是隻能指定一個，本質上它就是輸出一個叫作default的變量或方法。
• 規範：

/*錯誤的寫法*/
// 寫法一
export 1;

// 寫法二
var m = 1;
export m;

// 寫法三
if (x === 2) {
  import MyModual from './myModual';
}

/*正確的三種寫法*/
// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

// 寫法四
var n = 1;
export default n;

// 寫法五
if (true) {
    import('./myModule.js')
    .then(({export1, export2}) => {
      // ...·
    });
}

// 寫法六
Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});