1.?什么是 JS 模块化 ？
一种将 JavaScript 程序拆分为可按需导入的单独模块的机制
即通俗来说，就是将一个 JS 程序文件，按着类别分模块以此拆分成多个小文件，再对这些小文件根据自己的需求进行拼装。
这样做它的好处就显而易见了：
- 便于管理代码
- 提高代码复用性
- 避免全局变量污染
那么，如何使用它呢 ？
2.?模块导出
对于模块的导出，我们可以使用 export 语句
export语句用于从模块中导出实时绑定的函数、对象或原始值
它分为以下两类导出：
- 默认导出
- 命名导出
接下来，我们看看如何使用它们
首先，写一个 imformation.js 文件作为一个模块
const Xixi = {
name: 'XiXi',
age: 18,
hobby: 'basketball'
}
const Haha = {
name: 'Haha',
age: 18,
hobby: 'football'
}
2.1) 默认导出
对于默认导出，每个模块只能有一个，它的语法如下：
export default XXX;
- XXX 为要导出的东西，对于默认导出，XXX 可以是一个对象，也可以是一个函数，也可以是一个已存在的变量名
导出函数export default () => {};
导出对象export default {};
导出已存在的变量名export default Xixi;
在这里，我们将 Xixi 导出
const Xixi = {
name: 'XiXi',
age: 18,
hobby: 'basketball'
}
const Haha = {
name: 'Haha',
age: 18,
hobby: 'football'
}
// 在这里，我们将 Xixi 导出，就在代码结尾处加上这条语句
export default Xixi;
- Notes:
默认导出只可以有一个且只能导出一个值
2.2) 命名导出
对于命名导出，每个模块中可以有多个，它的语法如下：
export XXX;
- XXX 必须是一个声明或着语句（不能导出匿名函数或者一个未命名对象）
- 可以导出前面已经存在的变量
export { Xixi }; - 可以导出一条语句
export const age = 18;/export function speak() {};
这里，将 Xixi 和 Haha 导出：
const Xixi = {
name: 'XiXi',
age: 18,
hobby: 'basketball'
}
const Haha = {
name: 'Haha',
age: 18,
hobby: 'football'
}
// 对于导出已存在变量，记得用 {} 包裹起来
export { Xixi, Haha };
在进行导出时，我们还可以起别名，如：
export { Xixi as p1, Haha };
3.?模块导入
对于模块的导入，我们可以使用 import 语句
import语句用于导入由另一个模块导出的绑定
它的使用根据导出的方式来决定：
我们先创建一个 html 文件，将想导入的模块加载进来
<script type=“module”> 中
type="module"属性用于指示引入的模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module</title>
</head>
<body>
<!-- 如果这个 script 标签想要导入模块，
这里必须加个属性 type="module" -->
<script type="module">
</script>
</body>
</html>
3.1) 默认导出的导入
它的语法如下：
import XXX from '文件路径';
- XXX 对于默认导出的导入，我们可以随便命名，因为默认导出只导出一个值，没有命名要求
默认导出的语句：
export default Xixi;
在这里将之前导出的 Xixi 导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module</title>
</head>
<body>
<script type="module">
import Xixi from './infromation.js';
console.log(Xixi.name, Xixi.age, Xixi.hobby);
</script>
</body>
</html>
3.2) 命名导出的导入
对于命名导出的导入，我们需要将想要导入的声明或语句的名字与导出时一一对应，用 {} 包裹起来
它的语法如下：
import XXX from '文件路径';
- XXX 对于命名导出的导入时，不能随意命名，必须与导出时名字一一对应，可以选取我们想要的声明或语句导入
命名导出的语句：
export { Xixi, Haha };
在这里，我们将 Xixi 和 Haha 导入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module</title>
</head>
<body>
<script type="module">
import { Xixi, Haha } from './infromation.js';
console.log(Xixi.name, Xixi.age, Xixi.hobby);
console.log(Haha.name, Haha.age, Haha.hobby);
</script>
</body>
</html>
如果命名导出时使用了别名，它的导入也要用别名与之对应，如：
命名导出：
export { Xixi as p1, Haha };
它的导入：
import { p1, Haha } from './infromation.js';
console.log(p1.name, p1.age, p1.hobby);
在它进行导入时，也可以使用别名进行导入：
import { p1, Haha as p2 } from './infromation.js';
console.log(p1.name, p1.age, p1.hobby);
console.log(p2.name, p2.age, p2.hobby);
- Notes
同时导入export default 和 export 导出的内容：
当对于默认导出的导入和命名导出的导入在同一条语句时，默认导出的导入要在前面！，如
导出：
export default Xixi;
export { Haha };
导入：
// Xixi 作为默认导出的值，必须在命名导出前
import Xixi, { Haha } from './infromation.js';
整体导入所有导出
import * as people from './infromation.js';
console.log(people.default.name);
console.log(people.Haha.name);
对于导入，这里介绍的是静态的 import，还有动态的 import，对于它的用法可以去 MDN 文档: import 中进行学习。
