JavaScript - 模块
什么是模块?
JavaScript 中的模块是包含 JavaScript 代码或脚本的单个文件。与其将整个应用程序的代码添加到单个文件中，不如将代码拆分，并为具有相同功能的代码创建单独的文件。
简而言之，模块包含执行特定任务的代码。它可以包含变量、函数、类等。
随着应用程序规模的增长，代码行数也会增加。即使是实时应用程序也包含数百万行代码。现在，试想一下，如果开发人员只有一个包含数百万行代码的文件，他们能够妥善管理它吗?答案很简单，是否定的。这里，我们来看一下模块的使用方法。
语法
用户可以按照以下语法导出和导入模块。
export function func_name(parameters) {
// function code
}
import {func_name} from filename
在上述语法中，export 关键字用于从模块导出函数，import 关键字用于从模块导入函数。
示例
文件名:mul.js
在下面的代码中，我们在 mul.js 文件中定义了 mul() 函数，该函数接受两个整数作为参数，并返回它们的乘积。另外，我们在"function"关键字之前使用了"export"关键字，以便从模块中导出该函数。
// 导出 mul() 函数
export function mul(a, b) {
return a * b;
}
文件名:test.html
在下面的文件中，我们使用 type="module" 和标签将其视为模块。之后，使用关键字 import function from file。接下来调用，您可以观察输出。
<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 值的变量。简而言之，我们从单个模块导出了多个对象。
// 导出 mul() 函数
export function mul(a, b) {
return a * b;
}
// 导出 sum() 函数
export function sum(a, b) {
return a + b;
}
// 导出 PI 的值
export let PI = Math.PI;
FileName: 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) {
// 函数主体
}
import random_name from filename;
在上述语法中，export 关键字后使用 'default' 关键字，默认导出 'func_name' 函数。
示例
文件名:test.js
在下面的代码中，我们默认导出 'v1' 变量，同时也导出 'v2' 变量。
const v1 = "Version 1"; // 默认导出 export default v1; // 其他模块 export const v2 = "Version 2";
文件名: test.html
在下面的代码中，我们从 test.js 文件中导入了"v3"和"v2"。由于 test.js 文件中没有导出"v3"，因此它导入的是默认对象，即"v1"。
<html>
<body>
<div> Default Export </div>
<div id = "output"> </div>
<script type="module">
// V3 在模块中未定义，因此返回 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 { N1, N2 } from './module.js';
在上述语法中，我们在从模块导出时将 func1 的名称更改为 N1，将 func2 的名称更改为 N2。我们使用了 'as' 关键字来更改函数的名称。
重命名导入的语法
用户可以按照以下语法重命名导入。
export {
func1,
func2
};
// 在代码文件中导入
import { func1 as N1, func1 as N2 } from './module.js';
在上述语法中，我们在导入函数时更改了函数名称。
