2
\$\begingroup\$

I'm trying to get into object oriented javascript programming. I have written a class for collapsible elements as a test. These elements all have a certain class and no matter how many elements there are on the page, they should all be collapsible.

It works so far, but I don't think it's very elegant yet. For example, I wonder if the function "checkforCollapsibles" doesn't actually belong in the class. But, can a class create instances of itself?

But, that's probably not the only thing. I would be very happy if you have any suggestions on how to make this even better, cleaner and more elegant.

I know you don't need a class for collapsing elements.

"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);

EXTENSION

I used this article for event handling. However, I don't quite understand it yet. In the example, only pass this as the callback. I assume javascript interprets this as the eventHandle function of the respective instance. But, what if I have different elements that should trigger different functions? In my example, I could only ask which event was triggered and not which element. Or, should I then write switches and get it from the respective event object? But, that no longer sounds clean and tidy to me.

https://dev.to/rikschennink/the-fantastically-magical-handleevent-function-1bp4

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

This seems over-engineered. If really all you need is this.content.classList.toggle("bb-collapsed"); then I would simply go for

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"));
  }
}

And from there, there really isn't much of a point in having a class. You could do that straight in your checkForCollapsibles.

Something like this

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"));
  });
}

Note that I drop the console.log thing, ideally you dont have log statements in your production code.

\$\endgroup\$
5
  • \$\begingroup\$ yes that's clear. i can write this much easier. but then i wouldn't be practising how to use oop javascript ;-) \$\endgroup\$ Commented Mar 6, 2021 at 16:38
  • 1
    \$\begingroup\$ Well in that case, your code is quite good actually, I would just like to see the class name start with an uppercase. \$\endgroup\$ Commented Mar 6, 2021 at 16:40
  • \$\begingroup\$ Thank you :-) I haven't quite understood this event handler function yet. As I wrote this, it only works with an action. But what if I have different elements that should trigger different functions? I got this from this article: dev.to/rikschennink/… \$\endgroup\$ Commented Mar 6, 2021 at 16:44
  • \$\begingroup\$ You should add that link in your question, it would make it a beter question. \$\endgroup\$ Commented Mar 6, 2021 at 16:53
  • \$\begingroup\$ i will do that :-) \$\endgroup\$ Commented Mar 6, 2021 at 16:54

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.