ES11 新特性：import() 现在可以不需要写 .js 扩展名-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用的复杂度越来越高，模块化就成为了必不可少的一部分。在 JavaScript 中，模块化已经成为了一个标准，可以通过 import 和 export 关键字来实现模块化。

在 ES6 中，我们正式引入了模块化的概念，使用 import 和 export 进行模块化开发。但是，这种方式在某些情况下可能会导致一些问题。

ES11 新特性 import() 解决了这些问题，使得我们在使用模块化时更加方便、灵活。

`import()` 简介

在 ES11 中，import() 是一个新的函数，它可以动态地导入模块。相比于传统的 import 语法，import() 有如下优势：

可以异步加载模块，提高应用的性能。
可以根据条件来决定是否加载模块，提高代码的灵活性。

使用示例

加载默认导出

我们首先来看一个简单的示例，在加载同目录下的 module.js 文件时：

const module = await import('./module.js');

如果要加载的是默认导出的模块，那么可以像这样使用：

const module = await import('./module.js');
const result = new module.default();

加载命名导出

如果要加载的是命名导出的模块，那么可以像这样使用：

const module = await import('./module.js');
const result = new module.sample();

动态加载模块

在实际的开发过程中，我们经常需要根据不同的条件来加载不同的模块，这时候 import() 会非常有用。例如，在加载同目录下的 renderA.js 或 renderB.js 文件时：

async function renderComponent(type) {
  const render = type === 'A' ?
                 await import('./renderA.js') :
                 await import('./renderB.js');

  render.default();
}

通过判断 type 的值，我们可以动态地决定加载哪个模块。

导入外部 URL 中的模块

import() 还可以用来加载外部 URL 中的模块。例如，加载 http://example.com/test.js 中的模块：

async function loadModuleFromUrl(url) {
  const module = await import(url);
  module.default();
}

loadModuleFromUrl('http://example.com/test.js');

注意事项

需要注意的是，在使用 import() 时，浏览器需要支持 ES6 模块化。如果浏览器不支持 ES6 模块化，我们可以使用类似于 webpack 和 babel 这样的工具来将模块自动转换为可以在老版本浏览器中使用的代码。

结论

通过 import()，我们可以动态地导入模块，提高代码的灵活性。在实际开发中，这个特性会非常有用。使用 import() 可以避免一些问题，例如使用 require 时需要写 .js 扩展名的问题。如果你正在进行模块化开发，那么建议尝试一下这个新特性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f2aa07a44b36ee5766dabf

ES11 新特性：import() 现在可以不需要写 .js 扩展名

import() 简介