這些 ECMAScript 模塊知識，都是我需要知道的
ES 模塊是什么?
ECMAScript模塊(簡稱ES模塊)是一種JavaScript代碼重用的機制，于2015年推出，一經(jīng)推出就受到前端開發(fā)者的喜愛。在2015之年，JavaScript 還沒有一個代碼重用的標(biāo)準(zhǔn)機制。多年來，人們對這方面的規(guī)范進(jìn)行了很多嘗試，導(dǎo)致現(xiàn)在有多種模塊化的方式。
你可能聽說過AMD模塊，UMD，或CommonJS，這些沒有孰優(yōu)孰劣。最后，在ECMAScript 2015中，ES 模塊出現(xiàn)了。
我們現(xiàn)在有了一個“正式的”模塊系統(tǒng)。
ES 模塊無處不在?
理論上，ES 模塊應(yīng)該在所有JavaScript環(huán)境中。實際上，ES 模塊的主要應(yīng)用還是在瀏覽器上。
2020年5月，Node.js v12.17.0 增加了在不使用標(biāo)記前提下對ECMAScript模塊的支持。這意味著我們現(xiàn)在可以在Node.js中使用import和export，而無需任何其他命令行標(biāo)志。
ECMAScript模塊要想在任何JavaScript環(huán)境通用，可能還需要很長的路要走，但方向是正確的。
ES 模塊是什么樣的
ES 模塊是一個簡單的文件，我們可以在其中聲明一個或多個導(dǎo)出。以下面utils.js為例:
- // utils.js
- export function funcA() {
- return "Hello named export!";
- }
- export default function funcB() {
- return "Hello default export!";
- }
這里有兩個導(dǎo)出。
第一個是命名導(dǎo)出，后面是export default，表示為默認(rèn)導(dǎo)出。
假設(shè)我們的項目文件夾中有一個名為utils.js的文件，我們可以將這個模塊提供的對象導(dǎo)入到另一個文件中。
如何從 ES模塊 導(dǎo)入
假設(shè)我們在項目文中還有一個Consumer.js的文件。要導(dǎo)入utils.js公開的函數(shù)，我們可以這樣做：
- // consumer.js
- import { funcA } from "./util.js";
這種對應(yīng)我們的命名導(dǎo)入方式.
如果我們要導(dǎo)入 utils.js 中的默認(rèn)導(dǎo)出也就是 funcB 方法，我們可以這樣做：
- // consumer.js
- import { funcA } from "./util.js";
當(dāng)然，我們可以導(dǎo)入同時導(dǎo)入命名和默認(rèn)的：
- // consumer.js
- import funcB, { funcA } from "./util.js";
- funcB();
- funcA();
我們也可以用星號導(dǎo)入整個模塊：
- import * as myModule from './util.js';
- myModule.funcA();
- myModule.default();
注意，這里要使用默認(rèn)到處的方法是使用 default() 而不是 funcB()。
從遠(yuǎn)程模塊導(dǎo)入：
- import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";
- const store = createStore(/* do stuff */)
瀏覽器中的 ES 模塊
現(xiàn)代瀏覽器支持ES模塊，但有一些警告。要使用模塊，需要在 script 標(biāo)簽上添加屬性 type， 對應(yīng)值 為 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 內(nèi)容如下：
- export function appendResult(element) {
- const result = Math.random();
- element.innerText += result;
- }
動態(tài)導(dǎo)入
ES 模塊是靜態(tài)的，這意味著我們不能在運行時更改導(dǎo)入。隨著2020年推出的動態(tài)導(dǎo)入(dynamic imports)，我們可以動態(tài)加載代碼來響應(yīng)用戶交互(webpack早在ECMAScript 2020推出這個特性之前就提供了動態(tài)導(dǎo)入)。
考慮下面的代碼：
- <!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>
再考慮一個帶有兩個導(dǎo)出的JavaScript模塊
- // util.js
- export function funcA() {
- console.log("Hello named export!");
- }
- export default function funcB() {
- console.log("Hello default export!");
- }
為了動態(tài)導(dǎo)入 util.js 模塊，我們可以點擊按鈕在去導(dǎo)入：
- / loader.js
- const btn = document.getElementById("btn");
- btn.addEventListener("click", () => {
- // loads named export
- import("./util.js").then(({ funcA }) => {
- funcA();
- });
- });
這里使用解構(gòu)的方式，取出**命名導(dǎo)出 ** funcA 方法：
- ({ funcA }) => {}
ES模塊實際上是JavaScript對象：我們可以解構(gòu)它們的屬性以及調(diào)用它們的任何公開方法。
要使用動態(tài)導(dǎo)入的默認(rèn)方法，可以這樣做
- // loader.js
- const btn = document.getElementById("btn");
- btn.addEventListener("click", () => {
- import("./util.js").then((module) => {
- module.default();
- });
- });
當(dāng)作為一個整體導(dǎo)入一個模塊時，我們可以使用它的所有導(dǎo)出
- // loader.js
- const btn = document.getElementById("btn");
- btn.addEventListener("click", () => {
- // loads entire module
- // uses everything
- import("./util.js").then((module) => {
- module.funcA();
- module.default();
- });
- });
還有另一種用于動態(tài)導(dǎo)入的常見樣式，如下所示：
- 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();
- })
- })
動態(tài)導(dǎo)入看起來不錯，但是它們有什么用呢?
使用動態(tài)導(dǎo)入，我們可以拆分代碼，并只在適當(dāng)?shù)臅r候加載重要的代碼。在 JavaScript 引入動態(tài)導(dǎo)入之前，這種模式是webpack(模塊綁定器)獨有的。
像React和Vue通過動態(tài)導(dǎo)入代碼拆分來加載響應(yīng)事件的代碼塊，比如用戶交互或路由更改。
動態(tài)導(dǎo)入JSON文件
假設(shè)我們項目有一個 person.json 文件，內(nèi)容如下：
- {
- "name": "Jules",
- "age": 43
- }
現(xiàn)在，我們需要動態(tài)導(dǎo)入該文件以響應(yīng)某些用戶交互。
因為 JSON 文件不是一個方法，所以我們可以使用默認(rèn)導(dǎo)出方式：
- 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);
- });
- });
這里我們使用解構(gòu)的方式取出 name 和 age :
- const { name, age } = module.default;
動態(tài)導(dǎo)入與 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();
- })
動態(tài)導(dǎo)入的名字
使用import()導(dǎo)入模塊時，可以按照自己的意愿命名它，但要調(diào)用的方法名保持一致：
- import("./util.js").then((module) => {
- module.funcA();
- module.default();
- });
或者：
- import("./util.js").then((utilModule) => {
- utilModule.funcA();
- utilModule.default();
- });
作者：Valentino Gagliardib 譯者：前端小智 來源：valentinog
原文：https://www.valentinog.com/blog/es-modules/
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
