Javascript 简明教程
JavaScript - Dynamic Imports
Dynamic Imports
无论何时应用程序代码增长并包含数千行，将代码拆分为模块非常重要。模块允许开发人员分解复杂代码并通过导入在不同的文件中使用它们。
Whenever the application code grows and contains thousands of lines, it is important to split the code into modules. Modules allow developers to break down complex codes and use them in different files by importing.
在 JavaScript modules 章节中，你学会了从模块中导入和导出对象，但这是一个静态导入，因为我们在代码顶部加载它们。有时，我们需要根据需要导入模块，而不是静态导入它们，以提高 Web 应用程序的性能。这也称为 dynamic imports 。
In JavaScript modules chapter, you learned to import and export objects from the modules, but it was a static import, as we load them at the top of the code. Sometimes, we need to import the modules whenever needed rather than importing them statically to improve the performance of the web application. It is also called dynamic imports.
The import() Expression for Dynamic Imports
每当需要动态导入模块时，可以使用 modules 表达式，它会返回 Promise。我们可以在代码中的任何位置使用 import() 表达式来动态导入模块。
Whenever you need to import a module dynamically, you can use the import() expression, which returns the promise. We can import the module dynamically using the import() expression anywhere in the code.
Syntax
用户可以按照以下语法使用 import() 表达式动态导入模块。
Users can follow the syntax below to import modules dynamically using the import() expression.
import(moduleName).then(module => {
// Use the module here.
});在上述语法中，我们使用 then() 方法和 import() 表达式来解决 Promise。
In the above syntax, we use the then() method with the import() expression to resolve the promise.
Examples of Dynamic Import
Example 1
Filename: test.js
Filename: test.js
在以下代码中，我们导出一个包含整数值的“val1”变量。
In the code below, we export the 'val1' variable containing the integer value.
export const val1 = 11;Filename: test.html
Filename: test.html
在以下代码中，我们使用了 if-else 语句。我们导入模块并在 if() 块中使用其对象。
In the code below, we have used the if-else statement. We import the module and use its objects in the if() block.
这样一来，我们就可以使用 import() 表达式动态导入模块。
This way, we can import modules dynamically using the import() expression.
<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) {
// Importing the module
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 11Example 2
Filename: test.js
Filename: test.js
在以下代码中，我们定义了 add() 函数，它返回两个数字的和。
In the code below, we have defined the add() function, which returns the sum of two numbers.
export function add(a, b) {
return a + b;
}Filename: test.html
Filename: test.html
在以下代码中，我们将“click”事件侦听器添加到按钮。当用户单击该按钮时，它将加载“test.js”模块。这里，我们使用了 async/await 来处理 import() 表达式返回的 promise。
In the code below, we have added the 'click' event listener to the button. When a user clicks the button, it loads the 'test.js' module. Here, we used the async/await to handle the promise returned by the import() expression.
之后，我们使用模块中的 add() 函数对两个数字求和，而用户可以在输出中观察求和结果。
After that, we use the add() function of the module to sum two numbers, and users can observe the summation result in the output.
<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');
//When the button is clicked, load the module
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这种方式下，开发人员可以随时动态导入模块到 functions、if-else 块中，而不用在代码顶部将它们导入。
This way, developers can import modules dynamically in the function, if-else block, etc., whenever needed rather than importing them at the top of the code.