更新时间:2022-10-19 14:22:16
循环依赖对于声明性导入/导出没有问题。在你的情况下,圆圈的最小长度是: - )
解决方案是, import
将值导入到变量中,但是它将一个变量引用导出到导出的变量中。有关可变变量的示例,请查看此处,并在这个问题用于确切的术语。
它对于模块命名空间对象是一样的 - 它们的属性只是解析为实际导出变量的getter。 >
所以当你的模块被加载和评估时,会出现以下步骤:
export
和 import
声明以构建依赖图 fooModule
变量被创建并实例化为具有模块导出名称的对象,该模块已知为 [logFoo]
。 fooModule.logFoo
属性成为一个getter,它将评估模块范围中的 logFoo
变量(如果您已经使用 export {A as B}
,然后 fooModule.B
将解析为 A
,但在你的情况下,这两个名字是一样的)。 logFoo
,并且函数声明被初始化(即 logFoo
获得分配的功能)现在当你在一个模块中调用 logFoo
导入它, fooModule
将引用包含 logFoo
的命名空间。没有魔法: - )
I have a module called fooModule
. Inside this module, I import fooModule
(itself):
import * as fooModule from './fooModule';
export function logFoo() {
console.log(fooModule)
}
When logFoo()
is called, I can see all of the exports of the fooModule.
How does this work?
Circular dependencies are no problem for declarative imports/exports. In your case, the circle is of minimal length though :-)
The solution is that an import
does not import a value into a variable, but that it makes a variable a reference to the exported variable. Have a look here for an example of a mutable variable, and at this question for exact terminology.
And it's the same for module namespace objects - their properties are just getters that resolve to the actual exported variable.
So when your module is loaded and evaluated, the following steps occur:
export
and import
declarations to build a dependency graphfooModule
variable is created and instantiated to an object with the exported names of the module, which are known to be ["logFoo"]
. The fooModule.logFoo
property becomes a getter that will evaluate to the logFoo
variable in the module scope (if you had used export {A as B}
, then fooModule.B
would resolve to A
, but in your case both names are the same).logFoo
, and function declarations are initialised (i.e. logFoo
gets assigned the function)Now when you call logFoo
in a module that imports it, fooModule
will refer to the namespace that contains logFoo
. No magic :-)