CommonJS、AMD、CMD、ES Module 一文流

時間軸：CommonJS --> AMD --> CMD --> ES Module

CommonJS

• 常用於：伺服器端，node，webpack
• 特點：同步/執行時載入，磁碟讀取速度快

• 語法：

  // 1. 匯出：通過module.exports或exports來暴露模組
  module.exports = {
    attr1,
    attr2
  }
  exports.attr = xx
  
  **注意**
  不可以 exports = xxx，這樣寫會無效，因為更改了exports的地址
  而 exports 是 module.exports 的引用指向的是同一個記憶體，模組最後匯出的是module.exports
  
  // 2. 引用：require('x')
  
  const xx = require('xx') // 整體重新命名
  const { attr } = require('xx') // 解構某一個匯出
  

AMD

• 常用於：不常用，CommonJs的瀏覽器端實現

• 特點：

  • 非同步載入：因為面向瀏覽器端，為了不影響渲染肯定是非同步載入
  • 依賴前置：所有的依賴必須寫在最初的依賴陣列中，速度快，但是會浪費資源，預先載入了所有依賴不管你是否用到

• 語法：

  // 1. 匯出：通過define來定義模組
  // 如果該模組還依賴其他模組，則將模組的路徑填入第一個引數的陣列中
  
  define(['x'], function(x){  
    function foo(){  
        return x.fn() + 1  
    }  
    return {    
        foo: foo  
    };
  });
  
  // 2. 引用
  require(['a'], function (a){
    a.foo()
  });
  

CMD

• 常用於：不常用，根據CommonJs和AMD實現，優化了載入方式

• 特點：

  • 非同步載入
  • 按需載入/依賴就近：用到了再引用依賴，方便了開發，缺點是速度和效能較差

• 語法：

  // 1. 匯出：通過define來定義模組
  // 如果該模組還依賴其他模組，在用到的地方引用即可
  
  define(function(){  
    function foo(){        
        var x = require('x')
        return x.fn() + 1  
    }  
    return {    
        foo: foo  
    };
  });
  
  // 2. 引用
  var x = require('a');
  a.foo();
  

ES module

• 常用於：目前瀏覽器端的預設標準
• 特點：靜態編譯： 在編譯的時候就能確定依賴關係，以及輸入和輸出的變數

• 語法：

  // 1. 匯出：通過export 或 export default 輸出模組
  寫法1: 邊宣告，邊匯出
  export var m = 1;
  export function m() {};
  export class M {};
  
  寫法2：匯出一個介面 export {}，形似匯出物件但不是, 本質上是引用集合，最常用的匯出方法
  export {
    attr1,
    attr2
  }
  
  寫法3：預設匯出 
  export default fn
  
  // 2. 引用
  import { x } from 'test.js' // 匯出模組中對應的值，必須知道值在模組中匯出時的名字
  import { x as myx } from 'test.js' // 改名字
  import x from 'test.js' // 預設匯出的引用方式
  

  **注意**
   1. export default在同一個檔案中只可存在一個（一個模組只能有一個預設輸出）
   2. 一個模組中可以同時使用export default 和 export
    // 模組 test.jsvar info = {
        name: 'name',
        age: 18
    }
    export default info
    export var name= '海洋餅乾'
    export var age = 18
  
    // 引用
    import person, {name, age as myAge} from 'test.js'
    console.log(person); // { name: 'name', age: 18 }
    console.log(name+ '=' + myAge); // 海洋餅乾==18