Если вы хотите описать компонент, используемый в единственном экземпляре, то лучше использовать объект, а не класс. Обработчик событий может быть как в
Menu, так и внешний:
const Menu = {
el: document.getElementById('js-main-menu'),
btn: document.getElementById('js-main-menu__btn'),
init() {
this.toggle = this.toggle.bind(this);
this.close = this.close.bind(this);
this.open = this.open.bind(this);
this.btn.addEventListener('click', this.toggle);
},
toggle() {
this.el.style.display =
!this.el.style.display || this.el.style.display === 'block' ? 'none' : 'block';
},
open() {
this.el.style.display = 'block';
},
close() {
this.el.style.display = 'none';
}
}
export default Menu;
import Menu from './Menu';
const closeButton = document.getElementById('js-close-button');
const openButton = document.getElementById('js-open-button');
Menu.init();
closeButton.addEventListener('click', Menu.close);
openButton.addEventListener('click', Menu.open);
Демо:
https://jsfiddle.net/ey53xuyp/
В случае с классом вешайте хандлеры в
constructor:
class Menu {
constructor({ el, btn }) {
this.el = document.getElementById(el);
this.el = document.getElementById(btn);
this.toggle = this.toggle.bind(this);
this.close = this.close.bind(this);
this.open = this.open.bind(this);
this.btn.addEventListener('click', this.toggle);
}
...
}
export default Menu;
import Menu from './Menu';
const closeButton = document.getElementById('js-close-button');
const openButton = document.getElementById('js-open-button');
const menu = new Menu({
el: 'js-main-menu',
btn: 'js-main-menu__btn',
});
closeButton.addEventListener('click', menu.close);
openButton.addEventListener('click', menu.open);
Если же вы хотите использовать компонентную архитектуру, с наследованием от базового класса компонента, вам лучше использовать
React или
Vue. Иначе рискуете написать трудно поддерживаемых, плохо масштабируемых велосипедов.
