component через class

by Aleksandr Tomashov

HTML

<div id="menu1"></div> 
 <div id="menu2"></div>

CSS

.menu--closed .menu__list {
  display: none;
}

.menu__title {
  cursor: pointer;
}

.js-hidden {
  display: none;
}

JavaScript

'use strict'

// конструктор Component
class Component {
  constructor (element) {
    this._element = element;
  }
    
  hide() {
    this._element.classList.add( 'js-hidden');
  }

  show() {
  this._element.classList.remove( 'js-hidden');
  }
}

// конструктор Menu
class Menu extends Component {
	// вызов статического метода 
	static getCount() {
  		return this._count;
		}
  constructor( element, title, options ) {
  
    // вызов констркуктора родителя
    super(element);

    element.classList.add('menu');
    //this._element = element;
    Menu._count++;
  
    let totalOption = '';
    
    for ( let option of options) {
      totalOption += `<li class="munu__item">${ option }</li>`
    }
    
    element.innerHTML = `
    <span class="menu__title">${ title }</span>
    <ul class="menu__list">
    ${ totalOption }    
    `;
    
    function displayClosed() {
      element.classList.toggle('menu--closed');
    }

    element.querySelector('.menu__title').addEventListener('click', displayClosed);
  }
   
  // метод для конструктора Menu
  close() {
    this._element.classList.add('menu--closed');
  }

  // метод родителя в нутри своего 
  hide() {
    super.hide(); //Component.prototype.hide.call
  }
}


// счетчик консткуктора Menu
Menu._count = 0;

// объект меню1
let menu1 = new Menu(
  document.querySelector('#menu1'), 
  'Menu 1',
  [1, 2, 3] 
);

// объект меню2
let menu2 = new Menu(
    document.querySelector('#menu2'), 
    'Menu 2',
    [4, 5, 6] 
);
  
// вызов метода через прототипное наследование
menu2.close();

// количество созданных меню
console.log(Menu.getCount());

// вызов родительского метода на прямую
//menu.hide();