JavaScript 模块系统详解（附示例）

Source: Dev.to

涵盖的主题

• import 与 export
  • 命名导出与导入
  • 默认导出与导入
  • 别名（重命名）
  • 命名空间导入
  • 组合导入
  • 动态导入
• 使用 Promise.all 的多个动态导入

什么是 JavaScript 模块？

JavaScript 模块就是一个文件，它：

• 拥有自己的作用域
• 可以导出变量、函数或类
• 可以从其他模块导入值

在浏览器中启用模块：

命名导出

命名导出允许你从单个文件 导出多个值。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

命名导入

导入命名导出时，名称 必须完全匹配。

// main.js
import { add, subtract } from "./math.js";

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

默认导出

一个模块只能有 一个默认导出。当文件只暴露一个主要功能时，这非常有用。

// logger.js
export default function log(message) {
  console.log("Log:", message);
}

默认导入

你可以使用 任意变量名 来导入默认导出。

// main.js
import logger from "./logger.js";

logger("Hello Dev.to!");

别名（重命名导入）

别名有助于避免命名冲突或提升可读性。

// math.js
export const multiply = (a, b) => a * b;

// main.js
import { multiply as mul } from "./math.js";

console.log(mul(4, 5)); // 20

命名空间导入 (* as)

如果一个模块导出了很多值，你可以把所有导出作为一个对象导入。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import * as MathUtils from "./math.js";

console.log(MathUtils.add(10, 5));      // 15
console.log(MathUtils.subtract(10, 5)); // 5

组合导入（默认 + 命名）

你可以在同一条语句中 同时导入默认和命名导出。

// user.js
export default function getUser() {
  return { name: "Rayan", role: "Developer" };
}

export const isAdmin = false;

// main.js
import getUser, { isAdmin } from "./user.js";

console.log(getUser());
console.log(isAdmin);

动态导入 (import())

动态导入在 运行时 加载模块，而不是在页面加载时。常见用例包括代码拆分、懒加载和性能优化。

// math.js
export const add = (a, b) => a + b;

// main.js
async function loadMath() {
  const math = await import("./math.js");
  console.log(math.add(2, 3)); // 5
}

loadMath();

⚠️ import() 始终返回一个 Promise。

使用 Promise.all 的多个动态导入

要 并行 加载多个模块，可使用 Promise.all。

// math.js
export const add = (a, b) => a + b;

// string.js
export const upper = (text) => text.toUpperCase();

// main.js
async function loadModules() {
  const [math, string] = await Promise.all([
    import("./math.js"),
    import("./string.js")
  ]);

  console.log(math.add(3, 4));         // 7
  console.log(string.upper("hello")); // HELLO
}

loadModules();

关键规则回顾

• 一个文件可以有 多个命名导出。
• 一个文件只能有 一个默认导出。
• 命名导入必须与导出名称完全一致。
• 默认导入可以随意重命名。
• 动态导入始终返回 Promise。

最后思考

JavaScript 模块系统是现代开发的基石。React、Vue、Node.js 等框架都高度依赖它。掌握了 import 与 export 后，你的代码将会：

• 更易维护
• 更具可扩展性
• 更加有条理

祝编码愉快 🚀