如何使用 class 转换此代码？

Question

我需要你的帮助来使用 class 和构造函数转换此代码。我没有掌握这一点，这就是为什么我向大家寻求帮助。我已经试过了，但有一些东西不能用 class 来解决，比如：

mClose.addEventListener('click', modalClose);

和

mOpen.addEventListener('click', 模态显示);

如果你能帮助我并告诉我一些使用构造函数编写简单代码的技巧，我将不胜感激。

var m = document.getElementById('modal_window'),
p = document.getElementById('page');

function swap () {
  p.parentNode.insertBefore(m, p);}

swap();

(function() {
  var mOverlay = getId('modal_window'),
  mOpen = getId('modal_open'),
  mClose = getId('modal_close'),
  modal = getId('modal_holder'),
  modalOpen = false,
  lastFocus,
  i;

function getId ( id ) {
 return document.getElementById(id);
}

function modalShow () {
  lastFocus = document.activeElement;
  enter code here
  mOverlay.setAttribute('aria-hidden', 'false');
  modalOpen = true;
  modal.setAttribute('tabindex', '0');
  modal.focus();
}

function modalClose ( event ) {
  if (modalOpen && ( !event.keyCode || event.keyCode === 27 ) ) {
   mOverlay.setAttribute('aria-hidden', 'true');
   modal.setAttribute('tabindex', '-1');
   modalOpen = false;
   lastFocus.focus();
 }
}

function focusRestrict ( event ) {
  if ( modalOpen && !modal.contains( event.target ) ) {
   event.stopPropagation();
   modal.focus();
  }
}

mOverlay.addEventListener('click', function( e ) {
 if (e.target == modal.parentNode) {
   modalClose( e );
 }
}, false);

mOpen.addEventListener('click', modalShow);

mClose.addEventListener('click', modalClose);

document.addEventListener('keydown', modalClose);

for (i = 0; i < allNodes.length; i++) {
 allNodes.item(i).addEventListener('focus', focusRestrict);
}

})();

如果你也需要DOM，我会post。

Answer 1

你可以这样做

class ModalController {

    constructor() {
        this.mOverlay = this.getId('modal_window');
        this.mOpen = this.getId('modal_open');
        this.mClose = this.getId('modal_close');
        this.modal = this.getId('modal_holder');
        this.modalOpen = false;
        this.lastFocus = null;
        this.m = this.getId('modal_window');
        this.p = this.getId('page')

    }

    swap() {
        this.p.parentNode.insertBefore(this.m, this.p)
    }

    getId(id) {
        return document.getElementById(id);
    }

    modalShow() {
        this.lastFocus = document.activeElement;
        //enter code here
        this.mOverlay.setAttribute('aria-hidden', 'false');
        this.modalOpen = true;
        this.modal.setAttribute('tabindex', '0');
        this.modal.focus();
    }

    modalClose(event) {
        if (this.modalOpen && (!event.keyCode || event.keyCode === 27)) {
            this.mOverlay.setAttribute('aria-hidden', 'true');
            this.modal.setAttribute('tabindex', '-1');
            this.modalOpen = false;
            lastFocus.focus();
        }
    }

    focusRestrict(event) {
        if (this.modalOpen && !this.modal.contains(event.target)) {
            event.stopPropagation();
            this.modal.focus();
        }
    }

    attachEventHandler(document, allNodes) {
        this.mOverlay.addEventListener('click', function (e) {
            if (e.target == this.modal.parentNode) {
                this.modalClose(e);
            }
        }, false);

        this.mOpen.addEventListener('click', this.modalShow);

        this.mClose.addEventListener('click', this.modalClose);

        document.addEventListener('keydown', this.modalClose);

        for (i = 0; i < allNodes.length; i++) {
            allNodes.item(i).addEventListener('focus', this.focusRestrict);
        }
    }


}

const modalIns = new ModalController()
modalIns.swap()
//pass doucments and allnodes
modalIns.attachEventHandler(document, allNodes)

如何使用 class 转换此代码？

How can I transform this code using a class?

javascript

constructor

class

popup