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

Question

我的代码的结构就像一个轮毂和轮辐模型，我的大多数类都在作为轮毂的Main类中实例化。 特别是，我在Main类中有一个zoom方法，可以协调大多数其他类中的调用zoom方法。 在其中一个分支类中，我们将其称为“按钮”，我创建了一些按钮，旨在触发Main中的zoom方法，并添加了事件侦听器。 在不将所有Main导入到Button中的情况下，如何使用在Button中创建的这些按钮来调用Main中的zoom方法？

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

鉴于您并不是真正在监听事件，所以只想调用一个方法，就应该将Main的实例传递给Button的构造函数。

这称为依赖注入。

Answer 2

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();
      })
  })
}