Javascript ES6类：如何将事件从一个类发送到另一个类

我的代码的结构类似于一个中心辐射模型，我的大多数类在一个主类（即中心）中实例化。特别是，我在主类中有一个zoom方法，它协调了大多数其他类中调用zoom方法的工作。在其中一个spoke类中，我们称之为Buttons，我创建了一些按钮，用于触发Main中的zoom方法，并添加了事件侦听器。我如何使用这些在按钮中创建的按钮在Main中调用zoom方法，而不将所有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);
  }
}

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;

Buttons.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);
  }
}

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;

---

如果您没有真正侦听事件，您只想调用一个方法，那么您应该将

Main

的实例传递给

按钮的构造函数

这就是所谓的依赖注入。
这仍然需要导入Main，同时给您带来了继承的缺点，没有任何好处。这并不意味着这种方法是错误的。除非重用代码，否则继承没有缺点。好吧，如果你们有更好的解决方案。你们的意思是，除非你们重用代码，否则并没有任何优势，对我来说，这似乎是一个X Y问题
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();
      })
  })
}