跳到主要内容

JavaScript 模块

提示
  1. 模块化代码组织：JavaScript 模块允许将代码分散到不同的文件中，以便于代码组织和维护。每个模块文件包含执行特定任务的代码，如变量、函数和类。
  2. 导出和导入功能：可以使用 export 关键字在一个文件中导出函数、变量或类，并使用 import 关键字在另一个文件中导入这些元素。需要用 {} 包裹导入的元素，除非它是默认导出。
  3. 重命名和默认导出：为避免命名冲突，可以在导出或导入时重命名函数或对象。每个文件只能有一个默认导出，可以在导入时使用任意名称引用，默认导出无需使用 {}。

当我们的程序变得越来越大时，它可能包含许多代码行。你可以使用模块将代码分散到不同的文件中，而不是将所有内容放在一个文件中，根据它们的功能分开。这使我们的代码更有组织，更易于维护。

模块是包含执行特定任务代码的文件。一个模块可能包含变量、函数、类等。让我们看一个例子，

假设一个名为 greet.js 的文件包含以下代码：

// 导出一个函数
export function greetPerson(name) {
  return `Hello ${name}`;
}

现在，要在另一个文件中使用 greet.js 的代码，你可以使用以下代码：

// 从 greet.js 文件中导入 greetPerson
import { greetPerson } from "./greet.js";

// 使用 greet.js 中定义的 greetPerson()
let displayName = greetPerson("Jack");

console.log(displayName); // Hello Jack

这里，

  • greet.js 中的 greetPerson() 函数使用 export 关键字导出
export function greetPerson(name) {
 ...
}
  • 然后，我们使用 import 关键字在另一个文件中导入 greetPerson()。要导入函数、对象等，需要将它们放在 { } 中。
import { greetPerson } from "./greet.js";

注意：你只能从模块中访问导出的函数、对象等。你需要使用 export 关键字导入特定的函数、对象等，然后在其他文件中使用它们。

导出多个对象​

也可以从模块中导出多个对象。例如，

在文件 module.js 中

// 导出变量
export const name = "JavaScript Program";

// 导出函数
export function sum(x, y) {
  return x + y;
}

在主文件中，

import { name, sum } from "./module.js";

console.log(name);
let add = sum(4, 9);
console.log(add); // 13

这里，

import { name, sum } from "./module.js";

这将从 module.js 文件中导入 name 变量和 sum() 函数。

重命名导入和导出​

如果你想导入的对象（变量、函数等）已经存在于你的主文件中，程序可能不会按照你的意图执行。在这种情况下，程序会从主文件而不是导入的文件中取值。

为了避免命名冲突，你可以在导出或导入时重命名这些函数、对象等。

1. 在模块中重命名（导出文件）​

// 在 module.js 中重命名导入
export { function1 as newName1, function2 as newName2 };

// 当你想使用模块时
// 在主文件中导入
import { newName1, newName2 } from "./module.js";

这里，在从 module.js 文件导出函数时，给函数新的名字（这里是 newName1 和 newName2）。因此，在导入该函数时，使用新的名字来引用该函数。

2. 在导入文件中重命名​

// 在 module.js 中
export { function1, function2 };

// 当你想使用模块时
// 在需要的文件中以不同的名字导入

import { function1 as newName1, function2 as newName2 } from "./module.js";

这里，在导入函数时，使用新的名字（这里是 newName1 和 newName2）作为函数名。现在你使用新的名字来引用这些函数。

默认导出​

你也可以对模块进行默认导出。例如，

在文件 greet.js 中：

// 默认导出
export default function greet(name) {
  return `Hello ${name}`;
}

export const age = 23;

然后在导入时，你可以使用：

import random_name from "./greet.js";

在执行默认导出时，

  • random_name 是从 greet.js 导入的。由于 greet.js 中没有 random_name，因此默认导出（在这个案例中是 greet()）被作为 random_name 导出。
  • 你可以直接使用默认导出，无需使用大括号 {} 包围。

注意：一个文件可以包含多个导出。但是，一个文件中只能有一个默认导出。

模块始终使用严格模式​

默认情况下，模块处于严格模式（strict mode）。例如，

// 在 greet.js 中
function greet() {
 // 默认为严格模式
}

export greet();

使用模块的好处​

  • 代码库更易于维护，因为具有不同功能的不同代码位于不同的文件中。
  • 使代码可重用。你可以定义一个模块，并根据需要多次使用它。

在一些浏览器中可能不支持 import/export 的使用。要了解更多，请访问 JavaScript import/export 支持。

最后于 更新