ES11 更新：动态 import() 的使用细节-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，JavaScript 也在不断地更新和完善。ES11（也称为 ES2020）是 JavaScript 最新的版本，其中引入了许多新的特性和语法糖，其中之一就是动态 import()。

什么是动态 import()？

在 ES6 中，我们可以使用静态 import 语句来导入模块。静态 import 语句是在编译时执行的，因此不能根据运行时的条件来动态加载模块。而动态 import() 则是在运行时执行的，可以根据运行时的条件来动态加载模块。

动态 import() 的语法如下：

import(moduleName)
  .then((module) => {
    // 使用模块
  })
  .catch((error) => {
    // 处理错误
  });

其中 moduleName 是一个字符串表达式，表示要加载的模块的路径。import() 方法会返回一个 Promise，当模块加载成功时，Promise 的 then 方法会被调用，传入加载的模块。如果加载失败，则 Promise 的 catch 方法会被调用，传入错误信息。

动态 import() 的使用细节

1. 动态 import() 只能在异步函数中使用

由于动态 import() 是一个异步操作，因此只能在异步函数中使用。如果在同步函数中使用，会导致语法错误。

// javascriptcn.com 代码示例
// 错误的示例
function loadModule() {
  const module = import("./module.js"); // 语法错误
  // ...
}

// 正确的示例
async function loadModule() {
  const module = await import("./module.js");
  // ...
}

2. 动态 import() 的返回值是一个 Promise

由于动态 import() 是一个异步操作，因此它的返回值是一个 Promise。如果要使用加载的模块，需要在 Promise 的 then 方法中处理。

import("./module.js")
  .then((module) => {
    // 使用模块
  })
  .catch((error) => {
    // 处理错误
  });

3. 动态 import() 加载的模块会被缓存

与静态 import 不同，动态 import() 加载的模块会被缓存。如果多次调用同一个模块，只会加载一次，后续的调用会直接从缓存中获取。

async function loadModule() {
  const module1 = await import("./module.js");
  const module2 = await import("./module.js"); // 不会重新加载模块，直接从缓存中获取
  // ...
}

4. 动态 import() 可以使用变量作为模块路径

由于动态 import() 的参数是一个字符串表达式，因此可以使用变量作为模块路径。这使得我们可以根据运行时的条件来动态加载模块。

async function loadModule(moduleName) {
  const module = await import(`./${moduleName}.js`);
  // ...
}

示例代码

下面是一个使用动态 import() 加载模块的示例代码：

// javascriptcn.com 代码示例
async function loadModule() {
  try {
    const module = await import("./module.js");
    console.log(module);
  } catch (error) {
    console.error(error);
  }
}

loadModule();

在这个示例中，我们使用动态 import() 加载了一个名为 module.js 的模块，并在控制台中输出了这个模块的内容。如果加载失败，则会在控制台中输出错误信息。

总结

动态 import() 是 ES11 中引入的一个新特性，它可以根据运行时的条件来动态加载模块。在使用动态 import() 时，需要注意它只能在异步函数中使用，返回值是一个 Promise，加载的模块会被缓存，可以使用变量作为模块路径。了解和掌握动态 import() 的使用细节，可以使我们更加灵活地使用模块化开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656a9a76d2f5e1655d302bb0