T
T
thehighhomie2015-10-07 22:23:58
JavaScript
thehighhomie, 2015-10-07 22:23:58

JavaScript OOP approach with DOM?

After mastering the basic js, I made several sites in production using primitive code, now I have mastered the OOP base. I want to start writing good applications, and for example, when creating the same slider in the OOP style, I was immediately confused.
As I understand it, everything should be well structured and that the class template should contain approximately the following property records:
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();
}
and assignments like this.slider = document.getElementById("element") don't really fit.
As I understand it, you need to write values ​​approximately in such options as I indicated above, well, for example - this.x = 0; this.y = 20;
If I think more or less correctly at an abstract level, then how to manipulate elements in the DOM in OOP, create separate functions that do not belong to the class, or just external variables, or I don’t think correctly at all and such manipulations with the house in the class are completely normal in practice ?
Who is good at js and OOP, tell me the way.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Taratin, 2015-10-07
@thehighhomie

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question