带有 ES6 类的 JavaScript 模式

debugcn 发表于 Dev

t411创建

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

这个想法是使用data-for-modal属性从dom中获取一个按钮，通过属性搜索获取模态本身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');

他

为什么它不起作用？

因为处理程序被与this来自 class 的上下文不同的上下文绑定Modal。

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

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

该函数将从类bind绑定该上下文并返回一个绑定到正确上下文的新函数。thisModal

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。