JavaScript ООП подход с DOM?

Question

[thehighhomie]

После освоения базово js, сделал несколько сайтов в продакшн, используя примитивный код, сейчас освоил базу ООП. Хочу начать писать хорошие приложения и например при создании того же слайдера в ООП стиле, сразу растерялся.
Как я понимаю все должно быть хорошо структурировано и что в шаблоне класса должны примерно быть такие записи свойств:
function Slider(DOMobject, options) {
this.slider = DOMobject;
this.sliderContainer = DOMobject.parentNode;
this.slidesCount = null;
this.slideIndex = 0;
this.position = 0;
this.prev = null;
this.next = null;
this.setOptions();
this.create();
}
и присвоения типа this.slider = document.getElementById("element") не очень подходят.
Как я понимаю то нужно записывать значения примерно в таких вариантах как я указал выше, ну например - this.x = 0; this.y = 20;

Если я более менее правильно мыслю на абстрактном уровне, то как манипулировать в DOM елементами в ооп, создавать отдельные функции не принадлежащие к классу, или же просто внешние переменные, или я вообще не правильно мыслю и такие манипуляции с дом в классе совершенно нормально в практике?

Кто хорошо владеет js и ООП подскажите путь.

Answer 1

[Александр Таратин]

https://jsfiddle.net/QW01_01/2qouqx81/1/

'use strict';

class BaseDomWrapper{
	constructor(node){
        this._d = typeof node == "string" ? [].slice.call(document.querySelectorAll(node)) : node;
    }
    forEach(callBack){
        this._d.forEach(callBack);
    }
    hide(){
    	this.forEach(function(e){
            e.style.display = 'none';
        })
    }
    show(){
        this.forEach(function(e){
            e.style.removeProperty('display');
        })
    }
}

class Slider extends BaseDomWrapper{
	constructor(node){
        super(node);
        
        console.log(this._d);
    }
    makeRed(){
    	this.forEach(function(e){
            e.style.backgroundColor = 'red';
        })
    }
}

var sl = new Slider('div.slider');
sl.makeRed();

Comments

[thehighhomie]

спасибо. я так понял что манипуляция с дум в классе это нормально?

[abusabir]

thehighhomie: нормально, кроме того, что стили стоит оставить для css, а в js-коде управлять классами

[thehighhomie]

спасибо)