在 ECMAScript 2018 (ES9) 中引入了一个新的函数 import()，这个函数可以在运行时动态地加载模块。这个新特性的引入，使得前端开发更加灵活和高效。
动态 import() 的语法
动态 import() 的语法如下：
------------------
-------------- -- -
-- -- --------- ---- --- ------
--
-------------- -- -
-- ------ -----
---其中，moduleName 是一个字符串，表示要加载的模块的路径。import() 函数返回一个 Promise 对象，当模块加载完成后，Promise 对象会被 resolve，并将加载的模块作为参数传递给 then() 方法。
动态 import() 的优点
动态 import() 的优点主要有以下几点：
- 代码分割：动态 import() 可以将应用程序的代码分割成更小的块，从而提高应用程序的性能和速度。
- 懒加载：动态 import() 可以在需要的时候加载模块，从而减少应用程序的初始化时间。
- 条件加载：动态 import() 可以根据条件加载不同的模块，从而使应用程序更加灵活和高效。
- 动态加载：动态 import() 可以在运行时根据用户的行为动态加载模块，从而提高用户体验。
动态 import() 的示例
下面是一个使用动态 import() 的示例：
----- -------- ------------ - ----- ------ - ----- ---------------------- ------------------ - -------------
在这个示例中，我们定义了一个异步函数 loadModule()，这个函数使用 import() 函数加载了一个名为 module.js 的模块。当加载完成后，我们调用模块的 sayHello() 方法。
动态 import() 的注意事项
在使用动态 import() 函数时，需要注意以下几点：
- 动态 import() 函数只能在模块中使用，不能在全局作用域中使用。
- 动态 import() 函数返回的是一个 Promise 对象，因此需要使用 async/await 或 then() 方法来处理返回值。
- 动态 import() 函数只能加载 ES 模块，不能加载 CommonJS 模块。
总结
动态 import() 函数是 ECMAScript 2018 (ES9) 中引入的一个新特性，它可以在运行时动态地加载模块，从而使前端开发更加灵活和高效。在使用动态 import() 函数时，需要注意一些细节，例如它只能在模块中使用，只能加载 ES 模块等。但是，如果正确地使用动态 import() 函数，它将成为你的前端开发工具箱中不可或缺的一部分。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/668e3fcadc1ed1a61b238bf9