Как правильно оформлять 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 {
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 их всунуть, как?

Предыдущий
вопрос Следующий
вопрос

При оформлении класса по ООП важно следовать определенным принципам и паттернам, чтобы код был понятным, поддерживаемым и масштабируемым.

Разбиение методов:

Конструктор (constructor): здесь инициализируются свойства объекта на основе переданных параметров.Методы работы с данными (например, showSlide, setIndicator): здесь описываются методы, которые изменяют состояние объекта.Методы обработчиков событий (например, prevSlide, nextSlide): здесь описываются методы, которые реагируют на действия пользователя.Метод инициализации (init): здесь вызываются методы, необходимые для начальной настройки объекта.

Обработчики событий (addEventListener):

Обычно рекомендуется вынести логику обработчиков событий из методов объекта, чтобы сделать код более чистым и модульным.Можно создать отдельные методы для обработчиков событий (например, handlePrevClick, handleNextClick) и добавить их в метод init.В обработчиках событий можно использовать методы объекта для взаимодействия с данными.

Инициализация:

Метод init обычно используется для вызова всех необходимых методов в правильной последовательности для инициализации объекта.Здесь можно вызывать методы для конфигурации слайдера, установки обработчиков событий и запуска первого слайда.

Примерный код с учетом вышеперечисленных рекомендаций:

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;
this.prevClickHandler = this.prevClickHandler.bind(this);
this.nextClickHandler = this.nextClickHandler.bind(this);
}
showSlide(n) {
if (n < 0) {
this.index = 0;
}
if (n === this.slide.length) {
this.index = this.slide.length - 1;
}
this.slide.forEach((item) => {
item.style.display = 'none';
});
this.slide[this.index].style.display = 'block';
this.setIndicator(this.index);
}
setIndicator(index) {
const n = index + 1;
this.indicator.textContent = n;
}
prevClickHandler() {
this.showSlide(this.index - 1);
}
nextClickHandler() {
this.showSlide(this.index + 1);
}
addEventListeners() {
this.prev.addEventListener('click', this.prevClickHandler);
this.next.addEventListener('click', this.nextClickHandler);
}
init() {
this.showSlide(this.index);
this.addEventListeners();
}
}
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();

Такой подход позволяет сделать код более читаемым и удобным для дальнейшей поддержки и модификации.