Как задать события в классах ES6?

Question

[Returb0]

Здравствуйте, подскажите, как правильно перевести данный код из стандарта ES5 в стандарт ES6
Ниже есть код на ES5, который отлично работает, но он написан на ES5, при попытки перевести его в ES6 возникли трудности, в частности особенно с переносом событий.
Может быть кто-нибудь подскажет как правильно это сделать?

window.onload = function(){
    new Slider({
        images: ".slider__galary img",
        btnPrev: ".btnPrev",
        btnNext: ".btnNext",
        rate: false
    })
}

function Slider(obj){
    this.images = document.querySelectorAll(obj.images);
    this.btnPrev = obj.btnPrev;
    this.btnNext = obj.btnNext;
    this.rate = obj.rate;
    this.time = obj.time || 1000;
    var self = this;
    var i = 0;

    this.prev = function(){
        self.images[i].classList.remove("showed");
        i--;
        if(i < 0){
            i = self.images.length - 1;
        }
        self.images[i].classList.add("showed");
    }
    this.next = function(){
        self.images[i].classList.remove("showed");
        i++;
        if(i >= self.images.length){
            i = 0;
        }
        self.images[i].classList.add("showed");
    }

    document.querySelector(this.btnPrev).onclick = this.prev;
    document.querySelector(this.btnNext).onclick = this.next;

    if(this.rate){
        setInterval(this.next, this.time);
    }
}

Comments

[Returb0]

parcnfalb, да. Дело в том, что например события

document.querySelector(this.btnPrev).onclick = this.prev;
    document.querySelector(this.btnNext).onclick = this.next;

которые сейчас прекрасно работают, при попытки перенести их в класс выдают ошибку.
или вот этот кусочек кода

if(this.rate){
        setInterval(this.next, this.time);
    }

и я правда не могу понять куда его можно было бы записать и как преобразовать, что бы логика оставалась такая же как и сейчас.

[parcnfalb]

Returb0, Как ты пишешь, и что за ошибка?

[Returb0]

parcnfalb, вот все, что смог

window.onload = function(){
    new Slider({
        images: ".slider__galary img",
        btnPrev: ".btnPrev",
        btnNext: ".btnNext",
        rate: false
    })
}

class Slider{
    construnctor(obj){
        this.images = document.querySelectorAll(obj.images);
        this.btnPrev = obj.btnPrev;
        this.btnNext = obj.btnNext;
        this.rate = obj.rate;
        this.time = obj.time || 1000;
        var self = this;
        var i = 0;
        
    }
    
    prev(){
        self.images[i].classList.remove("showed");
        i--;
        if(i < 0){
            i = self.images.length - 1;
        }
        self.images[i].classList.add("showed");
    }
    next(){
        self.images[i].classList.remove("showed");
        i++;
        if(i >= self.images.length){
            i = 0;
        }
        self.images[i].classList.add("showed");
    }

    
    document.querySelector(this.btnPrev).onclick = this.prev;
    document.querySelector(this.btnNext).onclick = this.next;

    if(this.rate){
        setInterval(this.next, this.time);
    }
}

[parcnfalb]

Работает?

[Returb0]

parcnfalb, ошибка в консоле пропала, но код не отрабатывает

[Returb0]

parcnfalb, https://codepen.io/Gabar/pen/ZVLZbQ

Answer 1

[Stockholm Syndrome]

class Slider {
  constructor({images, btnPrev, btnNext, rate, time}) {
    this.images = document.querySelectorAll(images);
    this.btnPrev = btnPrev;
    this.btnNext = btnNext;
    this.rate = rate;
    this.time = time || 1000;    
    this.counter = 0; 
   
    document.querySelector(this.btnPrev).onclick = this.prev.bind(this);
    document.querySelector(this.btnNext).onclick = this.next.bind(this);

    if (this.rate) {
      setInterval(this.next.bind(this), this.time);
    }
  }
   
  prev() {
    this.images[this.counter].classList.remove("showed");
    this.counter--;
    if (this.counter < 0) {
      this.counter = this.images.length - 1;
    }
    this.images[this.counter].classList.add("showed");
  }
  
  next() {
    this.images[this.counter].classList.remove("showed");
    this.counter++;
    if (this.counter >= this.images.length) {
      this.counter = 0;
    }
    this.images[this.counter].classList.add("showed");
  }
}

Comments

[Returb0]

Большое спасибо, все отлично работает

Answer 2

[Дмитрий Беляев]

// мне кажется, что ждать полной загрузки страницы тут незачем
document.addEventListener('DOMContentLoaded', () => {
    new Slider({
        images: ".slider__galary img",
        btnPrev: ".btnPrev",
        btnNext: ".btnNext",
        rate: false
    });
});

// хелпер для прослушивания событий
class EventListener {
    constructor(ctx, handlers, target) {
        this.ctx = ctx;
        this.handlers = handlers;
        Object.keys(handlers).forEach(event => target.addEventListener(event, this));
    }

    handleEvent(event) {
        const {handlers, ctx} = this;
        const {type} = event;
        if(typeof handlers[type] !== 'function') return;
        handlers[type].call(ctx, event);
    }
}

class Slider {
  construnctor({images, btnPrev, btnNext, rate, time = 1000}) {
        this.images = document.querySelectorAll(images);
        this.i = 0;
        new EventListener(this, {
            click: this.prev
        }, document.querySelector(btnPrev));
        new EventListener(this, {
            click: this.next
        }, document.querySelector(btnNext));
        if(rate) {
            setInterval(() => this.next(), time);
        }
    }
    
    prev() {
        this.images[i].classList.remove("showed");
        this.i--;
        if(this.i < 0){
            this.i = this.images.length - 1;
        }
        this.images[i].classList.add("showed");
    }

    next() {
        this.images[i].classList.remove("showed");
        this.i++;
        if(this.i >= this.images.length){
            this.i = 0;
        }
        this.images[i].classList.add("showed");
    }
}

Comments

[Returb0]

почему-то не работает, хотя ошибки нету

[Returb0]

https://codepen.io/Gabar/pen/ZVLZbQ