欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

ECMAScript模塊知識(shí)有哪些

這篇文章主要介紹“ECMAScript模塊知識(shí)有哪些”，在日常操作中，相信很多人在ECMAScript模塊知識(shí)有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ECMAScript模塊知識(shí)有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司專(zhuān)注于巴宜網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供巴宜營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，巴宜網(wǎng)站制作、巴宜網(wǎng)頁(yè)設(shè)計(jì)、巴宜網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造巴宜網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供巴宜網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

ES 模塊是什么?

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

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

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

ES 模塊無(wú)處不在?

理論上，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，而無(wú)需任何其他命令行標(biāo)志。

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

ES 模塊是什么樣的

ES 模塊是一個(gè)簡(jiǎn)單的文件，我們可以在其中聲明一個(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è)我們?cè)陧?xiàng)目文中還有一個(gè)Consumer.js的文件。要導(dǎo)入utils.js公開(kāi)的函數(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。

<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; }

動(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)加載代碼來(lái)響應(yīng)用戶交互(webpack早在ECMAScript 2020推出這個(gè)特性之前就提供了動(dòng)態(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>

再考慮一個(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)用它們的任何公開(kāi)方法。

要使用動(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)入的常見(jiàn)樣式，如下所示：

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)入看起來(lái)不錯(cuò)，但是它們有什么用呢?

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

像React和Vue通過(guò)動(dòng)態(tài)導(dǎo)入代碼拆分來(lái)加載響應(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() 語(yǔ)句返回是一個(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(); });

到此，關(guān)于“ECMAScript模塊知識(shí)有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文題目：ECMAScript模塊知識(shí)有哪些
瀏覽路徑：http://chinadenli.net/article6/ihoeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、服務(wù)器托管、微信公眾號(hào)、ChatGPT、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作