前端模組化IIFE，commonjs，AMD，UMD，ES6 Module規範超詳細講解

j植樹發表於2020-09-02

為什麼前端需要模組化

在沒有模組化的時候，多個指令碼引入頁面，會造成諸多問題，比如：

多人協同開發的時候，系統中可能會引入很多js指令碼，這些js會定義諸多全域性變數，這時候很容易出現變數名覆蓋的問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var info = "這是功能A";
    </script>
    <script type="text/javascript">
        var info = "這是功能B";
    </script>
    <script>
        console.log(info); // 這是功能B
    </script>
</body>
</html>

上面的例子中可以看到第一個js中定義的變數info的值被第二個js中的變數所覆蓋

當指令碼之間存在依賴關係的時候，單純的引用script看不出js之間的依賴，可讀性很差

<html>
<!-- 此處省略head -->
<body>
    <script type="text/javascript">
        function getMessage(){
            return "這是一條message"
        }
    </script>
    <script type="text/javascript">
        function showMessage(){
            console.log(getMessage());
        }
    </script>
    <script>
        showMessage(); // 這是一條message
    </script>
</body>
</html>

如果第一個指令碼沒有引入，那麼執行就會拋錯，也就是說第二個指令碼是依賴第一個指令碼的，但是這個依賴關係這裡看不出來

什麼是模組

模組我理解為就是一個區域性作用域，這個區域性作用域內部定義了一些區域性變數和方法，然後對外提供介面供外部呼叫，比如:

var moduleA = {
    name : "A"
}
var moduleB = {
    name : "B"
}

console.log(moduleA.name); // A

這裡就可以看成是定義了兩個最簡單的模組，我們可以通過模組去訪問各自的變數

是什麼IIFE

IIFE(Immediately Ivoked Function Expression),即立即執行函式表示式，所謂立即執行，就是宣告一個函式，宣告完了立即執行

var IIFE = function(){
    // ...
}
IIFE();

這樣是立即執行但是肯定會有一個問題，函式名衝突了怎麼辦？所以有了我們最常見的寫法,宣告一個自執行匿名函式

(function(){
    // ...
})()

如果看過jquery的一些外掛的原始碼的話經常能看到這樣的程式碼

(function($){
    // ...
})(jQuery)

這裡其實就是表明這個模組依賴了jquery

舉個例子

定義模組A和模組B，模組B依賴模組A

js檔案

// 模組A moduleA.js
(function(window){
    var name = "module A";
    // 對外暴露物件moduleA
    window.moduleA = {
        getName(){
            return name;
        }
    }
})(window)

// 模組B moduleB.js
(function(window, moduleA){
    // 對外暴露物件moduleB
    window.moduleB = {
        showFirstModuleName(){
            console.log(moduleA.getName());
        }
    }
})(window, moduleA)

// main.js
(function(moduleB){
    console.log(moduleB.showFirstModuleName());
})(moduleB)

html檔案中

<html>
<!-- 此處省略head -->
<body>
    <script type="text/javascript" type="./moduleA.js"></script>
    <script type="text/javascript" type="./moduleB.js"></script>
    <script type="text/javascript" type="./main.js"></script>
</body>
</html>

上述例子展示瞭如何用IIFE來定義模組，這樣寫有幾個缺點：

定義了3個模組，那麼就引入了3個js指令碼，那如果有更多模組呢，那就意味著很頁面載入時會像伺服器發起多次http請求，這是不好的
html中script的標籤順序是固定的，因為模組main依賴moduleB，moduleB依賴moduleA，所以moduleA必須先宣告，這樣在moduleB的IIFE執行時候才能正常，不然會拋處ReferenceError

模組化標準

Commonjs

nodejs採用的模組化標準，commonjs使用方法require來引入模組,這裡require()接收的引數是模組名或者是模組檔案的路徑，如果是模組名的話，require會到node_modules中去找對應名稱的模組來載入

const _ = require("lodash");

這裡就引入了一個名為lodash的模組，那麼一個模組應該如何對外提供介面呢？
commonjs提供兩種方式對外暴露介面

// 第一種module.exports
const name = "張三";
module.exports = {
    getName(){
        return name
    }
}

// 第二種
const name = "張三"
exports.getName = function(){
    return name;
}

其實本質上，模組對外暴露的就是exports這個物件，module.exports =這種寫法，相當於直接給exports物件賦值，而export. name這種寫法其實就是給exports物件上新增了一個名為"name"的方法

特徵

在node執行時執行
require是對值的拷貝

// moduleA.js
let count = 1;

// 非同步讓count++
setTimeout(()=>{
    count++;
});

exports.count = count;

// main.js
const {count} = require("./moduleA.js");

// 同步列印count
console.log(count); // 列印值為1

// 非同步列印count
setTimeout(()=>{
    console.log(count); // 列印值為1
});

可見改變了moduleA中的count，並不影響main.js中引入的值

不做特殊處理（webpack打包）commonjs只能執行在node環境，瀏覽器環境不能直接使用，window上沒有定義require這個方法，所以解釋指令碼的時候就會拋處ReferenceError
commonjs是同步載入模組，在node環境中require引入一個模組的時候，這個過程是同步的，必須等模組載入完才能繼續後續操作

IIFE中的例子用commonjs實現

上述IIFE中的例子，用commonjs來實現就看起來就更清晰:

// 模組A moduleA.js
const name = "module A"
module.exports = {
    getName(){
        return name;
    }
}

// 模組B moduleB.js
const {getName} = require("./moduleA.js"); // 引入moduleA

exports.showFirstModuleName = function(){
    console.log(getName());
}

// main.js
const moduleB = require("./moduleB.js");

moduleB.showFirstModuleName(); // module A

上文中講commonjs的特性的時候提到過，不能直接在瀏覽器中執行，所以我們需要先使用打包用具（webpack等工具，以後的文章中會寫）把js打包處理成瀏覽器能直接執行的bundle.js,在引入到html中

<html>
<!-- 此處省略head -->
<body>
    <script type="text/javascript" type="./dist/bundle.js"></script>
</body>
</html>

或者直接在用node執行main：

-> node main.js

AMD和RequireJS

全稱Asynchronous Module Definition非同步模組定義，與commonjs不同AMD是完全針對瀏覽器的模組化定義，AMD載入模組是非同步的

如何定義一個模組

AMD規範中定義模組用到方法define，還是以之前的例子來舉例，先來定義一個沒有依賴的模組moduleA

// 定義一個moduleA.js
define(function(){
    var name = "module A"
    return {
        getName(){
            return name
        }
    }
})

這裡define只接受了一個回撥函式作為引數，這個回撥是不是與IIFE有點相似，再來定義一個依賴moduleA的moduleB

// 定義一個moduleB.js
define(["moduleA"], function(moduleA){
    return {
        showFirstModuleName(){
            console.log(moduleA.getName());
        }
    }
});

這裡define的第一個引數是一個陣列，陣列裡面放的是當前定義的模組所依賴的模組的名字，而後面回撥函式接收的引數就是對應的模組了,也許看到這裡你會想問，為什麼這裡只寫一個模組名“moduleA”就能找到對應的moduleA.js的檔案了呢？後面會講

如何在入口檔案引入模組

我們已經實現了moduleA.js和moduleB.js接下來要實現入口main.js，AMD的標準中，引入模組需要用到方法require,看到這你可能會有疑問，前面說commonjs的時候，不是說了window物件上沒定義require嗎?這裡就不得不提到一個庫，那就是RequireJS

RequireJS is a JavaScript file and module loader.

官網介紹RequireJS是一個js檔案和模組的載入器，提供了載入和定義模組的api，當在頁面中引入了RequireJS之後，我們便能夠在全域性呼叫define和require，下面來實現main.js

// 實現main.js
require(["moduleB"], function(moduleB){
    moduleB.showFirstModuleName();
});

三個js檔案都寫好了，我們該如何引入到頁面中呢?檢視RequireJS官網已經給出了答案

<html>
<!-- 此處省略head -->
<body>
    <!--引入requirejs並且在這裡指定入口檔案的地址-->
    <script data-main="js/main.js" src="js/require.js"></script>
</body>
</html>

要通過script引入requirejs，然後需要為標籤加一個屬性data-main來指定入口檔案

使用RequireJS需要的配置

前面介紹用define來定義一個模組的時候，直接傳“模組名”似乎就能找到對應的檔案，這一塊是在哪實現的呢？其實在使用RequireJS之前還需要為它做一個配置

// main.js
require.config({
    paths : {
        // key為模組名稱， value為模組的路徑
        "moduleA" : "./moduleA",
        "moduleB" : "./moduleB"
    }
});

require(["moduleB"], function(moduleB){
    moduleB.showFirstModuleName();
});

這個配置中的屬性paths應該說是一目瞭然，看了就能明白，為什麼引入的時候只寫模組名就能找到對應路徑了吧，不過這裡有一項要注意的是，路徑後面不能跟.js檔案字尾名，更多的配置項請參考RequireJS官網

ES6 module

es6提出了新的模組化方案，這個方案應該也是現在最流行的。通過關鍵字export value來暴露模組，通過import moduleName from path來引入模組,是不是看起來很簡單？但是其實這裡還有很多細節

如何執行

瀏覽器端是不能直接執行的，需要先用babel將es6語法轉譯成es5（把import轉譯成了require），然後再使用打包工具打包，最後在頁面中引入
node端在某個版本後有辦法直接執行了（抱歉沒查是哪個版本），首先js檔案的字尾名都要改成.mjs，然後再命令列直接執行node --experimental-modules main.mjs

多次暴露

模組可以多次呼叫export來暴露任何值

// moduleA.mjs
// 暴露一個變數
export let name = "張三"

// 暴露一個方法
export function getName(){
    return name;
}

export function setName(newName){
    name = newName;
}

// main.mjs
import {name, getName, setName} from "./moduleA";

console.log(name); // 張三
setName("李四");
console.log(getName()); // 李四

這裡import後面必須跟結構賦值如果寫成下面這樣，會輸出undefined

import moduleA from "./moduleA"

console.log(moduleA); // undefined;在node環境下執行會報錯

那如果模組分別暴露的方法有很多怎麼辦呢，這時候結構賦值不是要寫很多個方法？其實還可以這樣引入

import * as moduleA from "./moduleA";

console.log(moduleA.name); // 張三
moduleA.setName("李四");
console.log(moduleA.getName()); // 李四

預設暴露

es6還提供了一種暴露方法叫預設暴露，預設暴露即export default value這裡的value可以是任何值，為什麼上面舉得import的反例，引入結果會是undefined呢，再看一個例子

// moduleA.mjs
export default {
    name : 張三,
    setName(newName){
        this.name = newName;
    },
    getName(){
        return this.name;
    }
}

// main.mjs
import moduleA from "./moduleA"

console.log(moduleA);  // { name: '張三', setName: [Function: setName], getName: [Function: getName] }

這裡其實就能看出來，直接引入給moduleA賦值的其實是export default value後面的value

UMD

UMD全稱為Universal Module Definition,也就是通用模組定義，為什麼叫通用呢，我們怎麼描述一個模組是通用的呢？舉個例子，假如現在我的專案使用的是amd模組規範，那麼現在我引入了一個用commonjs規範寫的模組，能正常執行嗎？肯定不行的，而UMD就是解決了這個問題。

特點

umd所謂的通用，就是相容了commonjs和amd規範，這意味著無論是在commonjs規範的專案中，還是amd規範的專案中，都可以直接引用umd規範的模組使用（牛逼！）

原理

原理其實就是在模組中去判斷全域性是否存在exports和define，如果存在exports，那麼以commonjs的方式暴露模組，如果存在define那麼以amd的方式暴露模組

(function(window, factory){
    if(typeof exports === "objects"){
        // commonjs
        module.exports = factory();
    }else if(typeof define === "function" && define.amd){
        // amd
        define(factory);
    }else{
        window.moduleA = factory();
    }
})(window, function(){
    // 返回module
    let modlueA = {
        name : "張三",
        setName(newName){
            thie.name = newName;
        },
        getName(){
            return this.name;
        }
    }
    return modlueA;s
})

AMD , CMD, CommonJS，ES Module，UMD
2018-08-22
JS
模組化之AMD、CMD、UMD、commonJS
2019-04-30
JS
前端模組化：CommonJS,AMD,CMD,ES6
2018-03-15
前端JS
js模組 - amd cmd commonjs esm umd
2022-04-08
JS
前端模組化：CommonJS,AMD,CMD,ES6(轉載)
2019-03-19
前端JS
AMD模組化規範
2017-07-13
關於前端模組化 CommonJS、AMD、CMD、ES6中模組載入
2019-03-03
前端JS
AMD, CMD, CommonJS和UMD
2016-04-05
JS
前端模組化（CommonJs,AMD和CMD）
2017-03-22
前端JS
Commonjs規範與模組化
2019-02-16
JS
前端進階課程之模組化（二）AMD規範
2018-11-23
前端
前端進階課程之模組化（一）CommonJS規範
2018-11-23
前端JS
commonJs、AMD、UMD、es6 到底是怎麼用的
2021-10-11
JS
前端模組化AMD、CMD、CommonJS&ES6
2019-04-28
前端JS
前端模組化規範
2019-02-16
前端
CommonJS,AMD,CMD,ES6,require 和 import 詳解
2018-05-15
JSUIImport
前端JavaScript規範非常詳細
2015-05-10
前端JavaScript
web系列之模組化——AMD、CMD、CommonJS、ES6 整理&&比較
2018-10-24
WebJS
AMD、CMD、UMD 模組的寫法
2015-03-24
JavaScript 模組化程式設計（二）：AMD規範
2017-01-31
JavaScript程式設計
Javascript模組化程式設計（二）：AMD規範
2012-10-30
JavaScript程式設計
ES6 模組化與 CommonJS 模組化區別
2019-02-16
JS
前端模組化之CommonJS
2021-02-06
前端JS
Go Struct超詳細講解
2019-04-07
GoStruct
03 AMD規範的基礎使用詳解
2020-07-20
CommonJS、CMD和AMD規範分別是什麼
2017-03-25
JS
深入 CommonJs 與 ES6 Module
2020-04-06
JS
深入 CommonJs 與 ES6 Module
2019-04-01
JS
基於CommonJS規範，簡單實現NodeJs模組化
2018-09-13
NodeJS
實現 CommonJs 規範中的 Require 模組
2018-06-25
JSUI
前端模組化之ES Module
2021-02-08
前端
Commonjs規範
2019-02-22
JS
CommonJS、AMD、CMD、ES Module 一文流
2022-05-20
JS
Promises A+規範原文解讀 + es6實現（附詳細註釋）
2019-03-03
Promise
『前端規範化』CSS命名規範化
2019-03-23
前端CSS
ES6中rest引數詳細講解
2021-09-09
REST
HTML 超級連結詳細講解
2017-05-23
HTML
JS模組化規範
2018-12-24
JS