带有 ES6 类的 JavaScript 模式

Question

我正在尝试使用 es6 类创建一个模态。密码笔：https://codepen.io/t411tocreate/pen/KomLzo

这个想法是使用 dom 属性从 dom 获取一个按钮data-for-modal按属性获取模态本身data-modal搜索。然后，showModal和hideModal方法应绑定到作为类实例创建的元素Modal。为什么它不起作用？

我的JS看起来像这样：

class Modal {
  constructor(modalName) {
    this.showBtn = document.querySelector(`[data-for-modal='${modalName}']`)
    this.modalWrapper = document.querySelector(`[data-modal='${modalName}']`);
    this.closeBtn = document.querySelector(`[data-modal='${modalName}']`).children[0].children[0].children[1];
  }
  showModal () {
    this.modalWrapper.classList.add('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }
  hideModal () {
    this.modalWrapper.classList.remove('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }
  this.showBtn.addEventListener('click', this.showModal);
  this.closeBtn.addEventListener('click', this.hideModal);
}
const m1 = new Modal('modal-1');
const m2 = new Modal('modal-2');

Answer 1

为什么它不起作用？

因为处理程序受与类 Modal 中的上下文不同的上下文this绑定。

您需要this绑定正确的上下文：

this.showBtn.addEventListener('click', this.showModal.bind(this));
this.closeBtn.addEventListener('click', this.hideModal.bind(this));

函数bind将从类Modal绑定该上下文this，并返回绑定到正确上下文的新函数。

class Modal {
  constructor(modalName) {
    this.showBtn = document.querySelector(`[data-for-modal='${modalName}']`)
    this.modalWrapper = document.querySelector(`[data-modal='${modalName}']`);
    this.closeBtn = document.querySelector(`[data-modal='${modalName}']`).children[0].children[0].children[1];
    
    this.showBtn.addEventListener('click', this.showModal.bind(this));
    this.closeBtn.addEventListener('click', this.hideModal.bind(this));
  }
  showModal() {
    console.log(this.modalWrapper);
    this.modalWrapper.classList.add('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }
  hideModal() {
    console.log(this.modalWrapper);
    this.modalWrapper.classList.remove('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }
  
}
const m1 = new Modal('modal-1');
const m2 = new Modal('modal-2');

* {
  margin: 0;
  padding: 0;
  outline: 0;
}
body {
  font-family: sans-serif;
}
.buttons-panel {
  background: #ccc;
  margin-top: 50vh;
  text-align: center;
  padding: 20px 0;
}
.ui-show-modal-btn {
  background: #3b5998;
  font-size: 1.5em;
  border: 0;
  outline: 0;
  margin: 0 10px;
  padding: 10px 15px;
  color: #fff;
  transition: opacity .3s ease;
}
.ui-show-modal-btn:hover {
  cursor: pointer;
  opacity: .9;
}
.ui-modal-wrappper {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.7);
}
.ui-modal-wrappper.ui-modal-wrappper--active-modal {
  display: flex;
}
.ui-modal-body {
  width: 80%;
  background: #ececec;
  font-family: Arial, sans-serif;
  box-shadow: 5px 5px 5px #333;
}
.ui-modal-body__header,
.ui-modal-body__footer {
  color: #ececec;
  background: #3b5998;
  padding: 10px 15px;
}
.ui-modal-body__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5em;
}
.ui-modal-header__title {}
.ui-modal-header__close-btn {
  padding: 5px 0px 5px 15px;
  transition: .2s ease all;
}
.ui-modal-header__close-btn:hover {
  cursor: pointer;
  opacity: .8;
}
.ui-modal-body__footer {
  font-size: 1.3em;
  text-align: center;
}
.ui-modal-body__content {
  padding: 20px 15px;
  color: #222;
  text-align: justify;
}
.ui-modal-body__content p {
  padding: 0 0 10px 0;
}
.ui-modal-body__content p:last-child {
  padding: 0px 0 0px 0;
}

<div class="buttons-panel">
  <button class="ui-btn ui-show-modal-btn" type="button" name="button" data-for-modal="modal-1">Show modal 1</button>
  <button class="ui-btn ui-show-modal-btn" type="button" name="button" data-for-modal="modal-2">Show modal 2</button>
</div>
<div class="ui-modal-wrappper" data-modal="modal-1">
  <div class="ui-modal-body">
    <div class="ui-modal-body__header">
      <span class="ui-modal-header__title">Modal 1 header</span>
      <span class="ui-modal-header__close-btn">x</span>
    </div>
    <div class="ui-modal-body__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="ui-modal-body__footer">Modal footer</div>
  </div>
</div>
<div class="ui-modal-wrappper" data-modal="modal-2">
  <div class="ui-modal-body">
    <div class="ui-modal-body__header">
      <span class="ui-modal-header__title">Modal 2 header</span>
      <span class="ui-modal-header__close-btn">x</span>
    </div>
    <div class="ui-modal-body__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="ui-modal-body__footer">Modal footer</div>
  </div>
</div>