Изучение ООП Javascript с помощью класса сворачивающихся элементов

Я пытаюсь заняться объектно-ориентированным программированием на javascript. Я написал класс для разборных элементов в качестве теста. Все эти элементы имеют определенный класс, и независимо от того, сколько элементов на странице, все они должны быть сворачиваемыми.

Пока это работает, но я не думаю, что это очень элегантно. Например, мне интересно, действительно ли функция checkforCollapsibles не принадлежит классу? Но может ли класс создавать экземпляры самого себя?

Но это, наверное, не единственное. Я был бы очень рад, если у вас есть предложения, как сделать это еще лучше, чище и элегантнее 😉

— РЕДАКТИРОВАТЬ: я знаю, что вам не нужен класс для сворачивания элементов 🙂

"use strict";

class bb_Collapsible {
  constructor(link, content) {
    this.link = link;
    this.content = content;
    this.content.classList.toggle("bb-collapsed");
    this.link.addEventListener("click", this);
  }
  handleEvent(event) {
    if (event.type === "click") {
      this.switchStatus();
    }
  }
  switchStatus() {
    this.content.classList.toggle("bb-collapsed");
  }
}

function checkForCollapsibles() {
  const collapsibleLinks = document.querySelectorAll(".bb-collapsible");
  const collapsibleContents = document.querySelectorAll(".bb-collapsible-content");

  if (collapsibleLinks.length > 0) {
    collapsibleLinks.forEach((element, index) => {
      new bb_Collapsible(collapsibleLinks[index], collapsibleContents[index]);
    });
  } else {
    console.log("No collapsible Elements");
  }
}
document.addEventListener("DOMContentLoaded", checkForCollapsibles);

РАСШИРЕНИЕ Я использовал эту статью для обработки событий. Однако я еще этого не совсем понимаю. В этом примере передайте это только как обратный вызов. Я предполагаю, что javascript интерпретирует это как функцию eventHandle соответствующего экземпляра. Но что, если у меня разные элементы, которые должны запускать разные функции? В моем примере я мог только спросить, какое событие было инициировано, а не какой элемент? Или я должен написать переключатели и получить их из соответствующего объекта события? но для меня это уже не кажется чистым и аккуратным.
https://dev.to/rikschennink/the-fantastically-magical-handleevent-function-1bp4

Это кажется чрезмерным. Если действительно все, что вам нужно, это this.content.classList.toggle("bb-collapsed"); тогда я бы просто пошел на

class Collapsible {
  constructor(link, content) {
    this.link = link;
    this.content = content;
    this.content.classList.toggle("bb-collapsed");
    this.link.addEventListener("click", e => content.classList.toggle("bb-collapsed"));
  }
}

И оттуда действительно нет особого смысла в занятиях. Вы могли бы сделать это прямо в своем checkForCollapsibles.

Что-то вроде этого

function wireCollapsibles() {
  const links = document.querySelectorAll(".bb-collapsible");
  const contents = document.querySelectorAll(".bb-collapsible-content");

  links.forEach((link, index) => {
    new bb_Collapsible(collapsibleLinks[index], collapsibleContents[index]);
    link.addEventListener(e => contents[i].classList.toggle("bb-collapsed"));
  });
}

Обратите внимание, что я бросаю console.log вещь, в идеале у вас нет операторов журнала в вашем производственном коде.