瞭解ES6中的循環依賴關係

Question

我正在嘗試創建一種API。出於這個原因，我嘗試導入導入調用來自的文件的主文件（該文件公開了API），其中包括導出文件的情況！

令人困惑？大！

項目結構：

/ 
/src 
/src/js 
/src/js/modules 
/src/js/modules/moduleA/index|actions|components|selectors 
/src/js/modules/moduleB/index|actions|components|selectors 
/src/js/modules/moduleC/index|actions|components|selectors 

見下面，我公開一個循環依賴不起作用的例子！

所以，這裏是一個模塊化如何公開API（模塊本身以外的出口時所能完成的工作）：

// src/modules/foobar/index.js 
import * as actions from './actions' 
import * as components from './components' 
import * as containers from './containers' 
import * as constants from './constants' 
import reducer from './reducer' 
import * as selectors from './selectors' 
export default { actions, components, containers, constants, reducer, selectors } 

這裏的進口：

// src/modules/foobar/containers/index.js 
import API from '../index.js' 
// this is undefined 
console.log('API', API) 

的目標是什麼？

ModuleAPI.actions.foobar() 
ModuleAPI.containers.foobar() 

雖然我可以看到，它可能是一個壞的做法（但說實話，似乎常理，一個文件無法導入本身）我想明白爲什麼這是不可能的！

• 只是找到了一個很好看的這個（https://medium.com/content-uneditable/circular-dependencies-in-javascript-a-k-a-coding-is-not-a-rock-paper-scissors-game-9c2a9eccd4bc）
• 可能是值得研究https://www.npmjs.com/package/circular-dependency-plugin

Answer 1

這是完全可以導入這樣的頂層模塊。在容器模塊的初始化期間，不可能同步使用它。會發生什麼事那麼只要您將console.log(API)的功能，過一會兒給它基本上是

load foobar/index.js 
initialise foobar/index.js: 
    load foobar/containers/index.js 
    initialise foobar/containers/index.js: 
     load foobar/index.js 
     it's already getting initialised so don't wait 
     set up scope 
     execute module code: `API` is still undefined in the log statement 
    finish initialisation of foobar/containers/index.js 
    set up scope 
    execute module code: `API` is getting defined now 
finish initialisation of foobar/index.js 

，它會工作。請注意，對於循環依賴關係，您需要格外小心，即始終首先加載頂級模塊以獲得一致的評估順序。