es6 依赖循环_javascript – 如何修复这个ES6模块的循环依赖关系？

最新推荐文章于 2024-07-29 14:23:42 发布

weixin_39593523

最新推荐文章于 2024-07-29 14:23:42 发布

阅读量276

点赞数

文章标签： es6 依赖循环

本文链接：https://blog.csdn.net/weixin_39593523/article/details/111509046

版权

答案是使用“init函数”.作为参考,请查看从这里开始的两条消息：

https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem#content-21

解决方案如下所示：

// --- Module A

import C,{initC} from './c';

initC();

console.log('Module A',C)

class A extends C {

// ...

}

export {A as default}

–

// --- Module B

import C,{initC} from './c';

initC();

console.log('Module B',C)

class B extends C {

// ...

}

export {B as default}

–

// --- Module C

import A from './a'

import B from './b'

var C;

export function initC(){

if (C) return;

C = class C {

constructor() {

console.log(A)

console.log(B)

}

initC();

export {C as default}; // IMPORTANT: not `export default C;` !!

–

// --- Entrypoint

import A from './A'

console.log('Entrypoint',new A) // runs the console.logs in the C

constructor.

重要的是要注意,出口是悬而未决的(可能是奇怪的,您可以在esdiscuss中询问更多),就像var一样,但是在模块之间发生升降.类不能被挂起,但功能可以(就像它们在正常的ES6范围之内,但是跨模块,因为导出是可以在被评估之前到达其他模块的活动绑定,几乎就好像有一个涵盖所有内容的范围只能通过使用导入来访问标识符的模块).

在此示例中,入口点从模块A导入,模块A从模块C导入,从模块B导入.这意味着模块B将在模块C之前进行求值,但是由于C模块导出的initC函数被挂起,模块B将被引用此提供的initC函数,因此模块B在调用模块C之前调用initC.

这导致模块C的var C变量在B类扩展C定义之前被定义.魔法！

重要的是要注意,模块C必须使用var C,而不是const或let,否则理论上会在真正的ES6环境中抛出一个时间死区错误.例如,如果模块C看起来像

// --- Module C

import A from './a'

import B from './b'

let C;

export function initC(){

if (C) return;

C = class C {

constructor() {

console.log(A)

console.log(B)

}

initC();

export {C as default}; // IMPORTANT: not `export default C;` !!

那么一旦模块B调用initC,将抛出一个错误,并且模块评估将失败.

var在模块C的范围内被提升,所以在调用initC时可用.这是一个很好的例子,您可能希望在ES6环境中使用var而不是let或const.

但是,您可以注意到汇总并不能正确处理这个https://github.com/rollup/rollup/issues/845,并且在某些环境中可以使用一个看起来像C = C的黑客,比如在上述Meteor问题链接中指出的.

最后一件值得注意的事情是导出默认值C和导出{C为默认值}之间的差异.第一个版本不将C变量从模块C导出为活动绑定,而是按值.因此,当使用export default C时,var C的值是未定义的,并且将被分配到隐藏在ES6模块范围内的新的变量var default,并且由于C被分配到默认值(如var default = C by value,则每当模块C的默认导出被另一个模块(例如模块B)访问时,另一个模块将到达模块C并访问总是将被定义的默认变量的值.因此,如果模块C使用导出默认值C,那么即使模块B调用initC(它改变模块C的内部C变量的值),模块B实际上也不会访问该内部C变量,它将访问默认变量,这仍然是未定义的.

但是,当模块C使用export {C作为默认值}时,ES6模块系统将使用C变量作为默认导出变量,而不是创建一个新的内部默认变量.这意味着C变量是一个活动绑定.任何时候,根据模块C的模块进行评估,它将在给定的时间给定模块C的内部C变量,而不是按值,但是几乎就像将该变量交给另一个模块一样.因此,当模块B调用initC时,模块C的内部C变量被修改,模块B能够使用它,因为它引用了相同的变量(即使本地标识符不同)！基本上,模块评估中的任何时候,当模块使用从另一个模块导入的标识符时,模块系统到达另一个模块,并及时得到该值.

我敢打赌,大多数人不会知道导出默认C和导出{C为默认值之间的区别,在许多情况下它们不需要,但是在使用“实时绑定” “init函数”,以解决循环依赖关系,其中活动绑定可能是有用的.不要深入研究太多的主题,但是如果你有一个单例,则可以使用活动绑定作为使模块范围成为单例对象的方式,并且通过访问单例中的方式实现活动绑定.

描述实时绑定正在发生的一种方法是写入与上述模块示例类似的javascript.以下是模块B和C可能以描述“实时绑定”的方式看起来的模式：

// --- Module B

initC()

console.log('Module B',C)

class B extends C {

// ...

}

// --- Module C

var C

function initC() {

if (C) return

C = class C {

constructor() {

console.log(A)

console.log(B)

}

initC()

这有效地显示了ES6模块版本中发生的情况：首先评估B,但是在模块之间悬挂了var C和函数initC,所以模块B能够调用initC,然后在var C和函数之前立即使用C initC在评估代码中遇到.

当然,当模块使用不同的标识符时,它变得更加复杂,例如,如果模块B从’./c’导入Blah,那么Blah仍然是一个活动绑定到模块C的C变量,但这不是很容易用前面的例子来描述使用正常的变量提升,实际上是Rollup isn’t always handling it properly.

假设我们有模块B如下,模块A和C是相同的：

// --- Module B

import Blah,Blah)

class B extends Blah {

// ...

}

export {B as default}

那么如果我们使用简单的JavaScript来描述模块B和C会发生什么,结果就是这样的：

// --- Module B

initC()

console.log('Module B',Blah)

class B extends Blah {

// ...

}

// --- Module C

var C

var Blah // needs to be added

function initC() {

if (C) return

C = class C {

constructor() {

console.log(A)

console.log(B)

}

Blah = C // needs to be added

}

initC()

另外要注意的是,模块C也有initC函数调用.这是为了防止模块C先被评估,然后不会初始化它.

最后要注意的是,在这些示例中,模块A和B依赖于C在模块评估时间,而不是在运行时.当模块A和B被评估时,需要定义C导出.但是,当模块C被评估时,它不依赖于定义的A和B导入.在所有模块被评估后,例如当入口点运行新的运行C构造函数的A()时,模块C将在运行时仅需要使用A和B.正是由于这个原因,模块C不需要initA或initB函数.

循环依赖中的多个模块可能需要彼此依赖,在这种情况下,需要一个更复杂的“init函数”解决方案.例如,假设模块C在定义C类之前的模块评估时间期间想要使用console.log(A)

// --- Module C

import A from './a'

import B from './b'

var C;

console.log(A)

export function initC(){

if (C) return;

C = class C {

constructor() {

console.log(A)

console.log(B)