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>

输出

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 块等中动态导入模块，而不是在代码顶部导入它们。