导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块

JavaScript Module 模块


模块

JavaScript 模块允许您将代码拆分成多个单独的文件。

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

模块可以通过 import 语句从外部文件导入。

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

示例

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

亲自试一试 »


Export 导出

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

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


命名导出

让我们创建一个名为 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;

Import 导入

你可以通过两种方式将模块导入文件,具体取决于它们是命名导出还是默认导出。

命名导出使用花括号构建。默认导出则不使用花括号。

从命名导出导入

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

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

亲自试一试 »

从默认导出导入

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

import message from "./message.js";

亲自试一试 »

注意

模块仅支持 HTTP(s) 协议。

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


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。