Где установить обработчик событий?

Question

[laguna1132]

Добрый день. Хочу создать простой ES6 объект для открытия/закрытия меню. Создал метод open и close. А куда деть обработчик событий и почему?

Answer 1

[Антон Спирин]

Если вы хотите описать компонент, используемый в единственном экземпляре, то лучше использовать объект, а не класс. Обработчик событий может быть как в 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. Иначе рискуете написать трудно поддерживаемых, плохо масштабируемых велосипедов.

Comments

[laguna1132]

Спасибо! Но хочется понять, как это устроено именно в классах. Исключительно для обучения. А по поводу React и Vue. Это ведь библиотеки для SPA. Зачем их использовать в коммерческих сайтах?

[laguna1132]

И в том примере, что вы показали. Где там использовать обработчик? Его ведь тоже нет

[Антон Спирин]

laguna1132, обновил ответ.

[Антон Спирин]

laguna1132, по поводу SPA на коммерческих сайтах. Смотря какие сайты. Вот например крутой генератор сайтов на реакт https://www.gatsbyjs.org
Я просто не знаю, что вы задумали. Но если вешать обработчик в классе, то вызывайте в конструкторе init(), к котором и вешайте обработчики.

Ну а насчет обучения, то тут конечно же используйте и пробуйте все возможности языка, но не забывайте смотреть как принято организовывать и использовать, те или иные вещи.

[laguna1132]

Антон Спирин, Огромное спасибо за ответ! Очень помогли

Answer 2

[grinat]

Кинь в конструктор и обработчик будет добавлен при создании класса.