一、认识 ES Module
1、为什么会出现ES Module？以及 ES Module 有哪两个重要的关键字？分别完成什么工作？
-【出现环境】JavaScript没有自己的模块化一直是它的痛点
-【关键字】export负责讲模块内的内容导出；import负责从其他模块导入内容；
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 通过本地打开，而不是通过live server打开。会出现什么情况？
- 会报错【跨域问题】
image.png
4、ES Module常用的导出方式
// 1. 第一种导出方式
export const aName = "aName";
export const afunc = function () {
console.log("afunc");
};
// 2. 第二种导出方式
let bName = "bName";
const bfunc = function () {
console.log("bfunc");
};
export { bName, bfunc };
// 3. 第三种导出方式（默认导出）
export default { cName: "cName" };
5、ES Module常用的导入方式
// 导入方式一
import { aName, aFunc } from "./why.js";
console.log(aName);
aFunc();
// 导入方式二
import * as why from "./why.js";
console.log(why.aName);
why.aFunc();
// 导入方式三（别名导入）
import { aName as bName, aFunc as bFunc } from "./why.js";
console.log(bName);
bFunc();
// 导入方式四（默认导入）
import c from "./why.js";
console.log(c.cName);
6、import函数是做什么的？import函数的返回值是什么？
- 【作用】import函数，通常用于动态加载函数
- 【返回值】是一个promise对象
// import函数返回的结果是一个Promise
import("./why.js").then((res) => {
console.log("res", res.name);
});
console.log("上述代码不会阻断代码运行，说明import的下载操作是在非js线程~");
console.log(import.meta);
image.png
二、 ES Module 的原理（后续深入了解再看吧）
1、ES Module 是如何被浏览器解析并且让模块之间可以相互引用的呢？
2、ES Module的解析，主要分为三个阶段？
image.png
image.png
image.png
3、ES Module 允许内部改变值的代码测试？
// 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);
网友评论