随着 JavaScript 的发展，我们已经不再满足于仅仅使用传统的 script 标签来加载 JS 文件。ES6 为我们带来了方便、快捷、模块化的 import 语法。在本文中，我们将深入介绍 ES6 import 语法的使用注意事项。
import 的基本语法
我们先来看一个简单的模块 utils.js，它导出了 add 函数：
-- -------- ------ -------- ------ -- - ------ ---- -
使用 import 语法导入模块：
-- -------- ------ - --- - ---- ------------- ------------------ ----
输出结果为：3。
import 语法可以导入命名导出，也可以导入默认导出。下面是一个导出默认模块的例子：
-- -------- ------ ------- -------- ------ -- - ------ ---- -
-- -------- ------ --- ---- ------------- ------------------ ----
加载路径的注意事项
在使用 import 语法时，经常会遇到加载路径的问题。下面是一些注意事项，需要注意：
路径必须以“/”开头。
相对路径必须以“/”开头，表示相对于根目录。例如：
import { add } from '/utils.js';路径必须以文件扩展名结尾。
ES6 模块系统使用文件扩展名来判断文件类型，因此在导入时必须明确指定扩展名。例如：
import { add } from './utils.js';路径必须是字符串常量。
import语法要求路径必须是字符串常量，因此运行时无法修改导入路径。例如：import { add } from './' + 'utils.js';
循环依赖
循环依赖是指模块循环引用的情况。例如：
-- --------- ------ - --- - ---- -------------- ------ -------- ----------- -- - ------ ------ -- - -- -
-- --------- ------ - -------- - ---- -------------- ------ -------- ------ -- - ------ ----------- -- - -- -
这时会导致错误：
-------- ---------- ------ ------ ---------- ------ --------------
解决循环依赖的方法之一是重构代码，将循环依赖的代码移动到一个新的模块中。例如，在上述例子中，我们可以将 multiply 函数移到一个新模块中：
-- --------- ------ - --- - ---- -------------- ------ -------- ----------- -- - ------ ------ -- - -- -
然后可以修改 utils1.js 和 utils2.js：
-- --------- ------ - -------- - ---- -------------- ----------------------- ----
-- --------- ------ - --- - ---- -------------- ------------------ ----
现在，运行代码将不再报错。
总结
在使用 ES6 的 import 语法时，需要注意路径、循环依赖等问题。优秀的开发者应该能够了解这些注意事项，并使用最好的实践来构建他们的应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/659f6ea1add4f0e0ff80e2d6