模塊化 —— CommonJS、AMD、UMD、ESM（上）

CommonJS、AMD、UMD、ESM

不管是那種模塊化規範，重點關注

• 獨立模塊做用域

• 導出模塊內部數據

• 導入外部模塊數據

CommonJS

在早起前端對於模塊化並無什麼規範，反而是偏向服務端的應用有更強烈的需求，CommonJS 規範就是一套偏向服務端的模塊化規範，NodeJS 就採用了這個規範。

獨立模塊做用域

一個文件就是模塊，擁有獨立的做用域

導出模塊內部數據

經過 module.exports 或 exports 對象導出模塊內部數據

// a.js
let a = 1;
let b = 2;

module.exports = {
  x: a,
  y: b
}
// or
exports.x = a;
exports.y = b;

導入外部模塊數據

經過 require 函數導入外部模塊數據

// b.js
let a = require('./a');
a.x;
a.y;

 

AMD

由於 CommonJS 規範一些特性（基於文件系統，同步加載），它並不適用於瀏覽器端，因此另外定義了適用於瀏覽器端的規範

 

AMD(Asynchronous Module Definition)

https://github.com/amdjs/amdjs-api/wiki/AMD

瀏覽器並無具體實現該規範的代碼，咱們能夠經過一些第三方庫來解決

這裏強調一下AMD是一個規範，它並非代碼。

requireJS

https://requirejs.org/

這是一個第三方庫

// 1.html
<script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

獨立模塊做用域

經過一個 define 方法來定義一個模塊，並經過該方法的第二個回調函數參數來產生獨立做用域

// scripts/Cart.js
define(function() {
  // 模塊內部代碼
})

導入外部模塊數據

經過前置依賴列表導入外部模塊數據

// scripts/main.js
// 定義一個模塊，並導入 ./Cart 模塊
define(['./Cart'], function(Cart) {
  let cart = new Cart()
  cart.add({name: 'iphoneXX', price: 1000000})
})

requireJS 的 CommonJS 風格

require.js 也支持 CommonJS 風格的語法

 

導出模塊內部數據

// scripts/Cart.js
define(['require', 'exports', 'module'], function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 忽略不須要的依賴導入
define(['exports'], function(exports) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 若是是依賴的導入爲：require, exports, module，也能夠省略依賴導入聲明
define(function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})

導入外部模塊數據

// scripts/main.js
define(['./Cart'], function(Cart) {
  let cart = new Cart()
  cart.add({name: 'iphoneXX', price: 1000000})
})