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();

使用模块的好处

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

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