四、Module的注意事项
4.1、模块顶层的this指向
结论：在模块中，顶层的this指向undefined，这就能够很好的解决模块化的问题！
示例：
2.js
console.log(this);
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
export const num = 10;
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模块系统来进行抽离，有利于代码的可扩展性！！！
比如说抽离的内容如：常量以及默认参数一块、某个设置默认参数对象、类或者说单独的功能模块我们都可以进行拆分！！！
