JavaScript ES6 Module模块详解
0.什么是Module
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
模块系统主要解决的问题：
- 模块化的问题
- 消除全局变量
- 管理加载顺序
1.Module 的加载
使用 < script >标签加载模块时需要添加 type=“module”。
1.1 方式一
<script type="module">
import module from "./module.js";
</script>
1.2 方式二
<script class="lazy" data-src="./module.js" type="module"></script>
2.导出和导入
2.1 一个模块的导出可以被其它模块导入，并访问。
例1：使用About.js调用Base.js内的Base对象，并在首页打印。
index.html
<script type="module">
import About from "./js/About.js";
console.log(About);
</script>
Base.js
const Base = {
nick: 'admin',
age: 19
}
export default Base;
About.js
import Base from '../js/Base.js';
const class="lazy" data-src = `nick:${Base.nick},age:${Base.age}.`;
export default class="lazy" data-src;
输出结果：
nick:admin,age:19.
2.2 没有导出，也可以将其导入
例2：About.js不导出，在首页将其导入。
index.html
<script type="module">
import "./js/About.js";
</script>
About.js
const class="lazy" data-src = 'Hello World!';
console.log(class="lazy" data-src);
输出结果：
Hello World!
2.3 被导入的代码都会执行一遍，也仅会执行一遍
例3：导入3次About.js，观察导出结果。
index.html
<script type="module">
import "./js/About.js";
import "./js/About.js";
import "./js/About.js";
</script>
About.js
const class="lazy" data-src = 'Hello World!';
console.log(class="lazy" data-src);
输出结果：
Hello World!
3.export default 和对应的 import
export default 用于导出一个默认值，一个模块只能有一个。
使用 export default 进行导出时，import 的名字可以随意起。
例4：使用 export default 进行导出，import 的名字随意起。
index.html
<script type="module">
import bbb from "./js/About.js";
console.log(bbb);
</script>
About.js
const class="lazy" data-src = 'Hello World!';
export default class="lazy" data-src;
输出结果：
Hello World!
4.export 和对应的 import
使用 export 进行导出时，import 的名字不能随意起。
例5：使用 export 进行导出。
index.html
<script type="module">
import { age, nick } from "./js/About.js";
console.log(nick, age);
</script>
About.js
const age = 18;
export {age};
// export age; ×
// export const age = 18; √
export const nick = 'admin';
输出结果：
admin 18
5.Module 的注意事项
1.模块中，顶层的 this 指向 undefined；
2import 具有提升效果，会提升到整个模块的头部，率先执行；
3.import 执行的时候，代码还没执行；
4.import 和 export 只能在模块的顶层，不能在代码块中执行；
5.import() 可以按条件导入；
6.复合写法导出的，无法在当前模块中使用
复合写法，导入后导出：
export About from './js/About.js';
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
