摘要：模塊化規(guī)范有的模塊系統(tǒng)。規(guī)范是服務(wù)器端模塊的規(guī)范，由推廣使用。對(duì)于依賴的模塊，是提前執(zhí)行，是延遲執(zhí)行。瀏覽器廠商和都宣布要原生支持該規(guī)范。它將逐漸取代和規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

本文由云+社區(qū)發(fā)表

模塊化是指把一個(gè)復(fù)雜的系統(tǒng)分解到一個(gè)一個(gè)的模塊。

模塊化開(kāi)發(fā)的優(yōu)點(diǎn)：

(1)代碼復(fù)用，讓我們更方便地進(jìn)行代碼管理、同時(shí)也便于后面代碼的修改和維護(hù)。

(2)一個(gè)多帶帶的文件就是一個(gè)模塊，是一個(gè)多帶帶的作用域，只向外暴露特定的變量和函數(shù)。這樣可以避免污染全局變量，減少變量命名沖突。

js模塊化規(guī)范有：CommonJS、AMD、CMD、ES6的模塊系統(tǒng)。本文將依次介紹下每個(gè)規(guī)范。

缺點(diǎn)：

(1)加載的時(shí)候會(huì)停止渲染網(wǎng)頁(yè)，引入的js文件越多，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間越長(zhǎng)；

(2)會(huì)污染全局變量；

(3)js文件之間存在依賴關(guān)系，加載是有順序的，依賴性最大的要放到最后去加載；當(dāng)項(xiàng)目規(guī)模較大時(shí)，依賴關(guān)系變得錯(cuò)綜復(fù)雜。

(4)要引入的js文件太多，不美觀，代碼難以管理。

是服務(wù)器端模塊的規(guī)范，由nodejs推廣使用。該規(guī)范的核心思想是：允許模塊通過(guò)require方法來(lái)同步加載所要依賴的其他模塊，然后通過(guò) exports 或module.exports 來(lái)導(dǎo)出需要暴露的接口。

CommonJS 還可以細(xì)分為 CommonJS1 和 CommonJS2，區(qū)別在于 CommonJS1 只能通過(guò) exports.xx = xx 的方式導(dǎo)出，CommonJS2 在 CommonJS1 的基礎(chǔ)上加入了module.exports = xx 的導(dǎo)出方式。 CommonJS 通常指 CommonJS2。

采用CommonJS 規(guī)范導(dǎo)入導(dǎo)出：

// 導(dǎo)出
module.exports = moduleA.someFunc;
// 導(dǎo)入
const moduleA = require("./moduleA");

實(shí)例：

//math.js
var num = 0;
function add(a, b) {
  return a + b;
}
module.exports = {
  //需要向外暴露的變量、函數(shù)
  num: num,
  add: add
}

可以這樣加載：

//引入自定義的模塊時(shí)，參數(shù)包含路徑，可省略.js
//引入核心模塊時(shí)，不需要帶路徑，如var http = require("http");
var math = require("./math");
math.add(1, 2)//3

實(shí)際上，從上面的例子就可以看出，math.add(1,2)必須要等待math.js加載完成，即require是同步的。

在服務(wù)器端，模塊文件保存在本地磁盤，等待時(shí)間就是磁盤的讀取時(shí)間。但對(duì)于瀏覽器而言，由于模塊都放在服務(wù)器端，等待時(shí)間取決于網(wǎng)上的快慢。因此更合理的方案是異步加載模塊。

缺點(diǎn)：

(1)不能并行加載模塊，會(huì)阻塞瀏覽器加載；

(2)代碼無(wú)法直接運(yùn)行在瀏覽器環(huán)境下，必須通過(guò)工具轉(zhuǎn)換成標(biāo)準(zhǔn)的 ES5；

AMD：異步模塊定義。上面已經(jīng)介紹過(guò)，CommonJS是服務(wù)器端模塊的規(guī)范，主要是為了JS在后端的表現(xiàn)制定的，不太適合前端。而AMD就是要為前端JS的表現(xiàn)制定規(guī)范。由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)，也就是require.js（還有個(gè)js庫(kù)：curl.js）。實(shí)際上AMD 是 require.js在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。

AMD采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

require.js也采用require()語(yǔ)句加載模塊，但是不同于CommonJS：

// 定義一個(gè)模塊
define("module", ["dep"], function (dep) {
  return exports;
});

// 導(dǎo)入和使用
require(["module"], function (module) {
});

上面示例中的代碼改寫成AMD形式：

math.js定義一個(gè)模塊:

define("math", ["jquery"], function (jquery) {//引入jQuery模塊
  return {
    add: function (x, y) {
      return x + y;
    }
  };
});

導(dǎo)入和使用：

require(["math"], function (math) {
  math.add(1, 2)
})

math.add()與加載math模塊不是同步的，不會(huì)阻塞瀏覽器的加載。

CMD：通用模塊定義。

國(guó)內(nèi)的玉伯大佬寫了sea.js，實(shí)際上CMD就是 sea.js在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。

define(function (require, exports, module) {
  // 模塊代碼
});

說(shuō)明：

require：可以把其他模塊導(dǎo)入進(jìn)來(lái)的一個(gè)參數(shù)；

exports：可以把模塊內(nèi)的一些屬性和方法導(dǎo)出的；

module： 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。

上面示例中的代碼改寫成AMD形式：

define(function (require, exports, module) {
  var add = function (a, b) {
    return a + b;
  }
  exports.add = add;
})

//導(dǎo)入和使用
seajs.use(["math.js"], function (math) {
  var sum = math.add(1, 2);
});

CMD與AMD的不同的在于：

(1)AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個(gè)模塊的時(shí)候再去require：

//AMD推崇的依賴關(guān)系前置：在定義模塊時(shí)就要聲明要依賴的模塊
define(["a", "b", "c", "d"], function (a, b, c, d) { // 依賴必須一開(kāi)始就寫好
  a.doSomething()
  // 此處省略100行
  ...
  b.doSomething()
  ...
})

//CMD推崇依賴就近，按需加載，只有在用到某個(gè)模塊時(shí)再去require
define(function (require, exports, modules) {
  var a = require("a");
  a.doSomething();
  // 此處省略100行
  ...
  var b = require("b");//按需加載
  b.doSomething();
  ...
})

(2)AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。

對(duì)于依賴的模塊，AMD是提前執(zhí)行，CMD是延遲執(zhí)行。

具體細(xì)節(jié)可點(diǎn)擊參考

ES6在語(yǔ)言的層面上實(shí)現(xiàn)了模塊化。瀏覽器廠商和 Node.js 都宣布要原生支持該規(guī)范。它將逐漸取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

在 ES6 中，使用export關(guān)鍵字來(lái)導(dǎo)出模塊，使用import關(guān)鍵字引用模塊。但是瀏覽器還沒(méi)有完全兼容，需要使用babel轉(zhuǎn)換成ES5。

// 導(dǎo)出
export function hello() { };
export default {
  // ...
};
// 導(dǎo)入
import { readFile } from "fs";
import React from "react";

使用import導(dǎo)入模塊時(shí)，需要知道要加載的變量名或函數(shù)名。

在ES6中還提供了export default，為模塊指定默認(rèn)輸出.對(duì)應(yīng)導(dǎo)入模塊import時(shí)，不需要使用大括號(hào)。

上面示例中的代碼改寫成ES6形式：

//math.js
var num = 0;
var add = function (a, b) {
  return a + b;
};
export { num, add };

//導(dǎo)入
import { num, add } from "./math";
function test(ele) {
  ele.textContent = add(1 + num);
}

缺點(diǎn)

瀏覽器還沒(méi)有完全兼容，必須通過(guò)工具轉(zhuǎn)換成標(biāo)準(zhǔn)的 ES5 后才能正常運(yùn)行。

本文從script引入js文件講起，到服務(wù)器端模塊的規(guī)范CommonJs，再到推崇依賴前置的瀏覽器端模塊的規(guī)范AMD、推崇依賴就近的瀏覽器端模塊的規(guī)范CMD，最后介紹了ES6的模塊化。每個(gè)介紹中都有各規(guī)范基本的用法和一個(gè)示例。如有問(wèn)題，歡迎指正。

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布