管理书籍排行榜,怎么写网络小说,遮天辰东小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

ES 模塊是什么?

金水網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,金水網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為金水成百上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設要多少錢，請找那個售后服務好的金水做網(wǎng)站的公司定做！

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

你可能聽說過AMD模塊，UMD，或CommonJS，這些沒有孰優(yōu)孰劣。最后，在ECMAScript 2015中，ES 模塊出現(xiàn)了。

我們現(xiàn)在有了一個“正式的”模塊系統(tǒng)。

ES 模塊無處不在?

理論上，ES 模塊應該在所有JavaScript環(huán)境中。實際上，ES 模塊的主要應用還是在瀏覽器上。

2020年5月，Node.js v12.17.0 增加了在不使用標記前提下對ECMAScript模塊的支持。這意味著我們現(xiàn)在可以在Node.js中使用import和export，而無需任何其他命令行標志。

ECMAScript模塊要想在任何JavaScript環(huán)境通用，可能還需要很長的路要走，但方向是正確的。

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公開的函數(shù)，我們可以這樣做：

 
 
 
 
  
  
  
  // 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/[email protected]/es/redux.mjs";
  
  
  
  
  
  
  
  const store = createStore(/* do stuff */)

瀏覽器中的 ES 模塊

現(xiàn)代瀏覽器支持ES模塊，但有一些警告。要使用模塊，需要在 script 標簽上添加屬性 type，對應值為 module。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      ECMAScript modules in the browser
  
  
  
  
  
  
  
  
  
  
  
  The result is: 
  
  
  
  
  
  
  
  
  
  
  
      import { appendResult } from "./myModule.js";
  
  
  
  
  
  
  
      const el = document.getElementById("el");
  
  
  
      appendResult(el);

myModule.js 內(nèi)容如下：

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

動態(tài)導入

ES 模塊是靜態(tài)的，這意味著我們不能在運行時更改導入。隨著2020年推出的動態(tài)導入(dynamic imports)，我們可以動態(tài)加載代碼來響應用戶交互(webpack早在ECMAScript 2020推出這個特性之前就提供了動態(tài)導入)。

考慮下面的代碼：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      Dynamic imports
  
  
  
  
  
  
  
  
  
  
  
  Load!

再考慮一個帶有兩個導出的JavaScript模塊

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

為了動態(tài)導入 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對象：我們可以解構它們的屬性以及調(diào)用它們的任何公開方法。

要使用動態(tài)導入的默認方法，可以這樣做

 
 
 
 
  
  
  
  // 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();
  
  
  
    });
  
  
  
  });

還有另一種用于動態(tài)導入的常見樣式，如下所示：

 
 
 
 
  
  
  
  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)導入看起來不錯，但是它們有什么用呢?

使用動態(tài)導入，我們可以拆分代碼，并只在適當?shù)臅r候加載重要的代碼。在 JavaScript 引入動態(tài)導入之前，這種模式是webpack(模塊綁定器)獨有的。

像React和Vue通過動態(tài)導入代碼拆分來加載響應事件的代碼塊，比如用戶交互或路由更改。

動態(tài)導入JSON文件

假設我們項目有一個 person.json 文件，內(nèi)容如下：

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

現(xiàn)在，我們需要動態(tài)導入該文件以響應某些用戶交互。

因為 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;

動態(tài)導入與 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)導入的名字

使用import()導入模塊時，可以按照自己的意愿命名它，但要調(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)載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

文章名稱：這些ECMAScript模塊知識，都是我需要知道的
當前地址：http://fisionsoft.com.cn/article/cdhgdpj.html

新聞中心

其他資訊