JavaScript 模块


目录

    显示目录


模块

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

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

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

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

出口

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

有两种类型的导出:命名导出默认导出


指定出口

让我们创建一个名为 person.js 的文件,然后 填写我们要导出的内容。

您可以通过两种方式创建命名导出。单独排列,或同时排列在底部。

单独在线:

person.js

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

全部在底部:

person.js

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

从默认导出导入

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

import message from "./message.js";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

笔记

模块仅适用于 HTTP(s) 协议。

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