模塊化 —— CommonJS、AMD、UMD、ESM（下）

昨天瞭解了CommonJS和AMD，今天瞭解一下UMD和ESM

UMD

嚴格來講，UMD 並不屬於一套模塊規範，它主要用來處理 CommonJS、AMD、CMD 的差別兼容，是模塊代碼能在前面不一樣的模塊環境下都能正常運行

(function (root, factory) {
      if (typeof module === "object" && typeof module.exports === "object") {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    }
    else if (typeof define === "function" && define.amd) {
          // AMD 模塊環境下
        define(['jquery'], factory);
    }
}(this, function ($) { // $ 要導入的外部依賴模塊
    $('div')
    // ...
    function b(){}
    function c(){}

    // 模塊導出數據
    return {
        b: b,
        c: c
    }
}));

 

ESM

從 ECMAScript2015/ECMAScript6 開始，JavaScript 原生引入了模塊概念，並且如今主流瀏覽器也都有了很好的支持

立模塊做用域

一個文件就是模塊，擁有獨立的做用域，且導出的模塊都自動處於 嚴格模式下，即：'use strict'

導出模塊內部數據

使用 export 語句導出模塊內部數據

// 導出單個特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}

// 導出列表
export { name1, name2, …, nameN };

// 重命名導出
export { variable1 as name1, variable2 as name2, …, nameN };

// 默認導出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };

// 模塊重定向導出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

導入外部模塊數據

導入分爲兩種模式

• 靜態導入

• 動態導入

靜態導入

在瀏覽器中，import 語句只能在聲明瞭 type="module" 的 script 的標籤中使用。

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

靜態導入方式不支持延遲加載，import 必須這模塊的最開始

document.onclick = function () {

    // import 必須放置在當前模塊最開始加載
    // import m1 from './m1.js'

    // console.log(m1);

}

動態導入

此外，還有一個相似函數的動態 import()，它不須要依賴 type="module" 的 script 標籤。

關鍵字 import 能夠像調用函數同樣來動態的導入模塊。以這種方式調用，將返回一個 promise。

import('./m.js')
  .then(m => {
    //...
});
// 也支持 await
let m = await import('./m.js');

經過 import() 方法導入返回的數據會被包裝在一個對象中，即便是 default 也是如此