啊啊啊视频一区二区,97精品人妻一区二区三区香蕉农

新聞中心

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

這些ECMAScript模塊知識(shí)，都是我需要知道的

ES 模塊是什么?

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

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

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

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

ES 模塊無處不在?

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

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

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

ES 模塊是什么樣的

ES 模塊是一個(gè)簡單的文件，我們可以在其中聲明一個(gè)或多個(gè)導(dǎo)出。以下面utils.js為例:

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

這里有兩個(gè)導(dǎo)出。

第一個(gè)是命名導(dǎo)出，后面是export default，表示為默認(rèn)導(dǎo)出。

假設(shè)我們的項(xiàng)目文件夾中有一個(gè)名為utils.js的文件，我們可以將這個(gè)模塊提供的對(duì)象導(dǎo)入到另一個(gè)文件中。

如何從 ES模塊導(dǎo)入

假設(shè)我們在項(xiàng)目文中還有一個(gè)Consumer.js的文件。要導(dǎo)入utils.js公開的函數(shù)，我們可以這樣做：

 
 
 
 
  
  
  
  // consumer.js
  
  
  
  import { funcA } from "./util.js";

這種對(duì)應(yīng)我們的命名導(dǎo)入方式.

如果我們要導(dǎo)入 utils.js 中的默認(rèn)導(dǎo)出也就是 funcB 方法，我們可以這樣做：

 
 
 
 
  
  
  
  // consumer.js
  
  
  
  import { funcA } from "./util.js";

當(dāng)然，我們可以導(dǎo)入同時(shí)導(dǎo)入命名和默認(rèn)的：

 
 
 
 
  
  
  
  // consumer.js
  
  
  
  import funcB, { funcA } from "./util.js";
  
  
  
  
  
  
  
  funcB();
  
  
  
  funcA();

我們也可以用星號(hào)導(dǎo)入整個(gè)模塊：

 
 
 
 
  
  
  
  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，對(duì)應(yīng)值為 module。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      ECMAScript modules in the browser
  
  
  
  
  
  
  
  
  
  
  
  The result is:

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

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

動(dòng)態(tài)導(dǎo)入

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

考慮下面的代碼：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      Dynamic imports
  
  
  
  
  
  
  
  
  
  
  
  Load!

再考慮一個(gè)帶有兩個(gè)導(dǎo)出的JavaScript模塊

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

為了動(dòng)態(tài)導(dǎo)入 util.js 模塊，我們可以點(diǎn)擊按鈕在去導(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模塊實(shí)際上是JavaScript對(duì)象：我們可以解構(gòu)它們的屬性以及調(diào)用它們的任何公開方法。

要使用動(dòng)態(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)作為一個(gè)整體導(dǎo)入一個(gè)模塊時(shí)，我們可以使用它的所有導(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();
  
  
  
    });
  
  
  
  });

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

 
 
 
 
  
  
  
  const loadUtil = () => import("./util.js");
  
  
  
  
  
  
  
  const btn = document.getElementById("btn");
  
  
  
  
  
  
  
  btn.addEventListener("click", () => {
  
  
  
    //
  
  
  
  });

loadUtil返回的是一個(gè) promise，所以我們可以這樣操作

 
 
 
 
  
  
  
  const loadUtil = () => import("./util.js");
  
  
  
  
  
  
  
  const btn = document.getElementById("btn");
  
  
  
  
  
  
  
  btn.addEventListener("click", () => {
  
  
  
    loadUtil().then(module => {
  
  
  
      module.funcA();
  
  
  
      module.default();
  
  
  
    })
  
  
  
  })

動(dòng)態(tài)導(dǎo)入看起來不錯(cuò)，但是它們有什么用呢?

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

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

動(dòng)態(tài)導(dǎo)入JSON文件

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

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

現(xiàn)在，我們需要?jiǎng)討B(tài)導(dǎo)入該文件以響應(yīng)某些用戶交互。

因?yàn)?JSON 文件不是一個(gè)方法，所以我們可以使用默認(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;

動(dòng)態(tài)導(dǎo)入與 async/await

因?yàn)?import() 語句返回是一個(gè) 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();
  
  
  
  })

動(dòng)態(tài)導(dǎo)入的名字

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

當(dāng)前標(biāo)題：這些ECMAScript模塊知識(shí)，都是我需要知道的
轉(zhuǎn)載來于：http://www.5511xx.com/article/cdhgdpj.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

新聞中心

其他資訊