模块在JavaScript中是指一个单一文件，包含了一个JavaScript代码或脚本。为了不让整个应用的代码集中在单个文件中，我们可以将具有相同功能性的代码分成多个独立的文件。
简而言之，模块包含了执行特定任务的代码。它可以包含变量、函数、类等。
当应用程序的规模增长时，代码行数也会随之增加。实际上的应用程序可能会包含数百万行代码。试想一下，如果开发者只有一个包含数百万行代码的文件，他们是否能够妥善管理？答案显然是否定的。这时，使用模块的概念就显得尤为重要。
语法
用户可以遵循以下语法来导出和导入模块。
export function func_name(parameters) {
}
import {func_name} from 'filename'
在上面的语法中，export关键字用于从模块中导出函数，而import关键字用于从模块中导入函数。
示例
文件名: mul.js
在下面的代码中，我们在'mul.js'文件中定义了mul()函数，该函数接受两个整数作为参数并返回它们的乘积。另外，我们在function关键字前使用了export关键字来从模块中导出该函数。
export function mul(a, b) {
return a * b;
}
文件名: test.html
<html>
<body>
<div> JavaScript - 模块 </div>
<div id = "output"> </div>
<script type="module">
import { mul } from './mul.js';
document.getElementById('output').innerHTML =
"2 和 3 的乘积是 " + mul(2, 3);
</script>
</body>
</html>
输出:
JavaScript - 模块
2 和 3 的乘积是 6
在上面的代码中，我们在HTML文件中导入了模块。但是，我们也可以在另一个JavaScript文件中导入模块。
从单个模块导出多个对象
你也可以从单个模块中导出多个变量、函数等。让我们通过下面的例子来理解这一点。
文件名: math.js
在下面的代码中，我们导出了mul()和sum()函数。同时，我们也导出了包含π值的变量。简而言之，我们正在从单个模块中导出多个对象。
export function mul(a, b) {
return a * b;
}
export function sum(a, b) {
return a + b;
}
export let PI = Math.PI;
文件名: test.html
<html>
<body>
<div> 从单个模块导出多个对象 </div>
<div id = "output"> </div>
<script type="module">
import { mul, sum, PI } from './math.js';
document.getElementById('output').innerHTML =
"2 和 3 的乘积是 " + mul(2, 3) +
"<br> 2 和 3 的和是 " + sum(2, 3) +
"<br> π 的值是 " + PI;
</script>
</body>
</html>
输出:
从单个模块导出多个对象
2 和 3 的乘积是 6
2 和 3 的和是 5
π 的值是 3.141592653589793
默认导出
你可以使用default关键字在模块中定义默认导出。之后，当你试图导入一个未在模块中定义的对象时，它会返回默认导出的对象。默认导出有助于避免导入错误。
语法
用户可以遵循以下语法在模块中使用默认导出。
export default function func_name(params) {
}
import random_name from 'filename'
在上面的语法中，default关键字用于在export关键字后默认导出func_name函数。
示例
文件名: test.js
在下面的代码中，我们默认导出了变量v1，同时也导出了变量v2。
const v1 = "版本 1";
export default v1;
export const v2 = "版本 2";
文件名: test.html
<html>
<body>
<div> 默认导出 </div>
<div id = "output"> </div>
<script type="module">
import v3, { v2 } from './test.js';
document.getElementById('output').innerHTML =
"v3 的值是 : " + v3 + "<br>" +
"v2 的值是 : " + v2;
</script>
</body>
</html>
输出:
默认导出
v3 的值是 : 版本 1
v2 的值是 : 版本 2
改名导入和导出
有时候，代码文件和模块文件可能包含同名的对象。在这种情况下，如果开发者在代码文件中导入模块，可能会引起冲突和错误。为了解决这个问题，我们可以在导出或导入时更改模块的名字。
改名导出的语法
用户可以遵循以下语法改名导出。
export {
func1 as N1,
func2 as N2
};
import { N1, N2 } from './module.js';
在上面的语法中，我们在导出时使用了as关键字将func1改名为N1，将func2改名为N2。
改名导入的语法
用户可以遵循以下语法改名导入。
export {
func1,
func2
};
import { func1 as N1, func1 as N2 } from './module.js';
在上面的语法中，我们在导入时改变了函数的名字。