Классы Javascript ES6: как отправить событие из одного класса в другой

Question

Структура моего кода похожа на модель хаба и луча, и большинство моих классов создаются в главном классе, который является хабом. В частности, у меня есть метод масштабирования в классе Main, который координирует вызов методов масштабирования в большинстве других классов. В одном из лучевых классов, назовем его «Кнопки», я создаю несколько кнопок, предназначенных для запуска метода масштабирования в Main, с добавлением прослушивателей событий. Как я могу использовать эти кнопки, созданные в кнопках, для вызова метода масштабирования в главной, не импортируя все основные в кнопки?

Main.js выглядит примерно так:

import Header from './Header.js';
import ImageStrip from './ImageStrip.js';
import AreaChart from './AreaChart.js';
import Buttons from './Buttons.js';

class Main {
  constructor() {
    this.header = new Header();
    this.imageStrip = new ImageStrip();
    this.areaChart = new AreaChart();
    this.buttons = new Buttons();
  }

  zoom(scale) {
    this.imageStrip.zoom(scale);
    this.areaChart.zoom(scale);
  }
}

Buttons.js выглядит примерно так:

class Buttons {
  constructor() {
    const els = document.querySelectorAll('.buttons');
    this.makeButtons(els);
    }

  makeButtons(buttons) {
    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        ? call the zoom method in Main ?
      })
  })
}

export default Buttons;

Answer 1

Change Buttons class like this

class Buttons extends Main {
  constructor() {
    super();
    const els = document.querySelectorAll('.buttons');
    this.makeButtons(els);
    }

  makeButtons(buttons) {
    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        super.zoom();
      })
  })
}

Answer 2

Учитывая, что вы на самом деле не слушаете событие, вы просто хотите вызвать метод, вам нужно просто передать экземпляр Main в конструктор Button.

Это называется внедрением зависимости.