在前端开发中，我们经常需要在代码中引入其他模块或库，以实现特定的功能。在 ES6 中，引入模块的方式是通过 import 关键字实现的。但是在实际开发中，我们可能需要动态加载模块，而不是在代码中静态引入。在 ES11 中，新增了动态导入和 import() 方法，可以满足这个需求。
动态导入的概念
动态导入是指在运行时才加载模块，而不是在编译时就确定模块的引入方式。这种方式可以极大地提高代码的灵活性和性能，尤其是在需要按需加载模块的情况下。动态导入的语法是 import() 方法，它可以返回一个 Promise 对象，用于异步加载模块。
import() 方法的语法
import() 方法的语法与普通的 import 语句类似，只是将模块名放在一个字符串中，并作为 import() 方法的参数。示例如下：
import('./module.js')
.then((module) => {
// 使用 module
})
.catch((error) => {
// 处理错误
});在上述代码中，import() 方法返回一个 Promise 对象，当模块加载成功后，Promise 对象的 then 方法会被调用，并将加载的模块作为参数传递给回调函数。如果加载失败，Promise 对象的 catch 方法会被调用，并将错误信息作为参数传递给回调函数。
动态导入的示例
下面通过一个示例来演示动态导入的使用。假设我们有一个页面，需要根据用户的选择动态加载不同的模块。我们可以使用 import() 方法来实现这个功能。
假设我们有两个模块 module1.js 和 module2.js，它们都定义了一个名为 hello 的函数，分别输出不同的字符串。我们的页面代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
-----
---------------------
------- -------------------
------- ---------------------
------- ---------------------------------
------- ---------------------------------
---------
------
---- ------------------
--------
----- ------------ - -----------------------------------------
----- ------ - ----------------------------------
--------------------------------------- ----- ------- -- -
----- ---------- - -------------------
-- ------------ -
--- -
----- ------ - ----- -------------------
---------------- - ---------------
- ----- ------- -
---------------- - --------- - --------------
-
- ---- -
---------------- - ---
-
---
---------
-------
-------在上述代码中，我们使用了 async/await 语法来简化 Promise 的使用。当用户选择模块后，我们使用 import() 方法异步加载模块，并调用模块中的 hello 函数来输出字符串。如果模块加载失败，我们会在页面上显示错误消息。
总结
动态导入和 import() 方法是 ES11 中新增的特性，可以实现在运行时动态加载模块的功能。它可以提高代码的灵活性和性能，尤其是在需要按需加载模块的情况下。在实际开发中，我们可以根据具体的需求来使用这个特性，从而提高应用的质量和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66025fcad10417a222df0b98