js模塊 - amd cmd commonjs esm umd

寫過前端代碼大概率聽說過amd cmd umd commonjs esm這些名詞, 想當初我第一次看到這些的時候, 人都麻了, 都是些啥啊. 後來我知道了, 這些都是js的模塊規範.

amd - 瀏覽器中的js模塊化解決方案

AMD全稱是Async Module Definition非同步模塊定義

RequireJs是AMD模塊規範的一個具體實現.

AMD中定義一個計算器模塊calculator, 這個模塊依賴另一個名為math的模塊

define('calculator', ['math'], function(math) {
    return {
        add: function(left, right) { return math.add(left, right) },
        subtract: function(left, right) { return math.subtract(left, right) }
    }
})

使用剛纔定義的calculator模塊

require('calculator', function(calculator) {
    console.log('1 + 1 = ' + calculator.add(1, 1));
    console.log('2 - 2 = ' + calculator.subtract(2, 1));
})

cmd - 類似amd的用於瀏覽器中的js模塊規範

CMD全稱是Common Module Definition即通用模塊定義,. 像AMD與RequireJs關係一樣, 與CMD規範綁定的是sea.js

在定義模塊方面, CMD和AMD一樣通過define函數來定義模塊; 兩者的主要區別在於對依賴的載入上, CMD中不需要在define的參數中直接聲明需要用到的模塊

還是以聲明calculator模塊為例

define('calculator', function(require, exports) {
    var math = require('math');
    exports.add = function(left, right) { return math.add(left, right) };
    exports.subtract = function(left, right) { return math.subtract(left, right) };
})

可以看到calculator模塊所的依賴的math模塊沒有在define函數的參數中進行聲明, 而是通過require('math')來引入的

使用calculator模塊

seajs.use(['calculator'], function(calculator) {
    console.log('1 + 1 = ' + calculator.add(1, 1));
    console.log('2 - 2 = ' + calculator.subtract(2, 1));
})

commonjs - Node中使用的模塊規範

定義math模塊

module.exports = {
    add: function(left, right) {
        return left + right;
    },
    subtract: function(left, right) {
        return left - right;
    }
}

使用剛纔定義的math模塊, 並再定義一個calculator模塊

const math = require('./math.js');
module.exports = {
    add: math.add
}

umd - 一種同時相容amd cmd commonjs規範的規範

amd cmd通常只能在瀏覽器中使用, commonjs只能在服務端(Node)環境下使用, 這樣子搞會導致我們基於其中某一種模塊規範寫的js模塊無法在服務端和瀏覽器端進行復用. umd解決了這個問題, 它相容並包, 使得使用此規範寫的js模塊既可以在瀏覽器環境下使用, 也可以在Node(服務端)環境中用

(function (root, factory) {
    if (typeof exports === 'object' && typeof module === 'object')
        // commonjs
        module.exports = factory()
    else if (typeof define === 'function' && define.amd)
        // amd
        define([], factory)
    else if (typeof exports === 'object')
        // commonjs
        exports['math'] = factory()
    else
        // 全局對象, 瀏覽器中是 window
        root['math'] = factory()
})(this, function() {
    return { add: function(left, right) { return left + right; } }
})

esm - ES6模塊規範

使用import導入模塊, 通過export導出模塊

export { add: (left, right) => left + right; }

import { add } from './math.js';

console.log('1 + 1 = ' + add(1, 1));

小結

amd, cmd已經成為了過去式(個人感覺), 現在常用的模塊規範一般就是es6模塊和commonjs(只用於node)了, node中也已經提供了實驗性的es模塊支持.

瀏覽器對es的import和export的支持也已經很不錯了(除了IE其他主流瀏覽器都支持了)

好消息微軟將在2022-6-15停止對IE11在win10非長期支持版上的支持

作者：Laggage

出處：https://www.cnblogs.com/laggage/p/16115011.html

說明：轉載請註明來源