How to format a class according to OOP?

Question

JavaScript

class Slider {
  constructor(option) {
    this.slider = option.slider;
    this.slide = option.slide;
    this.prev = option.prev;
    this.next = option.next;
    this.indicator = option.indicator;
    this.index = 0;
  }

  showSlide(n) {
    if (n < 0) {
      this.index = 0;
    }
    if (n === this.slide.length) {
      this.index = this.slide.length - 1;
    }

    this.slide.forEach((item) => {
      const slide = item;
      slide.style.display = 'none';
    });

    this.slide[this.index].style.display = 'block';
  }

  setIndicator(index) {
    const n = index + 1;
    this.indicator.textContent = n;
  }

  prevSlide() {
    this.prev.addEventListener('click', () => {
      this.showSlide(this.index -= 1);
      this.setIndicator(this.index);
    });
  }

  nextSlide() {
    this.next.addEventListener('click', () => {
      this.showSlide(this.index += 1);
      this.setIndicator(this.index);
    });
  }

  init() {
    this.showSlide(this.index);
    this.prevSlide();
    this.nextSlide();
  }
}

const slider = new Slider({
  slider: document.querySelector('.text-slider'),
  slide: document.querySelectorAll('.text-slider__slide'),
  prev: document.querySelector('.text-slider__button--prev'),
  next: document.querySelector('.text-slider__button--next'),
  indicator: document.querySelector('.text-slider__indicator-index'),
});

slider.init();

How to properly break methods, how to arrange them more correctly, and most importantly, how to deal with addEventListener s, put them in a separate method, as I did, maybe put them in the init method, how?

Answer 1

1. Why call init from outside the class when it can be done in the constructor after declaring the class members?
2. prevSlide is a good name for a method that switches the current slide to the previous one, but not for a method that registers an event handler. Same with nextSlide
3. this.showSlide(this.index -= 1); - why make an assignment if the showSlide code is responsible for this logic? The answer has something to do with the synchronization of the indicator value. To get rid of this problem, you can define the normalizePosition method, pass index +1 or index -1 there, it will return a value from 0 to length -1 and then pass it to showSlide, setIndicator. Accordingly, remove the normalization logic from there

Answer 2

Well, mvp is needed here. Three objects, the first slider model, there are entity attributes and switching logic (ideally, they should be divided into model and service and logic in the service), the second slider view, it connects to the house, hangs handlers, receives / transmits data to the service and the third is already the slider class, it contains the configuration and binding of everything. In fact, this is all redundant and will not give anything but hemorrhoids.