在本教程中，您将借助示例了解 JavaScript 中的模块。
随着我们的程序变得越来越大，它可能包含许多行代码。您可以使用模块根据功能将代码分隔在单独的文件中，而不是将所有内容都放在一个文件中。这使我们的代码更有条理，更易于维护。
模块是一个包含执行特定任务的代码的文件。一个模块可能包含变量、函数、类等。让我们看一个例子，假设一个名为 greet.js 的文件包含以下代码：

// exporting a function
export function greetPerson(name) {
    return `Hello ${name}`;
}

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

// importing greetPerson from greet.js file
import { greetPerson } from './greet.js';

// using greetPerson() defined in greet.js
let displayName = greetPerson('Jack');

console.log(displayName); // Hello Jack

这里，

greet.js 中的 greetPerson() 函数是使用 export 关键字导出的

export function greetPerson(name) {
    ... 
}

然后，我们使用 import 关键字在另一个文件中导入 greetPerson()。要导入函数、对象等，您需要将它们包裹在 { } 。

import { greet } from '/.greet.js';

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

导出多个对象

也可以从一个模块中导出多个对象。例如，在文件 module.js 中

// exporting the variable
export const name = 'JavaScript Program';

// exporting the function
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.在模块中重命名（导出文件）

// renaming import inside module.js
export {
    function1 as newName1,
    function2 as newName2
};

// when you want to use the module
// import in the main file
import { newName1, newName2 } from './module.js';

这里，从 module.js 文件中导出函数时，新名称（这里，newName1 和 newName2) 被赋予函数。因此，在导入该函数时，将使用新名称来引用该函数。

2.重命名导入文件

// inside module.js
export {
    function1,
    function2
};

// when you want to use the module
// import in the required file with different name

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

这里，在导入函数时，函数名使用了新名称（这里，newName1 和 newName2) 。现在使用新名称来引用这些函数。

默认导出

您还可以执行模块的默认导出。例如，
在文件 greet.js 中：

// default export
export default function greet(name) {
    return `Hello ${name}`;
}

export const age = 23;

然后在导入的时候可以使用：

import random_name from './greet.js';

在执行默认导出时，

random_name 是从 greet.js 导入的。因为，random_name 不在 greet.js，默认导出（本例中为 greet()）被导出为 random_name。
您可以直接使用默认导出，而无需使用大括号 { }。

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

模块总是使用严格模式

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

// in greet.js
function greet() {
    // strict by default
}

export greet();

使用模块的好处

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

某些浏览器可能不支持使用导入/导出。要了解更多信息，请访问JavaScript 导入/导出支持。

上一教程 ：JS throw 下一教程 ：JS ES6

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/modules

JavaScript 模块