JavaScript模块中的循环依赖关系（ES6）

我最近一直在阅读和测试ES6模块，并使用2ality和MDN的组合作为我的理解来源。JavaScript模块中的循环依赖关系（ES6）

在我计划进行现代化的大型遗留JS Web应用程序中，我有循环依赖关系，并且我没有找到解决方案来解决问题。 我知道应该尽可能地避免循环依赖，我的下一步移植之后将尽可能地清理。

我的测试情况如下：

的test.html：

<script type="module"> 
    import B from './B.js'; 

    console.log(B.moo()); 
</script>

B.js：

// B.js 
import A from './A.js'; 

export default class B { 
    static moo() { 
     return A.boo(); 
    } 
}

A.js：

// A.js 
import B from './B.js'; 

export default class A extends B { 
    static boo() { 
     return "Boo"; 
    } 
}

从以上，我基本上是哈VE仅有2下列原因有关：

然而，上面的代码导致错误： Uncaught ReferenceError: B is not defined at A.js:3

我得到的ES6模块静态解析，错误是有道理的。但他们也（假设？）支持循环依赖。

在经历了许多混乱之后，我找到了一个可行的解决方案。但我想知道是否有更好的方法？

这是我工作的解决方案迄今：

的test.html：

<script type="module"> 
    import A from './A.js'; 
    import B from './B.js'; 

    console.log(B.moo()); 
</script>

B.js：

import A from './A.js'; 

export const B = class B { 
    static moo() { 
     return A.boo(); 
    } 
} 

export {B as default};

A.js：

import B from './B.js'; 

export const A = class A extends B { 
    static boo() { 
     return "Boo"; 
    } 
} 

export {A as default};

2017-09-15 Jarym

难道你只是移动*导入A从'./A.js';*到b.js的最后一行？ –

@Jonasw肯定比我想出来的要干净 - 但我很惊讶它的工作原理，我想我已经读过导入模块的顺序并不重要。我仍然需要在test.html中同时导入A和B，这是我希望避免的。 – Jarym

“我想知道是否有更好的方法？” - 当然，修理你的设计。基类不应该调用它们的后代。请告诉我们您的具体问题。 – georg

后一些更多的搜索我遇到了这个arti cle：https://medium.com/@rohanjamin/using-scope-to-resolve-circular-dependency-dynamic-loading-issues-in-es6-2ef0244540fa - 不确定为什么我没有在我之前的Google搜索中遇到过它。

它非常类似于我正在使用的代码中的相同代码安排，它似乎运行良好。我可以预见，未来会出现一些树震的问题，但是我已经让Babel输出了一个循环依赖列表，我们可以在接下来的几个月内手动重构这些列表。

2017-09-16 12:25:57 Jarym

回答