@avprinciple

Как правильно оформлять class по ООП?

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


Как правильно разбить методы, как вообще оформить правильнее, а главное как быть с addEventListener-ами, их - вкладывать в отдельный метод, как это я сделал, может быть, в метод init их всунуть, как?
  • Вопрос задан
  • 330 просмотров
Пригласить эксперта
Ответы на вопрос 2
mbelskiy
@mbelskiy
Software Developer
1. Зачем вызывать init снаружи класса, если это можно делать в constructor после объявления членов класса?
2. prevSlide - хорошее название для метода которые переключает текущий слайд на предыдущий, но не для метода регистрирующего обработчик события. Тоже самое с nextSlide
3. this.showSlide(this.index -= 1); – зачем делать присваивание, если за эту логику отвечает код showSlide? Ответ как-то связан с синхронизацией значения индикатора. Чтобы избавиться от этой проблемы, можно определить метод normalizePosition, туда передавать index +1 или index -1, он вернет значение от 0 до length -1 и потом его передавать в showSlide, setIndicator. Соответственно оттуда логику нормализации убрать
Ответ написан
@grinat
Ну тут mvp нужен. Три объекта, первый slider model, там атрибуты сущности и логика переключений(в идеале их надо делить на модель и сервис и логика в сервисе), второй slider view, он коннектится к дому, вешает обработчики, получает/передает данные в сервис и третий это уже класс slider, в нем конфигурация и связывание всего. По факту тут это все избыточно и не даст ничего кроме гемморая.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы