JavaScript ：模块的导入和导出
模块简介
-
html文档一般在
<body>标签中引入外部js文件。 -
<script>标签引入的脚本中创建的变量，都会被注册为window对象下全局变量，但是这样会污染全局命名空间。 -
这就衍生除了模块化的解决方案，比如CommonJS等，但是这些解决方案都不是JavaScript原生的，直到 ES6 支持 JavaScript 模块的使用。
什么是模块?
一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。
模块使用export导出，import导入。
export: 用于向其他模块提供代码。
import: 用于读取从另一个模块导出的代码。
- 在html文件中导入模块，需要添加type ="module"，才能确保代码作为模块而不是常规脚本加载。
模块代码仅在第一次导入时被解析
如果同一个模块被导入到多个其他位置，那么它的代码只会执行一次，即在第一次被导入时。
我们假设一个模块导出了一个对象：
// 📁 admin.js
export let admin = {
name: "John"
};
如果这个模块被导入到多个文件中，模块仅在第一次被导入时被解析，并创建 admin 对象，然后将其传入到所有的导入。
所有的导入都只获得了一个唯一的 admin 对象：
// 📁 1.js
import { admin } from './admin.js';
admin.name = "Pete";
// 📁 2.js
import { admin } from './admin.js';
alert(admin.name); // Pete
// 1.js 和 2.js 引用的是同一个 admin 对象
// 在 1.js 中对对象做的更改，在 2.js 中也是可见的
浙公网安备 33010602011771号