我在JavaScript应用程序中使用ES6模块。源码使用webpack和babel编译。这是该文件的简化版本,给我带来麻烦:
export const JUST_FORM = 0;
export const AS_PAGE = 1;
console.log(AS_PAGE); // **
export default function doSomething(mode = AS_PAGE) {
console.log(mode);
console.log(JUST_FORM);
}
正如您所期望的,我使用此功能。
import doSomething, { AS_PAGE } from './doSomething'
console.log(AS_PAGE);
doSomething();
当我运行该应用程序时,它将打印3次,undefined
并且仅打印一次AS_PAGE
,即用console.log
标记的期望值**
。但是,这是最后打印!它表明:
AS_PAGE
当用作doSomething
函数的默认参数时,常数在定义函数时尚未定义。JUST_FORM
当常量没有定义doSomething
被调用。AS_PAGE
明确导入时未定义该常数。显然,这里发生的事情是仅对default
导出进行了解析和评估,而文件的其余部分将被忽略,直到以后。我将此文件导入应用程序中的几个不同位置(此位置目前很大),并且在某些时候这些值实际上变得可用。从控制台输出来看,这是时间问题,但可能有不同的原因。显然,我在所有地方都以完全相同的方式进行导入。
无论如何,我已经编写了整个应用程序,并假设一旦导入某些内容,它便立即可用,并且可以在我的代码中使用它。我(简要地)阅读了有关ES6模块应如何工作的信息,但我没有发现任何证据可以证明此假设是错误的。一直到现在。
还要注意,当我将其运行webpack-dev-server
或编译为单个捆绑软件时,其行为是相同的。
这种行为真的正确吗?可能是什么原因?
如评论中所建议,此处的答案是循环依赖项。
问题中提供的代码中实际上没有循环依赖(因为这只是简化的代码片段),但是症状非常明显。
循环依赖的最简单示例是文件A导入文件B和文件B导入A的情况。不幸的是,有时很难检测到此问题的原因是,圆可以任意大,跨过大量文件。
ES6支持循环依赖关系,只要足够小心,就可以使用它们。但是,我要讲的是,循环依赖性通常是不良设计决策的标志。这正是我的情况。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句