javascript - 在JS同级类之间传递事件

对于我的许多JS类，我都调用了一个基本模式，该模式用白色背景覆盖了我的页面。最近，我尝试减少一些代码，并将模式放入其自己的类中。我遇到的问题是，当我从同级类调用模式类时，未注册模式变量。我已经和一些人交谈过，他们建议我研究多态性，但是从我的阅读来看，它似乎与父母/孩子类的关系有关（使用扩展）。我很好奇Vanilla JS是否有一种简单的方法可以将同级与同级进行同级通信？很抱歉，如果涉及到很多问题，但我一直在四处寻找，找不到我需要的东西。

class Modal {
  constructor(modal){
    this.modal = modal;
    this.closeButton = modal.querySelector('.modal-close-button');
  }

  activate() {
    this.modal.setAttribute('data-state', 'active');
    document.body.setAttribute('data-state', 'inactive');
  }

  deactivate() {
    this.modal.setAttribute('data-state', 'inactive');
    document.body.setAttribute('data-state', 'active');
  }
}

class Form {
  constructor(button, modal) {
    this.button = button;
    this.formId = button.getAttribute('data-form');
    this.modal = modal;
    this.setEvents();
  }

  setEvents() {
    this.button.addEventListener('click', this.modal.activate);
  }
}

最佳答案

最简单的解决方法是将this.activate绑定到this中的constructor

class Modal {
  constructor(modal){
    this.modal = modal;
    this.closeButton = modal.querySelector('.modal-close-button');
    // add these two lines
    this.activate = this.activate.bind(this);
    this.deactivate = this.deactivate.bind(this);
  }

  activate() {
    this.modal.setAttribute('data-state', 'active');
    document.body.setAttribute('data-state', 'inactive');
  }

  deactivate() {
    this.modal.setAttribute('data-state', 'inactive');
    document.body.setAttribute('data-state', 'active');
  }
}

或者，您可以更改Form类

class Form {
  constructor(button, modal) {
    this.button = button;
    this.formId = button.getAttribute('data-form');
    this.modal = modal;
    this.setEvents();
  }

  setEvents() {
    this.button.addEventListener('click', e => this.modal.activate(e));
  }
}

关于javascript - 在JS同级类之间传递事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46637127/