前端面試中?CJS?,?UMD?,?ESM和?IIFE分別是什么意思？

?CJS?,?UMD?,?ESM?,?IIFE?是JavaScript用來(lái)實(shí)現(xiàn)"模塊"的不同規(guī)則。

CJS

?CommonJS?的簡(jiǎn)寫(xiě)，只能在 NodeJS 上運(yùn)行，使用 ?require("module")? 讀取并加載模塊。

缺點(diǎn)：不支持瀏覽器，執(zhí)行后才能拿到依賴(lài)信息，由于用戶(hù)可以動(dòng)態(tài) require，無(wú)法做到提前分析依賴(lài)以及Tree-Shaking 。

CommonJS 規(guī)范加載模塊是同步的，也就是說(shuō)，只有加載完成，才能執(zhí)行后面的操作。

用法如下：

// 文件名: foo.js
var $ = require('jquery');

function myFunc(){};

// 暴露公共方法（一個(gè)）
module.exports = myFunc;

AMD

?Asynchronous Module Definition?的縮寫(xiě)（代表異步模塊定義），可以看作 CJS 的異步版本，制定了一套規(guī)則使模塊可以被異步 require 進(jìn)來(lái)并在回調(diào)函數(shù)里繼續(xù)使用，然后 require.js 等前端庫(kù)也可以利用這個(gè)規(guī)則加載代碼了。

用法如下:

// 文件名: foo.js
define(['jquery'], function ($) {
    // 方法
    function myFunc(){};

    // 暴露公共方法
        return myFunc;
});

定義的第一個(gè)部分是一個(gè)依賴(lài)數(shù)組，第二個(gè)部分是回調(diào)函數(shù)，只有當(dāng)依賴(lài)的組件可用時(shí)（像RequireJS這樣的腳本加載器會(huì)負(fù)責(zé)這一部分，包括找到文件路徑）回調(diào)函數(shù)才被執(zhí)行。

理想狀態(tài)下，期望其依賴(lài)是異步加載的，通過(guò)在中注入script，不阻塞瀏覽器的加載和渲染，但實(shí)際環(huán)境下，其表現(xiàn)的沒(méi)有那么好，因此需要 amd 模塊為一個(gè)單文件模塊并與require.js 優(yōu)化器配合來(lái)進(jìn)行渲染。

UMD

?Universal Module Definition?的縮寫(xiě)（代表通用模塊定義），同時(shí)兼容 CJS 和 AMD，并且支持直接在前端用 <script src="lib.umd.js"></script> 的方式加載?，F(xiàn)在還在廣泛使用，不過(guò)可能將被 ESM 和 IIFE 逐漸代替。

用法如下：

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之類(lèi)的
        module.exports = factory(require('jquery'));
    } else {
        // 瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function($) {
    // 方法
    function myFunc() {};

    // 暴露公共方法
    return myFunc;
}));

IIFE

?Immediately Invoked Function Expression?的縮寫(xiě)（立即調(diào)用函數(shù)表達(dá)式），只是一種寫(xiě)法，可以隱藏一些局部變量，可以用來(lái)代替 UMD 作為純粹給前端使用的寫(xiě)法。

IIFE的寫(xiě)法如下：

(function () {
    // 語(yǔ)句
})();

ESM

?ECMAScript Module?的縮寫(xiě)，使用 import export 來(lái)管理依賴(lài)。由于它們只能寫(xiě)在所有表達(dá)式外面，所以打包器可以輕易做到分析依賴(lài)以及 Tree-Shaking。ESM 也支持動(dòng)態(tài)加載（import ）。

瀏覽器直接通過(guò) <script type="module"> 即可使用該寫(xiě)法。

用法如下：

import React from 'react';

總結(jié)

• 由于 ?ESM? 具有簡(jiǎn)單的語(yǔ)法，異步特性和可搖樹(shù)性，因此它是最好的模塊化方案
• ?UMD? 隨處可見(jiàn)，通常在 ESM 不起作用的情況下用作備用
• ?CJS? 是同步的，適合后端
• ?AMD? 是異步的，適合前端