前端模塊化的演進過程

• CommonJS

  • 服務端模塊化規範
  • 經過require方法同步加載依賴模塊
  • 經過module.export導出模塊

  // 導出
  var num = 0;
  function add(a,b) {
    return a + b;
  }
  module.export = {
    num: num,
    add: add
  }
  
  // 導入
  var math = require('./math');
  math.add(1,2); // 3

  • 缺點：因同步加載模塊，受限於網絡條件，會阻塞代碼加載，在客戶端上體驗較差

• AMD（require.js）

  • 異步加載模塊，不會瀏覽器加載
  • 依賴相關模塊的語句，會在模塊加載完成後的回調函數裏運行
  • 庫函數爲require.js，經過define方法定義模塊

  // 定義模塊
  define('math',['jquery'],function(jquery) { // math依賴jquery模塊
    return {
      add: funtion(x,y) {
        return x + y;
      }
    }
  })
  
  // 導入模塊
  require(['math'],function(math) {
    math.add(1,2);
  })

• CMD（sea.js）

  • 集CommonJS與AMD所長（正如其名：海納百川）
  • 使用define定義模塊
  • 使用exports導出方法
  • 使用require導入依賴
  • 使用seajs.use使用模塊

  // 定義模塊，導出屬性/方法
  define(function(require,exports,module) {
    var add = function(a,b) {
      return a + b;
    }
    exports.add = add;
  })
  // 導入並使用模塊
  seajs.use(['math.js'],function(math) {
    var sum = math.add(1,2)
  })

  AMD vs. CMD
  AMD：依賴前置，提早執行（預執行） --- 定義模塊時就要require
  CMD：依賴就近，延遲執行（懶執行） --- 使用模塊時纔會require

• ES6 Module

  • 語言層面上的模塊化，通用的模塊化解決方案
  • 使用import導入模塊
  • 使用export導出模塊
  • 默認導出爲export default
  • 導入default時，不須要使用大括號

  // 導出 math.js
  var num = 0;
  var add = function(a,b) {
    return a + b;
  }
  export {num, add}
  
  // 導入 math.js
  import {num, add} from './math'
  function sum(base) {
    return add(num,base)
  }
  
  // 默認導出
  export default function add(a, b) {
    return a + b;
  }
  
  // 導入默認
  import add from './math'
  // 同時導入默認及非默認
  import add, {sub, mul} from './math'
  
  // 複合導出
  export { foo, bar } from 'my_module';
  // 等同於
  import { foo, bar } from 'my_module';
  export { foo, bar };
  
  // 導入更名
  import { myFoo as Foo } from 'my_module'
  // 所有導入
  import * as someIdentifier from "someModule";