ECMAScript模塊如何使用

這篇“ECMAScript模塊如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ECMAScript模塊如何使用”文章吧。

什么是ES模塊？

ECMAScript模塊（簡稱ES模塊）是2015年推出的 JavaScript 中代碼重用的機制。在高度碎片化的 JavaScript 模塊場景中，它終于成為了標準。

在2015年之前， JavaScript  還沒有一個標準的代碼重用機制。這方面曾有過很多標準化的嘗試，導致這些年亂七八糟的碎片化。

你可能聽說過 AMD 模塊、UMD 或者 CommonJS。沒有明顯的贏家。終于，隨著 ECMAScript 2015，ES模塊登陸語言。

我們現在有了一個 "官方 "的模塊系統。

ECMAScript模塊無處不在？

理論上，ECMAScript 模塊應該普遍適用于所有  JavaScript  環境。實際上，瀏覽器仍然是ES模塊的主要目標。

2020年5月，Node.js v12.17.0 發貨時，支持 ECMAScript 模塊，沒有標志。這意味著我們現在可以在 Node.js 中使用導入和導出，而無需任何額外的命令行標志。

在 ECMAScript 模塊在任何 JavaScript 環境中普遍工作之前，還有很長的路要走，但方向是正確的。

ES模塊是怎樣的？

一個ES模塊就是一個簡單的文件，我們可以聲明一個或多個出口。以這個虛構的 utils.js 為例。

// utils.js
export function funcA() {
  return "Hello named export!";
}


export default function funcB() {
  return "Hello default export!";
}

我們這里有兩個導出。

第一個是一個命名的導出，后面是一個默認的導出，表示為導出默認。

假設我們的項目文件夾中住著這個名為 utils.js 的文件，我們可以在另一個文件中導入這個模塊提供的對象。

如何從ES模塊導入

假設我們在項目文件夾中還有一個名為 consumer.js 的文件。要導入 utils.js 所暴露的函數，我們可以這樣做。

// consumer.js
import { funcA } from "./util.js";

這種語法是一種命名的導入方式，與命名的導出方式有異曲同工之妙。

如果要導入定義為默認導出的 funcB，我們可以這樣做：

// consumer.js
import funcB from "./util.js";

如果我們想在一個文件中同時導入默認導出和命名導出，我們可以將其壓縮為：

// consumer.js
import funcB, { funcA } from "./util.js";


funcB();
funcA();

我們也可以用 star 導入整個模塊。

import * as myModule from "./util.js";


myModule.funcA();
myModule.default();

要注意，在這種情況下，必須顯式調用默認導出。

要從遠程模塊導入。

import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";


const store = createStore(/* do stuff */)

瀏覽器中的ECMAScript模塊

現代瀏覽器支持 ES 模塊，盡管有一些注意事項。要加載一個模塊，請在腳本標簽的 type 屬性中添加模塊。

    ECMAScript modules in the browser




<p id="el">The result is: </p>




    import { appendResult } from "./myModule.js";


    const el = document.getElementById("el");
    appendResult(el);

這里 myModule.js 是同一個項目文件夾下的一個簡單模塊。

export function appendResult(element) {
  const result = Math.random();
  element.innerText += result;
}

雖然可以直接在瀏覽器中使用ES模塊，但現在捆綁 JavaScript 應用的任務仍然是 webpack 等工具的專屬，以獲得最大的靈活性、代碼拆分和對舊瀏覽器的兼容性。

動態導入

ES 模塊是靜態的，這意味著我們無法在運行時更改導入。有了2020年登陸的動態導入，我們可以根據用戶的交互動態加載我們的代碼（webpack在ECMAScript 2020中提供動態導入功能之前就已經提供了）。

考慮一個簡單的 HTML，它可以加載一個腳本。

    Dynamic imports




<button id="btn">Load!</button>

也可以考慮用幾個導出的 JavaScript 模塊。

// util.js
export function funcA() {
  console.log("Hello named export!");
}


export default function funcB() {
  console.log("Hello default export!");
}

如果要動態加載這個模塊，也許點擊一下，我們可以這樣做。

// loader.js
const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  // loads named export
  import("./util.js").then(({ funcA }) => {
    funcA();
  });
});

在這里，我們通過重構模塊的對象，只加載命名的導出。

({ funcA }) => {}

ES 模塊實際上就是 JavaScript 對象：我們可以重構它們的屬性，也可以調用它們的任何暴露的方法。

要動態地導入一個默認的導出，我們可以這樣做。

// loader.js
const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  // loads entire module
  // runs default export
  import("./util.js").then((module) => {
    module.default();
  });
});

當整體導入一個模塊時，我們可以使用它的所有輸出。

// loader.js
const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  // loads entire module
  // uses everything
  import("./util.js").then((module) => {
    module.funcA();
    module.default();
  });
});

還有一種常見的動態導入方式，我們在文件的頂部提取邏輯。

const loadUtil = () => import("./util.js");


const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  //
});

在這里，loadUtil 將返回一個 Promise，準備進行鏈鎖。

const loadUtil = () => import("./util.js");


const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  loadUtil().then(module => {
    module.funcA();
    module.default();
  });
});

動態導入看起來很好，但是它們有什么用呢？

通過動態導入，我們可以拆分我們的代碼，只在合適的時刻加載重要的內容。在動態導入登陸JavaScript之前，這種模式是webpack這個模塊捆綁器的專屬。

像React和Vue這樣的前端庫，就大量使用了通過動態導入進行代碼拆分的方式，在響應事件時加載分塊代碼，比如用戶交互或者路由變化。

JSON文件的動態導入

假設你在代碼庫的某個地方有一個JSON文件person.json。

{
  "name": "Jules",
  "age": 43
}

現在，你想動態地導入這個文件，以響應一些用戶的交互。

由于JSON文件導出的只是一個默認的導出，它不是一個函數，所以你只能像這樣訪問默認的導出。

const loadPerson = () => import("./person.json");


const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  loadPerson().then(module => {
    const { name, age } = module.default;
    console.log(name, age);
  });
});

這里，我們從默認的導出中重構name和age。

    const { name, age } = module.default;

使用async/await動態導入

import()語句返回的總是一個Promise，這意味著我們可以對它使用async/await。

const loadUtil = () => import("./util.js");


const btn = document.getElementById("btn");


btn.addEventListener("click", async () => {
  const utilsModule = await loadUtil();
  utilsModule.funcA();
  utilsModule.default();
});

動態導入名稱

當用import()導入一個模塊時，你可以隨心所欲地給它命名，只要保持一致即可。

  import("./util.js").then((module) => {
    module.funcA();
    module.default();
  });

或者：

  import("./util.js").then((utilModule) => {
    utilModule.funcA();
    utilModule.default();
  });

以上就是關于“ECMAScript模塊如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。