隨著前端項(xiàng)目越來越大，代碼復(fù)雜性不斷增加，對于模塊化的需求越來越大。模塊化是工程化基礎(chǔ)，只有將代碼模塊化，拆分為合理單元，才具備調(diào)度整合的能力。下面就來看看模塊化的概念，以及不同模塊化方案的使用方式和優(yōu)缺點(diǎn)。

(相關(guān)資料圖)

1、模塊概述

由于代碼之間會發(fā)生大量交互，如果結(jié)構(gòu)不合理，這些代碼就會變得難以維護(hù)、難以測試、難以調(diào)試。而使用模塊化就解決了這些問題，模塊化的特點(diǎn)如下：

可重用性：當(dāng)應(yīng)用被組織成模塊時，可以方便的在其他地方重用這些模塊，避免編寫重復(fù)代碼，從而加快開發(fā)流程；

可讀性：當(dāng)應(yīng)用變得越來越復(fù)雜時，如果在一個文件中編寫所有功能，代碼會變得難以閱讀。如果使用模塊設(shè)計(jì)應(yīng)用，每個功能都分布在各自的模塊中，代碼就會更加清晰、易讀；

可維護(hù)性：軟件的美妙之處在于進(jìn)化，從長遠(yuǎn)來看，我們需要不斷為應(yīng)用增加新的功能。當(dāng)應(yīng)用被結(jié)構(gòu)化為模塊時，可以輕松添加或刪除功能。除此之外，修復(fù)錯誤也是軟件維護(hù)的一部分，使用模塊就可以更快速地定位問題。

模塊化是一種將系統(tǒng)分離成獨(dú)立功能部分的方法，可以將系統(tǒng)分割成獨(dú)立的功能部分，嚴(yán)格定義模塊接口，模塊間具有透明性。通過將代碼進(jìn)行模塊化分隔，每個文件彼此獨(dú)立，開發(fā)者更容易開發(fā)和維護(hù)代碼，模塊之間又能夠互相調(diào)用和通信，這就是現(xiàn)代化開發(fā)的基本模式。

（2）模式

JavaScript 模塊包含三個部分：

導(dǎo)入：在使用模塊時，需要將所需模塊作為依賴項(xiàng)導(dǎo)入。例如，如果想要創(chuàng)建一個 React 組件，就需導(dǎo)入 react 模塊。要使用像 Lodash 這樣的工具庫，就需要安裝并導(dǎo)入它作為依賴項(xiàng)；代碼：模塊具體代碼；導(dǎo)出：模塊接口，從模塊中導(dǎo)出的內(nèi)容可供導(dǎo)入模塊的任何地方使用。（3）類型

模塊化的貫徹執(zhí)行離不開相應(yīng)的約定，即規(guī)范。這是能夠進(jìn)行模塊化工作的重中之重。實(shí)現(xiàn)模塊化的規(guī)范有很多，比如：AMD、RequireJS、CMD、SeaJS、UMD、CommonJS、ES6 Module。除此之外，IIFE（立即執(zhí)行函數(shù)）也是實(shí)現(xiàn)模塊化的一種方案。

本文將介紹其中的六個：

IIFE：立即調(diào)用函數(shù)表達(dá)式AMD：異步模塊加載機(jī)制CMD：通用模塊定義UMD：統(tǒng)一模塊定義CommonJS：Node.js 采用該規(guī)范ES 模塊：JavaScript 內(nèi)置模塊系統(tǒng)2. IIFE

在 ECMAScript 6 之前，模塊并沒有被內(nèi)置到 JavaScript 中，因?yàn)?JavaScript 最初是為小型瀏覽器腳本設(shè)計(jì)的。這種模塊化的缺乏，導(dǎo)致在代碼的不同部分使用了共享全局變量。

比如，對于以下代碼：

var name = "JavaScript";var age = 20;

當(dāng)上面的代碼運(yùn)行時，name和age變量會被添加到全局對象中。因此，應(yīng)用中的所有 JavaScript 腳本都可以訪問全局變量name和age，這就很容易導(dǎo)致代碼錯誤，因?yàn)樵谄渌幌嚓P(guān)的單元中也可以訪問和修改這些全局變量。除此之外，向全局對象添加變量會使全局命名空間變得混亂并增加了命名沖突的機(jī)會。

所以，我們就需要一種封裝變量和函數(shù)的方法，并且只對外公開定義的接口。因此，為了實(shí)現(xiàn)模塊化并避免使用全局變量，可以使用如下方式來創(chuàng)建模塊：

(function () {    // 聲明私有變量和函數(shù)     return {        // 聲明公共變量和函數(shù)    }})();

上面的代碼就是一個返回對象的閉包，這就是我們常說的IIFE（Immediately Invoked Function Expression），即立即調(diào)用函數(shù)表達(dá)式。在該函數(shù)中，就創(chuàng)建了一個局部范圍。這樣就避免了使用全局變量（IIFE 是匿名函數(shù)），并且代碼單元被封裝和隔離。

可以這樣來使用 IIFE 作為一個模塊：

var module = (function(){  var age = 20;  var name = "JavaScript"    var fn1 = function(){    console.log(name, age)  };    var fn2 = function(a, b){    console.log(a + b)  };    return {    age,    fn1,    fn2,  };})();module.age;           // 20module.fn1();         // JavaScript 20module.fn2(128, 64);  // 192

在這段代碼中，module就是我們定義的一個模塊，它里面定義了兩個私有變量age和name，同時定義了兩個方法fn1和fn2，其中fn1中使用module中定義的私有變量，fn2接收外部傳入?yún)?shù)。最后，module 向外部暴露了age、fn1、fn2。這樣就形成了一個模塊。

當(dāng)試圖在module外部直接調(diào)用fn1時，就會報錯：

fn1(); // Uncaught ReferenceError: fn1 is not defined

當(dāng)試圖在module外部打印其內(nèi)部的私有變量name時，得到的結(jié)果是undefined：

module.name; // undefined

上面的 IIFE 的例子是遵循模塊模式的，具備其中的三部分，其中 age、name、fn1、fn2 就是模塊內(nèi)部的代碼實(shí)現(xiàn)，返回的 age、fn1、fn2 就是導(dǎo)出的內(nèi)容，即接口。調(diào)用module方法和變量就是導(dǎo)入使用。

3. CommonJS（1）概念① 定義

CommonJS 是社區(qū)提出的一種 JavaScript 模塊化規(guī)范，它是為瀏覽器之外的 JavaScript 運(yùn)行環(huán)境提供的模塊規(guī)范，Node.js 就采用了這個規(guī)范。

注意：

瀏覽器不支持使用 CommonJS 規(guī)范；Node.js 不僅支持使用 CommonJS 來實(shí)現(xiàn)模塊，還支持最新的 ES 模塊。

CommonJS 規(guī)范加載模塊是同步的，只有加載完成才能繼續(xù)執(zhí)行后面的操作。不過由于 Node.js 主要運(yùn)行在服務(wù)端，而所需加載的模塊文件一般保存在本地硬盤，所以加載比較快，而無需考慮使用異步的方式。

② 語法

CommonJS 規(guī)范規(guī)定每個文件就是一個模塊，有獨(dú)立的作用域，對于其他模塊不可見，這樣就不會污染全局作用域。在 CommonJS 中，可以分別使用export和require來導(dǎo)出和導(dǎo)入模塊。在每個模塊內(nèi)部，都有一個module對象，表示當(dāng)前模塊。通過它來導(dǎo)出 API，它有以下屬性：

exports：模塊導(dǎo)出值。filename：模塊文件名，使用絕對路徑；id：模塊識別符，通常是使用絕對路徑的模塊文件名；loaded：布爾值，表示模塊是否已經(jīng)完成加載；parent：對象，表示調(diào)用該模塊的模塊；children：數(shù)組，表示該模塊要用到的其他模塊；③ 特點(diǎn)

CommonJS 規(guī)范具有以下特點(diǎn)：

文件即模塊，文件內(nèi)所有代碼都運(yùn)行在獨(dú)立的作用域，因此不會污染全局空間；模塊可以被多次引用、加載。第一次被加載時，會被緩存，之后都從緩存中直接讀取結(jié)果。加載某個模塊，就是引入該模塊的module.exports屬性，該屬性輸出的是值拷貝，一旦這個值被輸出，模塊內(nèi)再發(fā)生變化不會影響到輸出的值。模塊加載順序按照代碼引入的順序。④ 優(yōu)缺點(diǎn)

CommonJS 的優(yōu)點(diǎn)：

使用簡單很多工具系統(tǒng)和包都是使用 CommonJS 構(gòu)建的；在 Node.js 中使用，Node.js 是流行的 JavaScript 運(yùn)行時環(huán)境。

CommonJS 的缺點(diǎn)

可以在 JavaScript 文件中包含一個模塊；如果想在 Web 瀏覽器中使用它，則需要額外的工具；本質(zhì)上是同步的，在某些情況下不適合在 Web 瀏覽器中使用。（2）使用

在 CommonJS 中，可以通過 require 函數(shù)來導(dǎo)入模塊，它會讀取、執(zhí)行 JavaScript 文件，并返回該模塊的 exports 對象，該對象只有在模塊腳本運(yùn)行完才會生成。

① 模塊導(dǎo)出

可以通過以下兩種方式來導(dǎo)出模塊內(nèi)容：

module.exports.TestModule = function() {    console.log("exports");}exports.TestModule = function() {    console.log("exports");}

則合兩種方式的導(dǎo)出結(jié)果是一樣的，module.exports和exports的區(qū)別可以理解為：exports是module.exports的引用，如果在exports調(diào)用之前調(diào)用了exports=...，那么就無法再通過exports來導(dǎo)出模塊內(nèi)容，除非通過exports=module.exports重新設(shè)置exports的引用指向。

當(dāng)然，可以先定義函數(shù)，再導(dǎo)出：

function testModule() {    console.log("exports");}module.exports = testModule;

這是僅導(dǎo)出一個函數(shù)的情況，使用時就是這樣的：

testModule = require("./MyModule");testModule();

如果是導(dǎo)出多個函數(shù)，就可以這樣：

function testModule1() {    console.log("exports1");}function testModule2() {    console.log("exports2");}

導(dǎo)入多個函數(shù)并使用：

({testModule1, testModule2} = require("./MyModule"));testModule1();testModule2();

② 模塊導(dǎo)入

可以通過以下方式來導(dǎo)入模塊：

const module = require("./MyModule");

注意，如果require的路徑?jīng)]有后綴，會自動按照.js、.json和.node的順序進(jìn)行補(bǔ)齊查找。

③ 加載過程

在 CommonJS 中，require的加載過程如下：

優(yōu)先從緩存中加載；如果緩存中沒有，檢查是否是核心模塊，如果是直接加載；如果不是核心模塊，檢查是否是文件模塊，解析路徑，根據(jù)解析出的路徑定位文件，然后執(zhí)行并加載；如果以上都不是，沿當(dāng)前路徑向上逐級遞歸，直到根目錄的node_modules目錄。（3）示例

下面來看一個購物車的例子，主要功能是將商品添加到購物車，并計(jì)算購物車商品總價格：

// cart.jsvar items = [];function addItem (name, price)     item.push({    name: name,    price: price  });}exports.total = function () {    return items.reduce(function (a, b) {      return a + b.price;    }, 0);};exports.addItem = addItem;

這里通過兩種方式在 exports 對象上定義了兩個方法：addItem 和 total，分別用來添加購物車和計(jì)算總價。

下面在控制臺測試一下上面定義的模塊：

let cart = require("./cart");

這里使用相對路徑來導(dǎo)入 cart 模塊，打印 cart 模塊，結(jié)果如下：

cart // { total: [Function], addItem: [Function: addItem] }

向購物車添加一些商品，并計(jì)算當(dāng)前購物車商品的總價格：

cart.addItem("book", 60);cart.total()  // 60cart.addItem("pen", 6);cart.total()  // 66

這就是創(chuàng)建模塊的基本方法，我們可以創(chuàng)建一些方法，并且只公開希望其他文件使用的部分代碼。該部分成為 API，即應(yīng)用程序接口。

這里有一個問題，只有一個購物車，即只有一個模塊實(shí)例。下面來在控制臺執(zhí)行以下代碼：

second_cart = require("./cart");

那這時會創(chuàng)建一個新的購物車嗎？事實(shí)并非如此，打印當(dāng)前購物車的商品總金額，它仍然是66：

second_cart.total();  // 66

當(dāng)我們?創(chuàng)建多個實(shí)例時，就需要再模塊內(nèi)創(chuàng)建一個構(gòu)造函數(shù)，下面來重寫cart.js文件：

// cart.jsfunction Cart () {    this.items = [];}Cart.prototype.addItem = function (name, price) {    this.items.push({        name: name,        price: price    });}Cart.prototype.total = function () {    return this.items.reduce(function(a, b) {        return a + b.price;    }, 0);};module.export = Cart;

現(xiàn)在，當(dāng)需要使用此模塊時，返回的是 Cart 構(gòu)造函數(shù)，而不是具有 cart 函數(shù)作為一個屬性的對象。下面來導(dǎo)入這個模塊，并創(chuàng)建兩個購物車實(shí)例：

Cart = require("./second_cart");cart1 = new Cart();cart2 = new Cart();cart1.addItem("book", 50);cart1.total();   // 50cart2.total();   // 50

4. AMD（1）概念

CommonJS 的缺點(diǎn)之一是它是同步的，AMD 旨在通過規(guī)范中定義的 API 異步加載模塊及其依賴項(xiàng)來解決這個問題。AMD 全稱為 Asynchronous Module Definition，即異步模塊加載機(jī)制。它規(guī)定了如何定義模塊，如何對外輸出，如何引入依賴。

AMD規(guī)范重要特性就是異步加載。所謂異步加載，就是指同時并發(fā)加載所依賴的模塊，當(dāng)所有依賴模塊都加載完成之后，再執(zhí)行當(dāng)前模塊的回調(diào)函數(shù)。這種加載方式和瀏覽器環(huán)境的性能需求剛好吻合。

① 語法

AMD 規(guī)范定義了一個全局函數(shù) define，通過它就可以定義和引用模塊，它有 3 個參數(shù)：

define(id?, dependencies?, factory);

其包含三個參數(shù)：

id：可選，指模塊路徑。如果沒有提供該參數(shù)，模塊名稱默認(rèn)為模塊加載器請求的指定腳本的路徑。dependencies：可選，指模塊數(shù)組。它定義了所依賴的模塊。依賴模塊必須根據(jù)模塊的工廠函數(shù)優(yōu)先級執(zhí)行，并且執(zhí)行的結(jié)果應(yīng)該按照依賴數(shù)組中的位置順序以參數(shù)的形式傳入工廠函數(shù)中。factory：為模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果是函?shù)，那么該函數(shù)是單例模式，只會被執(zhí)行一次；如果是對象，此對象應(yīng)該為模塊的輸出值。

除此之外，要想使用此模塊，就需要使用規(guī)范中定義的 require 函數(shù)：

require(dependencies?, callback);

其包含兩個參數(shù)：

dependencies：依賴項(xiàng)數(shù)組；callback：加載模塊時執(zhí)行的回調(diào)函數(shù)。

有關(guān) AMD API 的更詳細(xì)說明，可以查看 GitHub 上的 AMD API 規(guī)范：https://github.com/amdjs/amdjs-api/blob/master/AMD.md。

② 兼容性

該規(guī)范的瀏覽器兼容性如下：

③ 優(yōu)缺點(diǎn)

AMD 的優(yōu)點(diǎn)：

異步加載導(dǎo)致更好的啟動時間；能夠?qū)⒛K拆分為多個文件；支持構(gòu)造函數(shù)；無需額外工具即可在瀏覽器中工作。

AMD 的缺點(diǎn)：

語法很復(fù)雜，學(xué)習(xí)成本高；需要一個像 RequireJS 這樣的加載器庫來使用 AMD。（2）使用

當(dāng)然，上面只是 AMD 規(guī)范的理論，要想理解這個理論在代碼中是如何工作的，就需要來看看 AMD 的實(shí)際實(shí)現(xiàn)。RequireJS 就是 AMD 規(guī)范的一種實(shí)現(xiàn)，它被描述為“JavaScript 文件和模塊加載器”。下面就來看看 RequireJS 是如何使用的。

① 引入RequireJS

可以通過 npm 來安裝 RequireJS：

npm i requirejs

也可以在 html 文件引入require.js文件：

<script data-main="js/config" src="js/require.js"></script>

這里script標(biāo)簽有兩個屬性：

data-main="js/config"：這是 RequireJS 的入口，也是配置它的地方；src="js/require.js"：加載腳本的正常方式，會加載require.js文件。

在script標(biāo)簽下添加以下代碼來初始化 RequireJS：

<script>    require(["config"], function() {        //...    })</script>

當(dāng)頁面加載完配置文件之后，require()中的代碼就會運(yùn)行。這個script標(biāo)簽是一個異步調(diào)用，這意味著當(dāng) RequireJS 通過src="js/require.js加載時，它將異步加載data-main屬性中指定的配置文件。因此，該標(biāo)簽下的任何 JavaScript 代碼都可以在 RequireJS 獲取時執(zhí)行配置文件。

那 AMD 中的require()和 CommonJS 中的require()有什么區(qū)別呢？

AMDrequire() 接受一個依賴數(shù)組和一個回調(diào)函數(shù)，CommonJSrequire()接受一個模塊 ID；AMDrequire()是異步的，而 CommonJSrequire()是同步的。② 定義 AMD 模塊

下面是 AMD 中的一個基本模塊定義：

define(["dependency1", "dependency2"], function() {  // 模塊內(nèi)容});

這個模塊定義清楚地顯示了其包含兩個依賴項(xiàng)和一個函數(shù)。

下面來定義一個名為addition.js的文件，其包含一個執(zhí)行加法操作的函數(shù)，但是沒有依賴項(xiàng)：

// addition.jsdefine(function() {    return function(a, b) {        alert(a + b);    }});

再來定義一個名為calculator.js的文件：

define(["addition"], function(addition) {    addition(7, 9);});

當(dāng) RequireJS 看到上面的代碼塊時，它會去尋找依賴項(xiàng)，并通過將它們作為參數(shù)傳遞給函數(shù)來自動將其注入到模塊中。

RequireJS 會自動為addition.js和calculator.js文件創(chuàng)建一個<script>標(biāo)簽，并將其放在HTML元素中，等待它們加載，然后運(yùn)行函數(shù)，這類似于require()的行為。

下面來更新一下index.html文件：

// index.htmlrequire(["config"], function() {    require(["calculator"]);});

當(dāng)瀏覽器加載index.html文件時，RequireJS 會嘗試查找calculator.js模塊，但是沒有找到，所以瀏覽器也不會有任何反應(yīng)。那該如何解決這個問題呢？我們必須提供配置文件來告訴 RequireJS 在哪里可以找到calculator.js（和其他模塊），因?yàn)樗且玫娜肟凇?/p>

下面是配置文件的基本結(jié)構(gòu)：

requirejs.config({    baseURL: "string",    paths: {},    shim: {},});

這里有三個屬性值：

baseURL：告訴 RequireJS 在哪里可以找到模塊；path：這些是與 define() 一起使用的模塊的名稱。 在路徑中，可以使用文件的 CDN，這時 RequireJS 將嘗試在本地可用的模塊之前加載模塊的 CDN 版本；shim：允許加載未編寫為 AMD 模塊的庫，并允許以正確的順序加載它們

我們的配置文件如下：

requirejs.config({    baseURL: "js",    paths: {        // 這種情況下，模塊位于 customScripts 文件中        addition: "customScripts/addition",        calculator: "customScripts/calculator",    },});

配置完成之后，重新加載瀏覽器，就會收到瀏覽器的彈窗：

這就是在 AMD 中使用 RequireJS 定義模塊的方法之一。我們還可以通過指定其路徑名來定義模塊，該路徑名是模塊文件在項(xiàng)目目錄中的位置。 下面給出一個例子：

define("path/to/module", function() {    // 模塊內(nèi)容})

當(dāng)然，RequireJS 并不鼓勵這種方法，因?yàn)楫?dāng)我們將模塊移動到項(xiàng)目中的另一個位置時，就需要手動更改模塊中的路徑名。

在使用 AMD 定義模塊時需要注意：

在依賴項(xiàng)數(shù)組中列出的任何內(nèi)容都必須與工廠函數(shù)中的分配相匹配；盡量不要將異步代碼與同步代碼混用。當(dāng)在 index.html 上編寫其他 JavaScript 代碼時就是這種情況。5. CMD

CMD 全稱為 Common Module Definition，即通用模塊定義。CMD 規(guī)范整合了 CommonJS 和 AMD 規(guī)范的特點(diǎn)。sea.js 是 CMD 規(guī)范的一個實(shí)現(xiàn) 。

CMD 定義模塊也是通過一個全局函數(shù)define來實(shí)現(xiàn)的，但只有一個參數(shù)，該參數(shù)既可以是函數(shù)也可以是對象：

define(factory);

如果這個參數(shù)是對象，那么模塊導(dǎo)出的就是對象；如果這個參數(shù)為函數(shù)，那么這個函數(shù)會被傳入 3 個參數(shù)：

define(function(require, exports, module) {  //...});

這三個參數(shù)分別如下： （1）require：一個函數(shù)，通過調(diào)用它可以引用其他模塊，也可以調(diào)用require.async函數(shù)來異步調(diào)用模塊； （2）exports：一個對象，當(dāng)定義模塊的時候，需要通過向參數(shù)exports添加屬性來導(dǎo)出模塊 API； （3）module是一個對象，它包含 3 個屬性：

uri：模塊完整的 URI 路徑；dependencies：模塊依賴；exports：模塊需要被導(dǎo)出的 API，作用同第二個參數(shù)exports。

下面來看一個例子，定義一個increment模塊，引用math模塊的add函數(shù)，經(jīng)過封裝后導(dǎo)出成increment函數(shù)：

define(function(require, exports, module) {  var add = require("math").add;  exports.increment = function(val) {    return add(val, 1);  };  module.id = "increment";});

CMD 最大的特點(diǎn)就是懶加載，不需要在定義模塊的時候聲明依賴，可以在模塊執(zhí)行時動態(tài)加載依賴。除此之外，CMD 同時支持同步加載模塊和異步加載模塊。

AMD 和 CMD 的兩個主要區(qū)別如下：

AMD 需要異步加載模塊，而 CMD 在加載模塊時，可以同步加載（require），也可以異步加載（require.async）。CMD 遵循依賴就近原則，AMD 遵循依賴前置原則。也就是說，在 AMD 中，需要把模塊所需要的依賴都提前在依賴數(shù)組中聲明。而在 CMD 中，只需要在具體代碼邏輯內(nèi)，使用依賴前，把依賴的模塊require進(jìn)來。6. UMD

UMD 全程為 Universal Module Definition，即統(tǒng)一模塊定義。其實(shí) UMD 并不是一個模塊管理規(guī)范，而是帶有前后端同構(gòu)思想的模塊封裝工具。

UMD 是一組同時支持 AMD 和 CommonJS 的模式，它旨在使代碼無論執(zhí)行代碼的環(huán)境如何都能正常工作，通過 UMD 可以在合適的環(huán)境選擇對應(yīng)的模塊規(guī)范。比如在 Node.js 環(huán)境中采用 CommonJS 模塊管理，在瀏覽器環(huán)境且支持 AMD 的情況下采用 AMD 模塊，否則導(dǎo)出為全局函數(shù)。

一個UMD模塊由兩部分組成：

**立即調(diào)用函數(shù)表達(dá)式 (IIFE)**：它會檢查使用模塊的環(huán)境。其有兩個參數(shù)：root和factory。root是對全局范圍的 this 引用，而factory是定義模塊的函數(shù)。匿名函數(shù)：創(chuàng)建模塊，此匿名函數(shù)被傳遞任意數(shù)量的參數(shù)以指定模塊的依賴關(guān)系。

UMD 的代碼實(shí)現(xiàn)如下：

(function (root, factory) {  if (typeof define === "function" && define.amd) {    define([], factory);  } else if (typeof exports === "object") {    module.exports,    module.exports = factory();  } else {    root.returnExports = factory();  }}(this, function () {  // 模塊內(nèi)容定義  return {};}));

它的執(zhí)行過程如下：

先判斷是否支持 Node.js 模塊格式（exports 是否存在），存在則使用 Node.js 模塊格式；再判斷是否支持 AMD（define 是否存在），存在則使用 AMD 方式加載模塊；若兩個都不存在，則將模塊公開到全局（Window 或 Global）。

UMD的特點(diǎn)如下：① UMD 的優(yōu)點(diǎn)：

小而簡潔；適用于服務(wù)器端和客戶端。

② UMD 的缺點(diǎn)：

不容易正確配置。7. ES 模塊（1）概念

通過上面的例子，你可能會發(fā)現(xiàn)，使用 UMD、AMD、CMD 的代碼會變得難以編寫和理解。于是在 2015 年，負(fù)責(zé) ECMAScript 規(guī)范的 TC39 委員會將模塊添加為 JavaScript 的內(nèi)置功能，這些模塊稱為 ECMAScript模塊，簡稱 ES 模塊。

模塊和經(jīng)典 JavaScript 腳本略有不同：

模塊默認(rèn)啟用嚴(yán)格模式，比如分配給未聲明的變量會報錯：

<script type="module">  a = 5; </script>

模塊有一個詞法頂級作用域。 這意味著，例如，運(yùn)行 var foo = 42; 在模塊內(nèi)不會創(chuàng)建名為 foo 的全局變量，可通過瀏覽器中的 window.foo 訪問，盡管在經(jīng)典JavaScript腳本中會出現(xiàn)這種情況；

<script type="module">  let person = "Alok";</script><script type="module">   alert(person);{/* Error: person is not defined */}</script>

模塊中的 this 并不引用全局 this，而是 undefined。 （如果需要訪問全局 this，可以使用 globalThis）；

<script>  alert(this); {/* 全局對象 */}</script><script type="module">  alert(this); {/* undefined */}</script>

新的靜態(tài)導(dǎo)入和導(dǎo)出語法僅在模塊中可用，并不適用于經(jīng)典腳本。頂層 await 在模塊中可用，但在經(jīng)典 JavaScript 腳本中不可用；await 不能在模塊中的任何地方用作變量名，經(jīng)典腳本中的變量可以在異步函數(shù)之外命名為 await；JavaScript 會提升 import 語句。因此，可以在模塊中的任何位置定義它們。

CommonJS 和 AMD 都是在運(yùn)行時確定依賴關(guān)系，即運(yùn)行時加載，CommonJS 加載的是拷貝。而 ES 模塊是在編譯時就確定依賴關(guān)系，所有加載的其實(shí)都是引用，這樣做的好處是可以執(zhí)行靜態(tài)分析和類型檢查。

（2）語法① 導(dǎo)出

當(dāng)導(dǎo)出模塊代碼時，需要在其前面添加 export 關(guān)鍵詞。導(dǎo)出內(nèi)容可以是變量、函數(shù)或類。任何未導(dǎo)出的代碼都是模塊私有的，無法在該模塊之被外訪問。ES 模塊支持兩種類型的導(dǎo)出：

命名導(dǎo)出：

export const first = "JavaScript";export function func() {    return true;}

當(dāng)然，我們也可以先定義需要導(dǎo)出的變量/函數(shù)，最后統(tǒng)一導(dǎo)出這些變量/函數(shù)：

const first = "JavaScript";const second = "TypeScript";function func() {    return true;}export {first, second, func};

默認(rèn)導(dǎo)出：

function func() {    return true;}export default func;

當(dāng)然，也可以直接默認(rèn)導(dǎo)出：

export default function func() {    return true;}

默認(rèn)導(dǎo)出可以省略變量/函數(shù)/類名，在導(dǎo)入時可以為其指定任意名稱：

// 導(dǎo)出export default function () {  console.log("foo");}// 導(dǎo)入import customName from "./module";

注意：導(dǎo)入默認(rèn)模塊時不需要大括號，導(dǎo)出默認(rèn)的變量或方法可以有名字，但是對外是無效的。export default在一個模塊文件中只能使用一次。

可以使用 as 關(guān)鍵字來重命名需要暴露出的變量或方法，經(jīng)過重命名后同一變量可以多次暴露出去：

const first = "test";export {first as second};

② 導(dǎo)入

使用命名導(dǎo)出的模塊，可以通過以下方式來導(dǎo)入：

import {first, second, func} from "./module";

使用默認(rèn)導(dǎo)出的模塊，可以通過以下方式來引入，導(dǎo)入名稱可以自定義，無論導(dǎo)出的名稱是什么：

import customName from "./module.js";

導(dǎo)入模塊位置可以是相對路徑也可以是絕對路徑，.js擴(kuò)展名是可以省略的，如果不帶路徑而只是模塊名，則需要通過配置文件告訴引擎查找的位置：

import {firstName, lastName} from "./module";

可以使用 as 關(guān)鍵字來將導(dǎo)入的變量/函數(shù)重命名：

import { fn as fn1 } from "./profile";

在 ES 模塊中，默認(rèn)導(dǎo)入和命名導(dǎo)入是可以同時使用的，比如在 React 組件中：

import React, {usestate, useEffect} from "react";const Comp = () => { return ... }export default Comp;

可以使用 as 關(guān)鍵字來加載整個模塊，用于從另一個模塊中導(dǎo)入所有命名導(dǎo)出，會忽略默認(rèn)導(dǎo)出：

import * as circle from "./circle";console.log("圓面積：" + circle.area(4));console.log("圓周長：" + circle.circumference(14));

③ 動態(tài)導(dǎo)入

上面我們介紹的都是靜態(tài)導(dǎo)入，使用靜態(tài) import 時，整個模塊需要先下載并執(zhí)行，然后主代碼才能執(zhí)行。有時我們不想預(yù)先加載模塊，而是按需加載，僅在需要時才加載。這可以提高初始加載時的性能，動態(tài) import 使這成為可能：

<script type="module">  (async () => {    const moduleSpecifier = "./lib.mjs";    const {repeat, shout} = await import(moduleSpecifier);    repeat("hello");    // → "hello hello"    shout("Dynamic import in action");    // → "DYNAMIC IMPORT IN ACTION!"  })();</script>

與靜態(tài)導(dǎo)入不同，動態(tài)導(dǎo)入可以在常規(guī)腳本中使用。

④ 其他用法

可以使用以下方式來先導(dǎo)入后導(dǎo)出模塊內(nèi)容：

export { foo, bar } from "./module";

上面的代碼就等同于：

import { foo, bar } from "./module";export { foo, boo};

另一個與模塊相關(guān)的新功能是import.meta，它是一個給 JavaScript 模塊暴露特定上下文的元數(shù)據(jù)屬性的對象。它包含了這個模塊的信息，比如說這個模塊的 URL。

默認(rèn)情況下，圖像是相對于 HTML 文檔中的當(dāng)前 URL 加載的。import.meta.url可以改為加載相對于當(dāng)前模塊的圖像：

function loadThumbnail(relativePath) {  const url = new URL(relativePath, import.meta.url);  const image = new Image();  image.src = url;  return image;}const thumbnail = loadThumbnail("../img/thumbnail.png");container.append(thumbnail);

（3）在瀏覽器使用

目前主流瀏覽器都支持 ES 模塊：

如果想在瀏覽器中使用原生 ES 模塊方案，只需要在 script 標(biāo)簽上添加type="module"屬性。通過該屬性，瀏覽器知道這個文件是以模塊化的方式運(yùn)行的。而對于不支持的瀏覽器，需要通過nomodule屬性來指定某腳本為 fallback 方案：

<script type="module">  import module1 from "./module1"</script><script nomodule src="fallback.js"></script>

支持type="module"的瀏覽器會忽略帶有nomodule屬性的腳本。使用type="module"的另一個作用就是進(jìn)行 ES Next 兼容性的嗅探。因?yàn)橹С?ES 模塊化的瀏覽器，都支持 ES Promise 等特性。

由于默認(rèn)情況下模塊是延遲的，因此可能還希望以延遲方式加載 nomodule 腳本：

<script nomodule defer src="fallback.js"></script>

（4）在 Node.js 使用

上面提到，Node.js 使用的是 CommonJS 模塊規(guī)范，它也是支持 ES 模塊的。在 Node.js 13 之前，ES 模塊是一項(xiàng)實(shí)驗(yàn)性技術(shù)，因此，可以通過使用.mjs擴(kuò)展名保存模塊并通過標(biāo)志訪問它來使用模塊。

從 Node.js 13 開始，可以通過以下兩種方式使用模塊:

使用.mjs擴(kuò)展名保存模塊；在最近的文件夾中創(chuàng)建一個type="module"的package.json文件。

那如何在小于等于 12 版本的 Node.js 中使用 ES 模塊呢？可以在執(zhí)行腳本啟動時加上--experimental-modules，不過這一用法要求相應(yīng)的文件后綴名必須為.mjs：

node --experimental-modules module1.mjsimport module1 from "./module1.mjs"module1

關(guān)鍵詞：