在 ECMAScript 2020 中，JavaScript 引入了一个新的 import() 函数，可以动态地加载 JavaScript 模块。与传统的 import 语句不同，在 import() 函数中，模块路径可以是一个字符串表达式，也就是说，可以在运行时根据实际的代码情况来决定加载哪个模块。这使得 JavaScript 模块化编程更加灵活和动态。
基本语法
import() 函数接收一个字符串参数，表示要加载的模块路径。参数可以是绝对路径或相对路径，支持常规 URL 和 blob URL。import() 函数返回一个 Promise 对象，该 Promise 的解决值是一个包含模块导出值的对象。
下面是 import() 函数的基本语法：
import(moduleSpecifier)
.then(module => {
// 使用模块导出值
})
.catch(error => {
// 处理加载模块失败的情况
});示例代码
动态加载模块
假设有一个模块定义如下：
// ./lib/math.js
export function square(x) { return x * x; }
export function cube(x) { return x * x * x; }我们可以使用 import() 函数来动态加载这个模块，如下所示：
import('./lib/math.js')
.then(module => {
console.log(module.square(3)); // 9
console.log(module.cube(3)); // 27
})
.catch(error => {
console.error('加载模块失败：', error);
});动态加载条件模块
考虑到某些情况下只需要加载满足特定条件的模块，我们可以在 import() 中使用字符串表达式来动态生成模块路径。举个例子来说，假设有一个函数 loadModule(condition)，该函数根据条件动态生成模块路径，我们可以这样来加载模块：
-- -------------------- ---- -------
-------- --------------------- -
----- ---------- - ------------------------
------ -------------------
-
------------------
------------ -- -
------------------------------ -- --
--
------------ -- -
------------------------ -------
---上面的代码中，loadModule 函数使用字符串模板在运行时动态生成模块路径，我们可以根据需要传递不同的条件来加载不同的模块。
动态加载多个模块
import() 函数与传统的 import 语句不同，它可以加载多个模块。当传递一个字符串数组作为参数时，import() 函数会按顺序加载每个模块，并返回一个包含所有导出值的数组。
-- -------------------- ---- -------
-------------
------------------------
-------------------------
--
------------- -------- -- -
---------------------------- -- --
----------------------------------- --------- -- ------------
--
------------ -- -
------------------------ -------
---注意事项
使用 import() 函数需要注意以下几点：
import()返回的是一个 Promise 对象，可能会被值的解析或拒绝，需要使用then()或catch()方法来处理。import()只能在模块顶层使用，不能在函数内部使用。- 可以使用对象解构或数组解构来获取导出值，或使用全局作用域中的
window对象来访问导出值。
结论
import() 函数是 ECMAScript 2020 中的一个重要新特性，它提供了一种更加灵活和动态的 JavaScript 模块化编程方式。动态导入的特性使得我们可以根据实际代码情况来决定加载哪个模块，从而更好地满足复杂应用的需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3726ee1e8e99bfaf718bc