随着前端应用的复杂度越来越高，模块化就成为了必不可少的一部分。在 JavaScript 中，模块化已经成为了一个标准，可以通过 import 和 export 关键字来实现模块化。
在 ES6 中，我们正式引入了模块化的概念，使用 import 和 export 进行模块化开发。但是，这种方式在某些情况下可能会导致一些问题。
ES11 新特性 import() 解决了这些问题，使得我们在使用模块化时更加方便、灵活。
import() 简介
在 ES11 中，import() 是一个新的函数，它可以动态地导入模块。相比于传统的 import 语法，import() 有如下优势：
- 可以异步加载模块，提高应用的性能。
- 可以根据条件来决定是否加载模块，提高代码的灵活性。
使用示例
加载默认导出
我们首先来看一个简单的示例，在加载同目录下的 module.js 文件时：
----- ------ - ----- ----------------------
如果要加载的是默认导出的模块，那么可以像这样使用：
----- ------ - ----- ---------------------- ----- ------ - --- -----------------
加载命名导出
如果要加载的是命名导出的模块，那么可以像这样使用：
----- ------ - ----- ---------------------- ----- ------ - --- ----------------
动态加载模块
在实际的开发过程中，我们经常需要根据不同的条件来加载不同的模块，这时候 import() 会非常有用。例如，在加载同目录下的 renderA.js 或 renderB.js 文件时：
----- -------- --------------------- -
----- ------ - ---- --- --- -
----- ---------------------- -
----- -----------------------
-----------------
-通过判断 type 的值，我们可以动态地决定加载哪个模块。
导入外部 URL 中的模块
import() 还可以用来加载外部 URL 中的模块。例如，加载 http://example.com/test.js 中的模块：
----- -------- ---------------------- - ----- ------ - ----- ------------ ----------------- - ------------------------------------------------
注意事项
需要注意的是，在使用 import() 时，浏览器需要支持 ES6 模块化。如果浏览器不支持 ES6 模块化，我们可以使用类似于 webpack 和 babel 这样的工具来将模块自动转换为可以在老版本浏览器中使用的代码。
结论
通过 import()，我们可以动态地导入模块，提高代码的灵活性。在实际开发中，这个特性会非常有用。使用 import() 可以避免一些问题，例如使用 require 时需要写 .js 扩展名的问题。如果你正在进行模块化开发，那么建议尝试一下这个新特性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f2aa07a44b36ee5766dabf