溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“ECMAScript模塊知識有哪些”，在日常操作中，相信很多人在ECMAScript模塊知識有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ECMAScript模塊知識有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
ES 模塊是什么?
ECMAScript模塊(簡稱ES模塊)是一種JavaScript代碼重用的機制，于2015年推出，一經推出就受到前端開發者的喜愛。在2015之年，JavaScript 還沒有一個代碼重用的標準機制。多年來，人們對這方面的規范進行了很多嘗試，導致現在有多種模塊化的方式。
你可能聽說過AMD模塊，UMD，或CommonJS，這些沒有孰優孰劣。最后，在ECMAScript 2015中，ES 模塊出現了。
我們現在有了一個“正式的”模塊系統。
ES 模塊無處不在?
理論上，ES 模塊應該在所有JavaScript環境中。實際上，ES 模塊的主要應用還是在瀏覽器上。
2020年5月，Node.js v12.17.0 增加了在不使用標記前提下對ECMAScript模塊的支持。這意味著我們現在可以在Node.js中使用import和export，而無需任何其他命令行標志。
ECMAScript模塊要想在任何JavaScript環境通用，可能還需要很長的路要走，但方向是正確的。
ES 模塊是什么樣的
ES 模塊是一個簡單的文件，我們可以在其中聲明一個或多個導出。以下面utils.js為例:
// utils.js export function funcA() { return "Hello named export!"; } export default function funcB() { return "Hello default export!"; }這里有兩個導出。
第一個是命名導出，后面是export default，表示為默認導出。
假設我們的項目文件夾中有一個名為utils.js的文件，我們可以將這個模塊提供的對象導入到另一個文件中。
如何從 ES模塊 導入
假設我們在項目文中還有一個Consumer.js的文件。要導入utils.js公開的函數，我們可以這樣做：
// consumer.js import { funcA } from "./util.js";這種對應我們的命名導入方式.
如果我們要導入 utils.js 中的默認導出也就是 funcB 方法，我們可以這樣做：
// consumer.js import { funcA } from "./util.js";當然，我們可以導入同時導入命名和默認的：
// consumer.js import funcB, { funcA } from "./util.js"; funcB(); funcA();我們也可以用星號導入整個模塊：
import * as myModule from './util.js'; myModule.funcA(); myModule.default();
注意，這里要使用默認到處的方法是使用 default() 而不是 funcB()。
從遠程模塊導入：
import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs"; const store = createStore(/* do stuff */)瀏覽器中的 ES 模塊
現代瀏覽器支持ES模塊，但有一些警告。要使用模塊，需要在 script 標簽上添加屬性 type， 對應值 為 module。
<html lang="en"> <head> <meta charset="UTF-8"> <title>ECMAScript modules in the browser</title> </head> <body> <p id="el">The result is: </p> </body> <script type="module"> import { appendResult } from "./myModule.js"; const el = document.getElementById("el"); appendResult(el); </script> </html>myModule.js 內容如下：
export function appendResult(element) { const result = Math.random(); element.innerText += result; }動態導入
ES 模塊是靜態的，這意味著我們不能在運行時更改導入。隨著2020年推出的動態導入(dynamic imports)，我們可以動態加載代碼來響應用戶交互(webpack早在ECMAScript 2020推出這個特性之前就提供了動態導入)。
考慮下面的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dynamic imports</title> </head> <body> <button id="btn">Load!</button> </body> <script src="loader.js"></script> </html>
再考慮一個帶有兩個導出的JavaScript模塊
// util.js export function funcA() { console.log("Hello named export!"); } export default function funcB() { console.log("Hello default export!"); }為了動態導入 util.js 模塊，我們可以點擊按鈕在去導入：
/ loader.js const btn = document.getElementById("btn"); btn.addEventListener("click", () => { // loads named export import("./util.js").then(({ funcA }) => { funcA(); }); });這里使用解構的方式，取出**命名導出 ** funcA 方法：
({ funcA }) => {}ES模塊實際上是JavaScript對象：我們可以解構它們的屬性以及調用它們的任何公開方法。
要使用動態導入的默認方法，可以這樣做
// loader.js const btn = document.getElementById("btn"); btn.addEventListener("click", () => { 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文件
假設我們項目有一個 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模塊知識有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
