ES7 中的 import() 函数引入动态导入的 JS 模块

在前端开发中，我们经常需要引入其他的 JS 模块，以便实现我们的功能。在早期的 ES6 中，我们可以使用 import 关键字来引入模块。但是，这种方式存在一些问题，比如必须在编译时就确定引入的模块路径，不能在运行时动态决定。为了解决这个问题，ES7 引入了 import() 函数，可以实现动态导入 JS 模块。

import() 函数的语法

import() 函数的语法非常简单，如下所示：

import(modulePath)
  .then(module => {
    // do something with the module
  })
  .catch(error => {
    // handle the error
  });

其中，modulePath 是一个字符串，表示要导入的模块的路径。import() 函数会返回一个 Promise 对象，该 Promise 对象在模块加载完成后会被解析为导入的模块对象。如果加载模块失败，则 Promise 会被拒绝，并返回一个错误对象。

import() 函数的优点

相比于 ES6 中的静态导入方式，import() 函数具有以下优点：

• 动态导入：可以在运行时动态决定要导入的模块路径，而不是在编译时就确定。
• 减少代码量：不需要在导入模块的位置写出完整的模块路径，可以只写出模块名，减少代码量。
• 提高性能：只有在需要使用模块时才会加载，可以避免不必要的加载，提高性能。

import() 函数的示例代码

下面是一个使用 import() 函数的示例代码：

async function loadModule() {
  const module = await import('./module.js');
  module.doSomething();
}

loadModule();

在上面的示例代码中，我们使用 import() 函数动态加载了一个名为 module.js 的模块，并调用了其 doSomething() 方法。这里使用了 async/await 语法糖，使代码更加简洁易懂。

import() 函数的注意事项

使用 import() 函数时需要注意以下几点：

• import() 函数只能在模块内部使用，不能在全局作用域中使用。
• import() 函数返回的是一个 Promise 对象，因此需要使用 async/await 或者 .then() 方法来获取导入的模块。
• import() 函数只能导入 ES 模块，不能导入 CommonJS 模块或者 AMD 模块。

总结

import() 函数是 ES7 中的新特性，可以实现动态导入 JS 模块，具有动态、减少代码量、提高性能等优点。在使用时需要注意一些细节，但是使用起来非常方便。我们可以在实际的项目中尝试使用 import() 函数，以提高代码的可维护性和性能。

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