JavaScript 模块

什么是模块？

在 JavaScript 中，模块是包含 JavaScript 代码或脚本的单个文件。与其将整个应用程序的代码添加到单个文件中，不如将代码分解并为具有相同功能的代码创建单独的文件。

简而言之，模块包含执行特定任务的代码。它可以包含变量、函数、类等。

当应用程序规模增长时，代码行数也会增长。即使是实时应用程序也包含数百万行代码。现在，想象一下，如果开发人员只有一个包含数百万行代码的单个文件。他们能够正确管理它吗？简单的答案是不行。这时，使用模块就派上用场了。

语法

用户可以遵循以下语法来导出和导入模块。

export function func_name(parameters) {
// function code
}

import {func_name} from filename

在上述语法中，export 关键字用于从模块导出函数，import 关键字用于从模块导入函数。

示例

文件名：mul.js

在下面的代码中，我们在 'mul.js' 文件中定义了 'mul()' 函数，该函数接受两个整数作为参数并返回它们的乘积。此外，我们在 'function' 关键字之前使用了 'export' 关键字来从模块导出该函数。

//  exporting mul() function
export function mul(a, b) {
    return a * b;
}

文件名：test.html

<html>
   <body>
   <div> JavaScript - Modules </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul } from './mul.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3);
   </script>
</body>
</html>

输出

JavaScript - Modules
The multiplication of 2 and 3 is 6

在上面的代码中，我们已在 HTML 文件中导入了模块。但是，我们也可以在另一个 JavaScript 文件中导入模块。

从单个模块导出多个对象

您还可以从单个模块导出多个变量、函数等。让我们通过下面的示例来了解它。

示例

文件名：math.js

在下面的代码中，我们导出了 mul() 和 sum() 函数。此外，我们还导出了包含 PI 值的变量。简而言之，我们从单个模块导出多个对象。

// exporting mul() function
export function mul(a, b) {
    return a * b;
}
// exporting sum() function
export function sum(a, b) {
    return a + b;
}
// export value of PI
export let PI = Math.PI;

文件名：test.html

在下面的代码中，我们从单个模块导入多个对象并使用它们执行数学运算。

<html>
   <body>
   <div> Exporting Multiple Objects from a Single Module </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul, sum, PI } from './math.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3 + 
      "<br> The addition of 2 and 3 is " + sum(2, 3) + 
      "<br> The value of PI is " + PI;
   </script>
</body>
</html>

输出

Exporting Multiple Objects from a Single Module
The multiplication of 2 and 3 is 6
The addition of 2 and 3 is 5
The value of PI is 3.141592653589793

默认导出

您可以使用 'default' 关键字在模块中定义默认导出。之后，每当您尝试导入模块中未定义的对象时，它都会返回默认导出的对象。默认导出有助于避免导入错误。

语法

用户可以遵循以下语法在模块中使用默认导出。

export default function func_name(params) {
// function body
}
import random_name from filename;

在上述语法中，'default' 关键字用于在 export 关键字之后默认导出 'func_name' 函数。

示例

文件名：test.js

在下面的代码中，我们默认导出 'v1' 变量，并且我们还导出 'v2' 变量。

const v1 = "Version 1";
// default export
export default v1;
// other modules
export const v2 = "Version 2";

文件名：test.html

在下述代码中，我们从 test.js 文件导入了 'v3' 和 'v2'。由于 'v3' 未在 test.js 文件中导出，因此它导入的是默认对象 'v1'。

<html>
<body>
   <div> Default Export </div>
   <div id = "output"> </div>
   <script type="module">
      // V3 is not defined in the module, so it returns V1.
      import v3, { v2 } from './test.js';

      document.getElementById('output').innerHTML = 
		"The value of v3 is : " + v3 + "<br>" +
      "The value of v2 is : " + v2;
   </script>
</body>
</html>

输出

Default Export
The value of v3 is : Version 1
"The value of v2 is : Version 2

重命名导入和导出

有时，代码文件和模块文件包含相同名称的对象。在这种情况下，如果开发者在代码文件中导入模块，可能会引发冲突和错误。为了解决这个问题，我们可以在导出或导入时更改模块的名称。

重命名导出的语法

用户可以按照以下语法重命名导出。

export {
    func1 as N1,
    func2 as N2
};
// import in the code file
import { N1, N2 } from './module.js';

在上述语法中，我们在从模块导出时将 func1 的名称更改为 N1，将 func2 的名称更改为 N2。我们使用 'as' 关键字来更改函数的名称。

重命名导入的语法

用户可以按照以下语法重命名导入。

export {
    func1,
    func2
};
// import in the code file
import { func1 as N1, func1 as N2 } from './module.js';

在上述语法中，我们在导入时更改函数名称。

打印页面