JavaScript - 动态导入

动态导入

每当应用程序代码增长并包含数千行代码时，将代码拆分为多个模块非常重要。模块允许开发人员分解复杂的代码，并通过导入在不同的文件中使用它们。

在 JavaScript 模块一章中，您学习了从模块导入和导出对象，但这是一个静态导入，因为我们在代码顶部加载它们。有时，我们需要在需要时导入模块，而不是静态导入它们以提高 Web 应用程序的性能。它也称为动态导入。

用于动态导入的 import（）表达式

每当你需要动态导入一个模块时，你可以使用 import（） 表达式，它返回 promise。我们可以在代码中的任何位置使用 import（）表达式动态导入模块。

语法

用户可以按照以下语法使用 import（）表达式动态导入模块。


import(moduleName).then(module => {
	 	 	 	 // 使用此处的模块.
	 	 });

在上面的语法中，我们使用 then（）方法和 import（）表达式来解析 promise。

参数

moduleName − 它以模块名称或路径作为参数，我们需要动态加载。

返回值

它返回 promise。

动态导入示例

示例 1

文件名： test.js

在下面的代码中，我们导出包含整数值的 'val1' 变量。


 export const val1 = 11;

文件名： test.html

在下面的代码中，我们使用了 if-else 语句。我们导入模块并在 if（）块中使用它的对象。

这样，我们可以使用 import（）表达式动态导入模块。


<html>
<body>
	 	<div>Example 1 - dynamic import in JavaScript</div>
	 	<div id = "output"> </div>
	 	<script type="module">
	 	 	 let output = document.getElementById('output');
	 	 	 let val = 2;
	 	 	 if (val < 5) {
	 	 	 	 	// 导入模块
	 	 	 	 	import('./test.js').then(module => {
	 	 	 	 	 	 output.innerHTML = "The imported value is " + module.val1;
	 	 	 	 	});
	 	 	 }
	 	 	 else {
	 	 	 	 	output.innerHTML = "Value is greater than 5";
	 	 	 }
	 	</script>
</body>
</html>

示例 2

文件名： test.js

在下面的代码中，我们定义了 add（）函数，该函数返回两个数字的和。


export function add(a, b) {
	 	 return a + b;
}

文件名： test.html

在下面的代码中，我们向按钮添加了 'click' 事件侦听器。当用户单击该按钮时，它会加载 'test.js' 模块。在这里，我们使用 async/await 来处理 import（）表达式返回的 promise。

之后，我们使用模块的 add（）函数对两个数字求和，用户可以在输出中观察到求和结果。


<html>
	 	<body>
	 	<div>Example 2 - dynamic imports in JavaScript</h2>
	 	<div id = "output"> </div>
	 	<button id = "button"> Click me </button>
	 	<script type="module">
	 	 	 let output = document.getElementById('output');
	 	 	 let btn = document.getElementById('button');
	 	 	 // 点击按钮后，加载模块
	 	 	 btn.addEventListener('click', async () => {
	 	 	 	 	let module = await import('./test.js');
	 	 	 	 	let result = module.add(2, 3);
	 	 	 	 	output.innerHTML = "The sum of 2 and 3 is " + result;
	 	 	 });
	 	</script>
</body>
</html>

输出

Example 2 - dynamic imports in JavaScript
The sum of 2 and 3 is 5

这样，开发人员可以在需要时在函数、if-else 块等中动态导入模块，而不是在代码顶部导入它们。

打印本页