module的语法
1.初识Module
（1）什么是模块
模块：一个一个的局部作用域的代码块。
（2）什么是模块系统
模块系统：系统的解决了模块化一系列问题。
- 模块化的写法（之前我们用立即执行函数模拟模块化，ES6 则实现了针对模块化的语法）
- 消除全局变量（模块中的变量都是局部的，不同模块之间不会相互干扰，可以通过特定语法暴露指定内容）
- 管理加载顺序（之前我们将一个总的 JavaScript 程序分几个文件写，但在最终合并调用时，js 的引入需要满足前后依赖关系。比如：被引用的 js 文件就一定要在引用它的 js 文件之前加载）
2.Module的基本用法
注意：Module 要生效，必须在服务器环境下才能执行。
普通的 HTML、JS 是本地文件环境，地址以 file 协议开头，服务器则以 http 或 https 开头。
方法：VSCode 中使用 Live Server 拓展，WebStorm 默认就是服务器环境。
- 一个 JS 文件就是一个模块
- 用 import 关键字导入模块
- 用 export 关键字导出模块需要暴露的部分
- 在使用 script 标签加载的时候，需要加上 type=“module”，否则就以普通 JS 文件的形式引入了，就不是模块了
3.Module的导入导出
导出的东西可以被导入（import），并访问到！
对于导入和导出有两种方法：
- export default 导出，import 导入
- export 导出，import 导入
3.1 export default 导出和对应的 import 导入
（1）一个模块没有导出，是否可以将其导入？
<!-- 一个模块没有导出，也可以将其导入 -->
<!-- 被导入的模块的代码都会执行一遍，并且同一个模块的导入只执行一遍！ -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
import "./test.js"; // 浏览器控制台打印：test
import "./test.js"; // 不执行
import "./test.js"; // 不执行
import "./test02.js"; // 浏览器控制台打印：test02
import "./test.js"; // 不执行
import "./test02.js"; // 不执行
</script>
</body>
</html>
----------------------------------------------------
<!-- test.js -->
console.log("test");
----------------------------------------------------
<!-- test02.js -->
console.log("test02");
（2）一个模块中只能有一个 export default。
【module.js】
// 模块中的变量都是局部的
const age = 18;
const sex = "male";
export default age; // 通过 export default 导出（暴露）一个值
// export default sex; // 报错！因为 export default 只能在一个文件中导出一次！！！
/*
export default 24; // 可以导出值
export default {}; // 可以导出对象
export default function(){}; // 可以导出函数
export default class{}; // 可以导出class
*/
【index.html】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
// import 之后跟一个模块的别名，推荐别名与导出时的名字相同，比如这里就用 age
import age from "./module.js";
console.log(age); // 18
</script