ES6类的JavaScript模态

Question

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

我们的想法是利用来从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

为什么不起作用？

因为处理程序受不同上下文的约束，所以this不同于类Modal的上下文。

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

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

功能bind将绑定这方面this从类Modal ，并返回绑定到正确的上下文新功能。

 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>