Module模块

Module的基本用法

1.搭建服务器环境

我们直接在文件中打开.html文件可以发现文件的路径使用的是file协议，并不是服务器的协议，所以我们需要先搭建服务器环境，Module才能正常运行。

步骤：

1）使用vscode下载插件live Server,右键，选择使用

2.导出和导入

导出：导出的东西可以被导入（import）,并访问到；

导入：一个模块没有导出，也可以将其导入。被导入的代码都会执行一遍，也仅仅会执行一遍。如果执行是发现其导出，则接收。

1.export default 和它对应的 import 导入导出方式

 当只导入不导出的时候，会将导入的文件执行一遍，且仅执行一遍：

<script type="module">
    //当只导入不导出的时候，会将导入的文件执行一遍，且仅执行一遍。
    import './base.js';
    import './base.js';
    import './base.js';
</script>

当使用export default导出时：一个模块只能导出一个export default;

2.export和它对应的 import 导入导出方式

基本用法：export 声明或语句，示例：

 导出导入多个：

 导出导入时起别名：

 整体导入：

 同时导入：

3.Module的注意事项和应用

1.模块顶层的this指向

模块中，顶层的this指向的是undefined.我们可以利用这一点来判断是否使用了模块加载方式在加载，示例：

 2.import和import()

1）import命令具有提升效果，会提升到整个模块的头部，率先执行。

2）import执行的时候，代码还没执行。

3）import和export命令只能在模块的顶层，不能在代码块中执行。

import()可以按条件导入

3.导入导出的复合写法：将一个模块导入又将其导出（不推荐）

复合写法无法访问到导入的变量；