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

回答