JavaScript 导入模块 - JavaScript

在 JavaScript 中，我们可以使用模块来组织和重用我们的代码。导入模块可以让我们使用其他 JavaScript 文件中的代码，并享受模块化开发的好处。本文将介绍 JavaScript 导入模块的方法和用法。

导入模块的语法

在 JavaScript 中，我们可以使用 import 关键字来导入模块。导入模块的基本语法如下：

import { 模块成员 } from "模块路径";

其中，模块成员 可以是模块中的变量、函数或类等。模块路径 是指被导入的模块文件的路径。例如：

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

上述代码中，我们从名为 "math" 的模块中导入了 add 和 subtract 两个函数。

默认导出和命名导出

在一个模块中，我们可以使用 export 关键字来导出模块成员。一个模块可以有一个默认导出（default export）和多个命名导出（named exports）。

默认导出

默认导出在导入时可以使用不同的语法：

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from "./math";

上述代码中，我们在 math.js 模块中使用 export default 导出了 add 函数，并在 main.js 模块中使用 import add 导入了该函数。默认导出的语法更简洁，导入时不需要使用花括号 {}。

命名导出

命名导出允许我们一次导出多个模块成员，并在导入时需要使用花括号 {}：

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

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

上述代码中，我们在 math.js 模块中使用 export 导出了 add 和 subtract 两个函数，并在 main.js 模块中使用 import { add, subtract } 导入了这两个函数。

导入默认导出

如果一个模块只有一个默认导出，我们可以在导入时给它起一个别名：

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import myAdd from "./math";

上述代码中，我们在 main.js 模块中将默认导出的函数命名为 myAdd。

导入所有模块成员

有时候我们可能希望导入模块中的所有成员，而不仅仅是一部分。可以使用 * as 语法将所有导出的成员放在一个对象中：

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

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

console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(5, 2)); // 输出 3
console.log(math.multiply(4, 6)); // 输出 24

上述代码中，我们在 main.js 模块中使用 import * as math 将 math 模块中的所有成员导入，并使用 math.XXX 访问这些成员。

综合示例

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export default function multiply(a, b) {
  return a * b;
}

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

console.log(add(2, 3)); // 输出 5
console.log(subtract(5, 2)); // 输出 3
console.log(multiply(4, 6)); // 输出 24

上述代码中，我们在 math.js 模块中导出了 add 和 subtract 两个函数并使用 export，并且使用 export default 导出了 multiply 函数。在 main.js 模块中，我们同时导入了 multiply 和 add、subtract 函数，并分别测试了它们的使用。

以上就是 JavaScript 导入模块的基本语法和用法。通过模块化开发，我们可以更好地组织和重用我们的代码，提高开发效率和代码的可维护性。

参考文档：MDN - 导入和导出