這些 ECMAScript 模塊知識，都是我需要知道的

作者：前端小智 2020-09-08 08:27:25

ECMAScript模塊(簡稱ES模塊)是一種JavaScript代碼重用的機制，于2015年推出，一經推出就受到前端開發者的喜愛。在2015之年，JavaScript 還沒有一個代碼重用的標準機制。多年來，人們對這方面的規范進行了很多嘗試，導致現在有多種模塊化的方式。

[[341136]]

ES 模塊是什么?

你可能聽說過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(); 
});

作者：Valentino Gagliardib 譯者：前端小智來源：valentinog

原文：https://www.valentinog.com/blog/es-modules/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。

責任編輯：武曉燕來源：大遷世界

JavaScript 模塊 ECMAScript

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

這些 ECMAScript 模塊知識，都是我需要知道的