四、Module的注意事项
4.1、模块顶层的this指向
结论：在模块中，顶层的this指向undefined，这就能够很好的解决模块化的问题！
示例：
2.js
exer.html
<!-- 对于引入模块的需要设置type="module" -->
<script type="module">
// 注意了若是引入的模块中使用了export default，那么就必须先引入该expert default的值
import './modules/2.js';
</script>
4.2、import关键字和import()函数
import关键字的使用(自动提升，但是不能够进行逻辑判断执行引入)
import：具有提升效果，会将该语句提升到模块的头部，率先执行。也就是说import执行的时候，代码还没有执行。
import与export命令只能在模块的顶层不能在代码块中执行。
示例：
2.js
console.log(`模块中的开始执行......，输出this为：${this}`);
exer.html
<!-- 对于引入模块的需要设置type="module" -->
<script type="module">
console.log("hello");
console.log("changlu!");
//故意将引入模块放在前面两句console.log()后输出
import './modules/2.js';
</script>
缺点：对于我们想要适配pc端或是手机端时，选择哪个来进行引入仅仅使用import关键字是不够的，因为一旦使用import关键字的话就会直接进行执行，而不是根据逻辑来进行判断引入哪个js文件！下面是示例实际上是不允许的：
<!-- 对于引入模块的需要设置type="module" -->
<script type="module">
const pc = true;
//是不允许以下这么进行逻辑判断引入js的！会报错：Uncaught SyntaxError: Unexpected string
if (pc) {
import './modules/pc.js';
} else {
import './modules/mobile.js'
}
</script>
import()函数
import()：使用该函数能够配合逻辑判断引入，而不是像import一样具有提升效果直接引入，弥补了import关键字的缺点！
示例：
<!-- 对于引入模块的需要设置type="module" -->
<script type="module">
const pc = true;
//通过使用import()函数就能够进行逻辑判断后导入指定的js模块
if (pc) {
import('./modules/pc.js').then(module => { console.log(module) });
} else {
import('./modules/mobile.js').then(module => { console.log(module) });
}
</script>
4.3、导入导出的复合写法
介绍
复合写法：就是说一条语句能够既导入又导出的操作！缺点就是不能对导出的变量执行任何操作！！！
用途：就是达到了中转站的效果！
注意点：复合语句中export后的值无论是单个还是多个必须是{}包裹，否则会报语法错误，并且不能执行对导出的变量进行任何操作！
示例
mobile.js
pc.js
//export的复合写法
export { num } from './mobile.js'
//复合写法相当于执行了引入与导出两步操作
//①import { num } from './mobile.js'
//②export { num } from './mobile.js'
//注意：不能有任何对num的操作，例如输出、修改等等操作
// console.log(num);
exer.html
<!-- 对于引入模块的需要设置type="module" -->
<script type="module">
import { num } from './modules/pc.js'
console.log(num);
</script>
五、实际应用
一般的话js代码都是基于对象来进行编写的，一般将一个类或者常量或者说是单独的功能模块都使用Module模块系统来进行抽离，有利于代码的可扩展性！！！
比如说抽离的内容如：常量以及默认参数一块、某个设置默认参数对象、类或者说单独的功能模块我们都可以进行拆分！！！
