JavaScript 模块

---

模块

JavaScript 模块允许您将代码分解为单独的文件。

这使得维护代码库变得更加容易。

模块是使用import语句从外部文件导入的。

模块还依赖于 <script> 标记中的 type="module"。

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

尝试一下 »

---

出口

带有函数或变量的模块可以存储在任何外部文件中。

有两种类型的导出：命名导出和默认导出。

---

命名导出

让我们创建一个名为person.js的文件，并且 用我们想要导出的东西填充它。

您可以通过两种方式创建命名导出。单独内嵌，或在底部一次全部内嵌。

export const name = "Jesse";  
export const age = 40;

const name = "Jesse";  
const age = 40;  

export {name, age};

---

默认导出

让我们创建另一个文件，名为message.js，并用它来演示默认导出。

一个文件中只能有一个默认导出。

:默认导出，message.js

const message = () => {  
const name = "Jesse";  
const age = 40;  
return name + ' is ' + age + 'years old.';  
};  

export default message;

---

进口

您可以通过两种方式将模块导入到文件中，具体取决于它们是否命名 导出或默认导出。

命名导出是使用大括号构造的。默认导出不是。

:从命名导出导入，从文件 person.js 导入命名导出

import { name, age } from "./person.js";

尝试一下 »

:从默认导出导入，从文件 message.js 导入默认导出

import message from "./message.js";

尝试一下 »

注意

模块仅适用于 HTTP（s） 协议。

通过 file:// 协议打开的网页不能使用导入/导出。