JavaScript - 动态导入
动态导入
当应用程序代码规模扩大并包含数千行代码时，将代码拆分为模块非常重要。模块允许开发者将复杂代码分解，并在不同文件中通过导入使用它们。
在 JavaScript modules 章节中，您学习了如何从模块中导入和导出对象，但那是静态导入，因为我们在代码顶部加载它们。有时，我们需要在需要时动态导入模块，而不是静态导入，以提升 Web 应用程序的性能。这也被称为 dynamic imports。
用于动态导入的 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>
输出
Example 1 - dynamic import in JavaScript The imported value is 11
示例 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 块等需要的位置动态导入模块，而不是在代码顶部导入。