一、認(rèn)識(shí) ES Module
1、為什么會(huì)出現(xiàn)ES Module？以及 ES Module 有哪兩個(gè)重要的關(guān)鍵字？分別完成什么工作？
-【出現(xiàn)環(huán)境】JavaScript沒(méi)有自己的模塊化一直是它的痛點(diǎn)
-【關(guān)鍵字】export負(fù)責(zé)講模塊內(nèi)的內(nèi)容導(dǎo)出；import負(fù)責(zé)從其他模塊導(dǎo)入內(nèi)容；
image.png
2、在html中使用ES Model
// index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script src="./main.js" type="module"></script>
</body>
</html>
// main.js
import { getName, aAge } from "./aaa.js";
console.log(getName());
console.log(aAge);
// aaa.js
let name = "name"
export function getName() {
return name;
}
let aName = "aName";
let aAge = "aAge";
export {
aName,
aAge
}
3、如果上述代碼index.html 通過(guò)本地打開(kāi)，而不是通過(guò)live server打開(kāi)。會(huì)出現(xiàn)什么情況？
- 會(huì)報(bào)錯(cuò)【跨域問(wèn)題】
image.png
4、ES Module常用的導(dǎo)出方式
// 1. 第一種導(dǎo)出方式
export const aName = "aName";
export const afunc = function () {
console.log("afunc");
};
// 2. 第二種導(dǎo)出方式
let bName = "bName";
const bfunc = function () {
console.log("bfunc");
};
export { bName, bfunc };
// 3. 第三種導(dǎo)出方式（默認(rèn)導(dǎo)出）
export default { cName: "cName" };
5、ES Module常用的導(dǎo)入方式
// 導(dǎo)入方式一
import { aName, aFunc } from "./why.js";
console.log(aName);
aFunc();
// 導(dǎo)入方式二
import * as why from "./why.js";
console.log(why.aName);
why.aFunc();
// 導(dǎo)入方式三（別名導(dǎo)入）
import { aName as bName, aFunc as bFunc } from "./why.js";
console.log(bName);
bFunc();
// 導(dǎo)入方式四（默認(rèn)導(dǎo)入）
import c from "./why.js";
console.log(c.cName);
6、為什么下面兩種導(dǎo)出方式，最終使用的時(shí)候方式卻是相同的呢？
// 在aaa.js中聲明
// 1.第一種導(dǎo)出方式
const aName = "aName";
export { aName };
// 2.第二種導(dǎo)出方式
export const bName = "bName";
// 在index.js中使用
import { aName, bName } from "./aaa.js";
console.log(aName);
console.log(bName);
- 因?yàn)檫@兩種都是命名式導(dǎo)出的語(yǔ)法糖
7、import函數(shù)是做什么的？import函數(shù)的返回值是什么？
- 【作用】import函數(shù)，通常用于動(dòng)態(tài)加載函數(shù)
- 【返回值】是一個(gè)promise對(duì)象
// import函數(shù)返回的結(jié)果是一個(gè)Promise
import("./why.js").then((res) => {
console.log("res", res.name);
});
console.log("上述代碼不會(huì)阻斷代碼運(yùn)行，說(shuō)明import的下載操作是在非js線程~");
console.log(import.meta);
image.png
二、 ES Module 的原理（后續(xù)深入了解再看吧）
1、ES Module 是如何被瀏覽器解析并且讓模塊之間可以相互引用的呢？
2、ES Module的解析，主要分為三個(gè)階段？
image.png
image.png
image.png
3、ES Module 允許內(nèi)部改變值的代碼測(cè)試？
// why.js
let name = "why";
let age = 18;
setTimeout(() => {
name = "kobe";
age = 40;
}, 100);
export { name, age };
// index.js
import { name, age } from "./why.js";
console.log(name, age);
setTimeout(() => {
console.log(name, age);
}, 2000);
