12【es6模块化】
12【es6模块化】
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>
</body>
</html>
3.2 export 导出和对应的 import 导入
（1）基本用法
【module.js】
/*
const age = 18;
export age; // 报错
*/
// export 后面只能跟声明或语句！
export const age = 18;
【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 aaa from "./module.js"; // 报错！
// export 导出的模块，在导入时不能随意取别名，名称必须与模块导出时相同！并且要使用类似于解构赋值的{}形式！
import {age} from "./module.js"; // 注意：名称不能随意取，一定要与模块相同
console.log(age); // 18;
</script>
</body>
</html>
注意：在用 export 导出时，也可以用对象简写形式形式！
【module.js】
const age = 18;
export {age};
（2）多个导入
【module.js】
// 1、采用声明或语句的形式
/*
export funciton fn() {};
export class className {};
export const age = 18;
*/
// 2、采用解构赋值的形式
function fn() {};
class className {};
const age = 18;
/* 方式 1：
export {fn};
export {className};
export {age};
*/
// 方式 2：
export {fn, className, age};
【index.html】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
/* 方式 1：
import {fn} from "./module.js";
import {className} from "./module.js";
import {age} from "./module.js";
*/
// 方式 2：
import {fn, className, age} from "./module.js";
console.log(fn); // ƒ fn() {}
console.log(className); // class className {}
console.log(age); // 18
</script>
</body>
</html>
（3）导出导入时起别名
export {fn as func, className as cN, age};
import {func, cN, age as nl} from "./module.js";
console.log(func); // ƒ fn() {}
console.log(cN); // class className {}
console.log(nl); // 18
（4）整体导入
// 之前的导入方式，如果导入的模块不多那么还好，但是一但模块数量多了起来，那么就特别费劲
// import {fn, className, age} from "./module.js";
// 整体导入
// 将同一文件里的所有模块导入到一个对象中
// 不仅对 export 有效，同时对 export default 也同样有效
import * as imObj from "./module.js";
console.log(imObj); // 见图片
console.log(imObj.fn); // ƒ fn() {}
console.log(imObj.className); // class className {}
console.log(imObj.age); // 18
// export default 也同样有效：imObj.default
（5）同时导入
当我们需要分别导入 export default 和 export 时，可以使用同时导入的方式。
// 我们可以分开实现
import {fn, className, age} from "./module.js";
import sex from "./module.js";
// 更推荐使用同时导入的方式
import sex, {fn, className, age} from "./module.js";
// 注意：export default 必须在 export 之前
4.模块重导（Re-export）
Re-export一般用于收拢同类型的模块、一般都是以文件夹为单位，如components、routes、utils、hooks、stories等都通过各自的index.tsx暴露，这样就能极大程度的简化导入路径、提升代码可读性、可维护性。
如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
模块的接口改名和整体输出，也可以采用这种写法。
// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';
默认接口的写法如下。
export { default } from 'foo';
具名接口改为默认接口的写法如下。
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;
同样地，默认接口也可以改名为具名接口。
export { default as es6 } from './someModule';
ES2020 之前，有一种import语句，没有对应的复合写法。
import * as someIdentifier from "someModule";
ES2020补上了这个写法。
export * as ns from "mod";
// 等同于
import * as ns from "mod";
export {ns};
5.import()
5.1 简介
前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。所以，下面的代码会报错。
// 报错
if (x === 2) {
import MyModual from './myModual';
}
上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。
这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。
const path = './' + fileName;
const myModual = require(path);
上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import命令做不到这一点。
ES2020提案 引入import()函数，支持动态加载模块。
import(specifier)
上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node.js 的require()方法，区别主要是前者是异步加载，后者是同步加载。
由于import()返回 Promise对象，所以需要使用then()方法指定处理函数。考虑到代码的清晰，更推荐使用await命令。
async function renderWidget() {
const container = document.getElementById('widget');
if (container !== null) {
// 等同于
// import("./widget").then(widget => {
// widget.render(container);
// });
const widget = await import('./widget.js');
widget.render(container);
}
}
renderWidget();
上面示例中，await命令后面就是使用import()，对比then()的写法明显更简洁易读。
5.2 适用场合
下面是import()的一些适用场合。
（1）按需加载。
import()可以在需要的时候，再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。
（2）条件加载
import()可以放在if代码块，根据不同的情况，加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
上面代码中，如果满足条件，就加载模块 A，否则加载模块 B。
（3）动态的模块路径
import()允许模块路径动态生成。
import(f())
.then(...);
上面代码中，根据函数f的返回结果，加载不同的模块。
5.3 注意点
import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。
如果模块有default输出接口，可以用参数直接获得。
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
上面的代码也可以使用具名输入的形式。
import('./myModule.js')
.then(({default: theDefault}) => {
console.log(theDefault);
});
如果想同时加载多个模块，可以采用下面的写法。
Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
···
});
import()也可以用在 async 函数之中。
async function main() {
const myModule = await import('./myModule.js');
const {export1, export2} = await import('./myModule.js');
const [module1, module2, module3] =
await Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
]);
}
main();
