什么是模块？
JavaScript 中的模块是包含 JavaScript 代码或脚本的单个文件。我们可以分解代码并为具有相同功能的代码创建单独的文件，而不是将整个应用程序的代码添加到单个文件中。
简而言之，该模块包含执行特定任务的代码。它可以包含变量、函数、类等。
当应用程序的大小增加时，代码中的行数也会增加。即使是实时应用程序也包含数百万行代码。现在，考虑一下开发人员是否只有一个包含数百万行代码的文件。他们能够妥善管理它吗？简单的答案是否定的。在这里，使用该模块就出现了。
语法
用户可以按照以下语法导出和导入模块。
export function func_name(parameters) {
// 函数代码
}
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
<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>
输出
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;
文件名： 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>
输出
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'。由于 'v3' 不是从 test.js 文件中导出的，因此它会导入默认对象，即 '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>
输出
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';
在上面的语法中，我们在导入函数时更改函数名称。
