ECMAScript 2020 引入了 import() 函数，可以在运行时按需动态加载 ES6 模块。相较于静态 import 语句，import() 函数具有更好的灵活性和效率。本文将介绍 import() 函数的使用方法和注意事项，帮助前端开发者正确使用该函数提升代码效率和可维护性。
基本语法
import() 函数与正常的 import 语句相似，但需要将需要动态加载的模块作为参数传递给函数。其基本语法如下：
import(moduleName)
.then((module) => {
// use module
})
.catch((error) => {
// handle error
});其中，moduleName 是动态加载的模块路径，可以是相对路径或绝对路径。加载成功后，返回的 module 变量即为加载的模块对象。如果加载失败，可以在 catch 块中处理错误。
示例代码
下面是一个简单的例子，用 import() 函数动态加载模块：
-- -------------------- ---- -------
----- ------ - ---------------------------------
-------------------------------- -- -- -
---------------------
-------------- -- -
-- --- ------
-----------------
--
-------------- -- -
-- ------ -----
---------------------
---
---在该示例中，当用户点击按钮时，会执行 import 函数动态加载 ./module.js 模块。如果成功加载，则执行导出的默认函数。
注意事项
使用 import() 函数需要注意以下几点：
import()函数返回的是一个Promise对象，因此需要使用then方法来接收加载成功后的模块对象，并使用catch方法处理加载失败的情况。import()函数只能在模块顶层作用域调用，不能在函数内部调用。在使用
import()函数加载模块时，需要遵循模块加载的约定，即自动在模块路径后添加.js后缀，并根据该路径查找模块文件。在使用
import()函数加载模块时，要注意传递的参数必须是字符串常量，不能是表达式或变量。
总结
import() 函数是 ECMAScript 2020 新增的功能，可以帮助前端开发者按需动态加载 ES6 模块，提高应用程序的效率和可维护性。在使用该函数时需要注意传递的参数必须是字符串常量、只能在模块顶层作用域调用，并遵循模块加载的约定。希望本文能够帮助读者正确使用 import() 函数，并提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649759a948841e9894461bb0