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

Question

[Николай Шабалин]

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

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

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)

Как вы решаете проблему общения между экземплярами объектов?

Answer 1

[monochromer]

Пусть метод 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.

Comments

[Николай Шабалин]

На dom ноду мне кажется не самое лучшее решение. Так как их может быть несколько на странице и опять же, мне сначало ноды надо найти в popup, чтобы генерить события, а потом в gallery опять их искать и вешать слушателей.
Лучше, наверное, слушать на document, но чую тоже не очень решение, т.к. чем больше проект, либо больше экземеляров объектов, тем больше слушателей на бедном document.

И Ваша ссылка на паттерн mediator (по-русски посредник). Это я придираюсь к названию, что нисколько не снижает ценности Вашего совета. Спасибо буду читать =)

Answer 2

[Евгений]

Думаю тут лучше использовать прототип, и как раз у все объектов будет ссылка на 1 прототип.

Comments

[Николай Шабалин]

А есть какая-нибудь более подробная сслыка? Не совсем понимаю. У меня методы они и так расширяют прототип моего объекта.

[Евгений]

Для начала вынесите метод openPopup в прототип. Так в принципе и нужно делать, с точки зрения оптимизации.

Popup.prototype.openPopup = function(){
    //здесь опишите что должно происходить при вызове...можете сразу reInit запихать..
}

Gallery.prototype.__proto__ = Popup.prototype;

И теперь и у Галерей есть метод openPopup и у Popup тоже он есть. Как то так.

[Николай Шабалин]

class Popup {
  openPopup() { ... }
}

и

function Popup() {

}
Popup.prototype.openPopup = function() { ... }

идентичные вещи. Т.е. по факту он уже вынесен в прототип у меня. Ваш совет я до сих пор не понимаю