JavaScript 模块
模块把 JavaScript 代码拆分到不同文件中。export 暴露值，import 使用值。示例显示 lida / tea / mint。
命名导出
命名导出保留明确的名称，一个模块可以导出多个值。
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink 和 label 能被其他模块使用，因为它们被导出了。未导出的代码留在文件内部。
导入命名值
命名导入使用大括号，并写出相同的导出名称。
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
导入会连接导出的绑定，而不是创建独立定义。浏览器中的这些文件需要通过 HTTP 或 HTTPS 提供。
默认导出
默认导出通常是模块的主要值。导入时可以选择本地名称，不使用大括号。
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
命名导入使用 { drink, label }，默认导入使用 greet。一个文件只能有一个默认导出。
模块作用域与动态导入
模块顶层声明不会成为 window 的属性。import() 稍后加载模块，并返回 Promise。
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
只有 items 穿过模块边界。动态导入的结果是 namespace 对象，导出值可以作为它的属性读取。
在单页中观察模块
这个自包含示例在内存中创建模块文本，生成 Blob URL 并导入它，不依赖项目文件。
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
页面会准确显示 lida / tea / mint。type="module" 启用模块语法，Blob URL 不需要网络文件。
真实项目通常使用 math.js、app.js 和 <script type="module" src="./app.js"></script>。不要依赖 file:// 测试，应使用 HTTP 服务器。
📊 模块选择
| 语法 | 用途 | 示例 |
|---|---|---|
| 命名导出/导入 | 分享指定名称 | export const drink = "tea" / import { drink } ... |
| 默认导出/导入 | 分享主要值 | export default function greet() / import greet ... |
| 动态导入 | 稍后加载并获得 Promise | import("./menu.js").then(...) |
| 模块作用域 | 保持顶层声明私有 | const secret = "not global" |
实践练习
创建 math.js，在 app.js 导入 drink 和 label，再添加默认的 greet，让页面显示 lida / tea / mint。
常见错误
不要删除命名导入的大括号，不要在同一文件写两个默认导出，也不要把未导出的值当成全局变量。
要点
export 选择要暴露的绑定，import 使用它们，默认导入可以选择名称，模块作用域保护未导出的声明。
让模块保持专注，并在示例结束后释放临时 Blob URL。
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部