2020-9-5 seo達(dá)人
ECMAScript模塊(簡(jiǎn)稱(chēng)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 模塊應(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 模塊是一個(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è)文件中。
假設(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 */)
現(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);
appendResult(el);
appendResult(el);
appendResult(el);
appendResult(el); </script> </html>
myModule.js
內(nèi)容如下:
export function appendResult(element) { const result = Math.random();
element.innerText += result;
}
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)用戶(hù)交互(webpack早在ECMAScript 2020推出這個(gè)特性之前就提供了動(dòng)態(tài)導(dǎo)入)。
考慮下面的代碼:
<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)事件的代碼塊,比如用戶(hù)交互或路由更改。
假設(shè)我們項(xiàng)目有一個(gè) person.json
文件,內(nèi)容如下:
{ "name": "Jules", "age": 43 }
現(xiàn)在,我們需要?jiǎng)討B(tài)導(dǎo)入該文件以響應(yīng)某些用戶(hù)交互。
因?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;
因?yàn)?nbsp;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();
})
使用import()
導(dǎo)入模塊時(shí),可以按照自己的意愿命名它,但要調(diào)用的方法名保持一致:
import("./util.js").then((module) => { module.funcA(); module.default();
});
或者:
import("./util.js").then((utilModule) => {
utilModule.funcA();
utilModule.default();
});
原文:https://www.valentinog.com/bl...
代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道,事后為了解決這些BUG,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試,這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com