Где должны существовать объекты класса в рамках JavaScript JavaScript?

Question

Я пытаюсь реорганизовать некоторый код для проекта класса, который мне нужно закончить, но я не понимаю, где именно должен находиться мой объект класса во фреймворке.Сначала я думал, что он должен существовать в модели, но я не могу найти изящный способ доступа к данным изображения, который, как я считаю, должен существовать и в модели.Я не уверен, как представить это в объекте класса.Я могу видеть, как это работает, если бы я мог вложить объект класса в литерал объекта, но я не уверен, что это действительно так.

Кажется, имеет смысл сделать объект класса существующим в качестве элемента управления, но я чувствую, что данные, содержащиеся в экземплярах, должны принадлежать модели.Построить это, используя объектные литералы, гораздо проще, но я бы хотел сделать это с помощью экземпляров классов.Куда именно должна идти эта вещь?

Мой код, который я пытаюсь реорганизовать ради контекста

//List of element selectors
const imgArea = document.querySelector('.img-area');
const listBody = document.querySelector('.kitten-list');

class Kitten {
  constructor(name) {
    this.catName = name;
  }

  //Method creates element and sets a supplied attribute and vaule for attribute
  setupElement(eleString, eleAttr, attrValue) {
    const divEle = document.createElement(eleString);
    divEle.setAttribute(eleAttr, attrValue);
    return divEle;
  }

  //Method accepts img element and sets src attribute with supplied link
  addImage(ele, string, attr) {
    return ele.setAttribute(attr, string);
  }

  //Method sets up side-bar div with list of anchor elements
  setupList(parentDiv) {
    let listTag = this.setupElement('li', 'class', 'list-item');
    let anchorTag = this.setupElement('a', 'class', 'link-item');
    let clickerDisplay = this.clicker;

    anchorTag.innerText = this.catName;
    anchorTag.setAttribute('href', '#');
    listTag.appendChild(anchorTag);
    parentDiv.appendChild(listTag);

    anchorTag.addEventListener('click', function() {
      if (clickerDisplay.style.display === 'none') {
        clickerDisplay.style.display = '';
      } else {
        clickerDisplay.style.display = 'none';
      }
    }, false);
  }

  //Method sets up divs, appends, styles, and adds event listener
  setupClicker(parentDiv) {
    let divTag = this.setupElement('div', 'class', 'img-container');
    let nameTag = this.setupElement('h2', 'class', 'kitten-name');
    let imgTag = this.setupElement('img', 'class', 'kitten-image');
    let pTag = this.setupElement('p', 'class', 'counter-text');
    let counters = 0;

    this.addImage(imgTag, 'images/unnamed.jpg', 'src');
    pTag.innerText = `Number of times clicked: ${counters}`;
    divTag.style.display = 'none';
    nameTag.innerText = this.catName;
    divTag.classList.toggle(this.catName);
    divTag.appendChild(nameTag);
    divTag.appendChild(imgTag);
    divTag.appendChild(pTag);
    parentDiv.appendChild(divTag);
    this.clicker = document.querySelector(`.${this.catName}`);

    imgTag.addEventListener('click', function() {
      counters++;
      pTag.innerText = `Number of times clicked: ${counters}`;
    }, false);
  }
}

const allCats = [
  new Kitten('viola'),
  new Kitten('violin'),
  new Kitten('cello'),
  new Kitten('bass'),
];

allCats.forEach(function(target) {
  target.setupClicker(imgArea);
  target.setupList(listBody);
});