Question

对于我的很多JS课程，我调用一个基本模态，用白色背景覆盖我的页面。最近我试图减少我的一些代码，并将模态放入自己的类中。我遇到的问题是当我从兄弟类调用模态类时，模态变量没有被注册。我和一些人谈过，他们建议我研究多态性，但从我读过的看来，它似乎与父/子类关系（使用extend）有关。我很好奇，如果有一个简单的方法与香草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);
  }
}

Answer 1

最简单的解决方法是在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));
  }
}

在JS兄弟类之间传递事件

1 个答案: