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';

总结

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