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

時間 2020-09-10

標籤這些 ecmascript 模塊知識都是須要知道欄目 JavaScript 简体版

原文原文鏈接

做者：Valentino Gagliardi
譯者：前端小智
來源：valentinog

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

ES 模塊是什麼？

ECMAScript模塊（簡稱ES模塊）是一種JavaScript代碼重用的機制，於2015年推出，一經推出就受到前端開發者的喜好。在2015之年，JavaScript 尚未一個代碼重用的標準機制。多年來，人們對這方面的規範進行了不少嘗試，致使如今有多種模塊化的方式。html

你可能據說過AMD模塊，UMD，或CommonJS，這些沒有孰優孰劣。最後，在ECMAScript 2015中，ES 模塊出現了。前端

咱們如今有了一個「正式的」模塊系統。node

ES 模塊無處不在？

理論上，ES 模塊應該在全部JavaScript環境中。實際上，ES 模塊的主要應用仍是在瀏覽器上。webpack

2020年5月，Node.js v12.17.0 增長了在不使用標記前提下對ECMAScript模塊的支持。這意味着咱們如今能夠在Node.js中使用import和export ，而無需任何其餘命令行標誌。git

ECMAScript模塊要想在任何JavaScript環境通用，可能還須要很長的路要走，但方向是正確的。github

ES 模塊是什麼樣的

ES 模塊是一個簡單的文件，咱們能夠在其中聲明一個或多個導出。如下面utils.js爲例:web

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

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

這裏有兩個導出。json

第一個是命名導出，後面是export default，表示爲默認導出。redux

假設咱們的項目文件夾中有一個名爲utils.js的文件，咱們能夠將這個模塊提供的對象導入到另外一個文件中。promise

如何從 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();
  });

原文：https://www.valentinog.com/bl...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索【大遷世界】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。