ukrycie wszystkich divów nie przekazując parametru do metody w klasie ES6 [javascript]

Question

Witam

Mam klasę:

{

const divs = document.querySelectorAll('.div');

class Divs {
  constructor(index) {
    this.index = index;
    this.init();
  }

  hideAllDivs(i) {
    divs[i].classList.add('hide')
  }

  removeClassHideFromElement() {
    divs[this.index].classList.remove('hide')
  }

  init() {
    for(let i = 0; i < divs.length; i++) {
      this.hideAllDivs(i);
    }
    this.removeClassHideFromElement();
  }  

}

const example = new Divs(0);

}

w której chcę ukryć wszystkie divy, ale pierwszy niech będzie widoczny. Na innym forum pewien użytkownik odpisał mi:

hideAllImages bierze parametr, po co skoro wykonuje jedną czynność - ukrywa wszystkie divy?

 ale niestety nie rozwinął swojej myśli, a ja teraz się zastanawiam czy miał rację czy to ja robię coś źle. Nie rozumiem kompletnie o co mu chodziło, przecież jak chcę ukryć wszystkie moje divy to muszę je wrzucić w pętlę i przekazać funkcji hideAllDivs zmienną i bez tego przecież mi to nie ruszy. Myślałem nad tym jak nie przekazać parametru by to zrobić tak jak napisał ten użytkownik, ale jedyne co przychodzi mi do głowy to po prostu usunąć tą funkcję hideAllDivs a jej kod wstawić do pętli, czyli tak by to wyglądało:

{

const divs = document.querySelectorAll('.div');

class Divs {
  constructor(index) {
    this.index = index;
    this.init();
  }

  removeClassHideFromElement() {
    divs[this.index].classList.remove('hide')
  }

  init() {
    for(let i = 0; i < divs.length; i++) {
      divs[i].classList.add('hide');
    }
    this.removeClassHideFromElement();
  }  

}

const example = new Divs(0);

}

czy jest na to jakieś inne rozwiązanie, czy właśnie tak to powinienem zrobić?

całość do wglądu tutaj: https://jsfiddle.net/9rqmfnj7/

Comments

Ten kod ma coś wspólnego z klasami ? ;)

---

no ma, przynajmniej tak mi się wydaje, a dlaczego według Ciebie nie ma?

---

@Jedras a czemu ten kod miałby mieć coś wspólnego z klasami?

---

która rzecz nie ma nic wspólnego z klasami? ta zmienna?

const divs = document.querySelectorAll('.div');

Answer 1

Po pierwsze - metoda `hideAllDivs` nie robi tego na co wskazuje jej nazwa, ukrywa pojedynczy div, zgodnie z nazwą powinna wyglądać tak:

 

hideAllDivs() {
  for(let i = 0; i < divs.length; i++) {
    divs[i].classList.add('hide')
  }
}

 

Po drugie, jeśli chciałbyś by ukrywała pojedynczy element to trzeba zmienić jej nazwę. Dodatkowo nie powinieneś przekazywać tam indeksu tylko cały div, inaczej jest nieuniwersalna:

 

hideDiv(div) {
  div.classList.add('hide')
}

 

Po trzecie - obie wersje powinny być metodami prywatnymi skoro nie są wywoływane bezpośrednio.

Oczywiście o wiele lepsza jest wersja pierwsza, gdyż chowa detale implementacyjne iteracji w osobnej metodzie.

Dodatkowo elegantszym sposobem byłoby zastosowanie `forEach` (forEach samo w sobie ukrywa zbędne detale iteracji):

 

hideAllDivs() {
  [...divs].forEach(div => div.classList.add('hide'))
}

 

I ostatnia rzecz - divs jest u ciebie zmienną nielokalną, nie należącą do obiektu - bez sensu, jak już robisz klasę to zachowój enkapsulację i utwórz zmienną divs w konstruktorze.

Comments

i o to mi chodziło, bardzo Ci dziękuję za ten komentarz

---

Proszę bardzo

Answer 2

Moim zdaniem kombinujesz ok. Jednak sam element div jest zbyt małą i ogólną częścią dokumentu.

Proponuję Ci zaznajomić się z Reactem. Korzystając z niego i ES6 tworzysz komponenty. O wiele łatwiej nimi zarządzać i oddzielać logikę od widoku.