nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy

Как наладить взаимодействие объектов между собой?

Привет, я пытаюсь решать проблемы по мере поступления. И пока не понимаю, как мне наладить взаимодействие объектов между собой.

Допустим я создал модуль галереи и попапа.

gallery.js
export default class Gallery {
  // внешнее API
  init() {...}
  reInit() {...}
}


popup.js
export default class Popup{
  // внешнее API
  init() {...}
  openPopup() {...}
}


И начинаю использовать свои модули

app.js
import Gallery from 'gallery';
import Popup from 'popup';


Я создаю несколько экземпляров галерей и 1 попап и хочу, что бы при openPopup(); происходил reInit() у галерей.

let gallery1 = new Gallery();
let gallery2 = new Gallery();
let galleryn = new Gallery();

let popup = new Gallery();


И проблем сразу несколько.
1. Как мне подписаться на метод `openPopup()` всем галереям.
2. Если попапов несколько на странице, то получается `openPopup` должен быть каким-то глобальным событием для всех галерей, а галереи были слушателями (аналогия с DOM Events)

Как вы решаете проблему общения между экземплярами объектов?
  • Вопрос задан
  • 257 просмотров
Пригласить эксперта
Ответы на вопрос 2
monochromer
@monochromer
DIVeloper
Пусть метод openPopupгенерирует событие, например, popup:open:
var evt = new CustomEvent('popup:open', {
      bubbles: true,
      detail: 'здесь любые данные'
    });
    popupDOMElement.dispatchEvent(evt);


В конструкторе галерей (или в методе init) подписаться на это событие:
class Gallery {
  init() {
    popupDOMElement.addEventListener('popup:open', this.reInit.bind.this)
  }
}


Элемент с попапом popupDOMElement должен уже существовать.

Если нужна поддержка старых браузеров - можно реализовать события самому (паттерн "наблюдатель") или воспользоваться методами on и trigger из jQuery.
Ответ написан
EShein
@EShein
Shein
Думаю тут лучше использовать прототип, и как раз у все объектов будет ссылка на 1 прототип.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы