Класс импорта ES6 вызывает циклическую зависимость

#javascript #ecmascript-6 #circular-dependency

#javascript #ecmascript-6 #циклическая зависимость

Вопрос:

В настоящее время я борюсь с условием циклической зависимости. Допустим, у меня есть два класса в двух разных JS файлах, которые нуждаются друг в друге.

First ( Popup.js ):

 import App from "./App";

export default class Popup {
  onAppend() {
    App.instance.putLayer(this._dom, App.LAYERS.POPUP); // This needs to call a static variable from App class
  }
}
  

Второй ( App.js ):

 import Popup from "./Popup";

export default class App {
  someMethod() {
    ...
    Popup.close(); // This needs to call a static method from Popup class
  }
}
  

Но ESLint всегда показывает мне dependency cycle detected предупреждение. Как это решить?

Комментарии:

1. Это предупреждение. Код работает нормально.

2. Есть ли какие-либо рекомендации, чтобы избежать этого?

3. Просто чтобы уточнить комментарий Берги. Иногда это работает нормально, иногда нет. Я бы не стал воспринимать это как должное. Я сам столкнулся с этой проблемой при работе с React, и иногда задействованные компоненты выдавали ошибки из-за порядка инициализации. Мне тоже интересно прочитать о решении.

4. @JustinusHermawan Просто поместите их в один файл, или не используйте статические методы, а помещайте их в разные объекты, или используйте внедрение зависимостей. Существует много способов

5. @Bergi Я думаю, что внедрение App экземпляра singleton в конструктор Popup и другие компоненты — хорошая идея.