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 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 src = `nick:${Base.nick},age:${Base.age}.`;
export default src;

输出结果：

nick:admin,age:19.

2.2 没有导出，也可以将其导入

例2：About.js不导出，在首页将其导入。

index.html

<script type="module">
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(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 src = 'Hello World!';
console.log(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 src = 'Hello World!';
export default 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';

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！