JavaScript - 模块

什么是模块？

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>

输出

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;

文件名： 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'。由于 '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>

输出

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';

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

打印本页