JSFiddle - React, Tailwind, and code Playground

by eget teteete

HTML

<div class="menu1">

</div>

JavaScript

var menu1 = new Menu('my', 'my', [
  new MenuItem('/', 'Главная страница'),
  new MenuItem('/about', 'О нас'),
  new MenuItem('/service', 'Услуги'),
  new MenuItem('/contacts', 'Контакты'),
  new MenuItem('/blog', 'Блог'),
]);

var menuApp = document.getElementById('menu1');
menuApp.innerHTML = menu1.render();

function Menu(myId, myClass, myItems) {
  Container.call(this);

  this.id = myId;
  this.class = myClass;
  this.items = myItems;
}

Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.render = function() {
  var result = '<ul class="' + this.class + '">';
  for (var i = 0; i < this.items.length; i++) {
    //Посмотреть, а Submenu ли это
    if (this.items[i] instanceof Submenu) {
      console.log('Экземпляр Submenu');
      //Что-то сделать
    }
    if (this.items[i] instanceof MenuItem) {
      console.log('Экземпляр MenuItem');
      result += this.items[i].render(); //render принадлежит пункту меню
    }

  }
  result += '</ul>';

  this.htmlCode = result; //Сохраняем HTML-код меню
  return result;
};

function Container() {
  this.htmlCode = '';

  this.render = function() {
    return this.htmlCode;
  };
}

Container.prototype.render = function() {
  return this.htmlCode;
};

Container.prototype.remove = function() {
  //Метод удаляет меню
};

function MenuItem(href, title) {
  this.href = href;
  this.title = title;
}

MenuItem.prototype.render = function() {
  return '<li><a href="' + this.href + '">' + this.title + '</a></li>';
};

function Submenu(href, title, ) {
  this.href = href;
  this.title = title;
}

MenuItem.prototype.derivation = function() {
  return '<li><a href="' + this.href + '">' + this.title + '</a></li>';
};