Just starting to write OOP, before that I wrote only procedurally. I ask you to run through the eye of the code and assess how the code conforms to the OOP standards. Slider code.
https://jsbin.com/vocapebehe/1/edit?output - an example
'use strict'; function SliderOOP(options) { // Элементы слайдера this.sliderWrapper = document.querySelector(options.selector); this.slider = this.sliderWrapper.querySelector('.slider'); this.sliderItems = this.sliderWrapper.querySelectorAll('.slider-item'); this.arrowButtons = this.sliderWrapper.querySelector('.arrows-slider'); // Системные методы SliderOOP.addMarginItems = function () { for (let i = this.quantitySliderItems - 1; i > -1; i--) { this.sliderItems[i].setAttribute('style', 'margin: 0 ' + this.marginItem + 'px;'); } } SliderOOP.countSliderScrollWidth = function () { this.sliderScrollWidth = (this.quantitySliderItems * 2 * this.marginItem + this.quantitySliderItems * this.itemWidth).toFixed(2); } SliderOOP.countMargin = function () { return ((this.sliderWidth - (this.itemWidth * this.visibleItems)) / (this.visibleItems * 2)).toFixed(2); } SliderOOP.hundlerClickArrows = function (e) { if (e.target.classList.contains('left')) { this.leftSwipe(this.sliderWidth); } else if (e.target.classList.contains('right')) { this.rightSwipe(this.sliderWidth); } } // Внутренние методы this.rightSwipe = function (translateX) { this.coords.sliderX -= translateX; if (Math.abs(this.coords.sliderX) > this.getMaxScroll()) { this.coords.sliderX = 0; } this.sliderSwipe(); } this.leftSwipe = function (translateX) { this.coords.sliderX += translateX; if (this.coords.sliderX > 0) { this.coords.sliderX = -this.getMaxScroll(); } this.sliderSwipe(); } this.sliderSwipe = function () { this.slider.setAttribute('style', 'transform:translateX(' + this.coords.sliderX + 'px);'); } // Внутренние значения this.visibleItems = options.visibleItems; this.sliderWidth = this.slider.offsetWidth; this.itemWidth = this.slider.firstElementChild.offsetWidth; this.quantitySliderItems = this.sliderItems.length; this.marginItem = SliderOOP.countMargin.call(this); this.sliderScrollWidth = 0; this.coords = { x : 0, y : 0, oldX : 0, oldY : 0, sliderX : 0 } // Запуск слайдера SliderOOP.addMarginItems.call(this); this.arrowButtons.addEventListener('click', SliderOOP.hundlerClickArrows.bind(this)); } SliderOOP.prototype = { getItemMargin : function () { return this.marginItem; }, getScrollWidth : function () { SliderOOP.countSliderScrollWidth.call(this); return this.sliderScrollWidth; }, getMaxScroll : function () { return (Math.ceil(this.quantitySliderItems / this.visibleItems) - 1) * this.sliderWidth }, setVisibleItems : function (visibleItems) { this.visibleItems = visibleItems; this.coords.sliderX = 0; this.sliderSwipe(); this.marginItem = SliderOOP.countMargin.call(this); SliderOOP.addMarginItems.call(this); }, } const options1 = { selector : '.slider-1', visibleItems : 3, mode: 'default' } const options2 = { selector : '.slider-2', visibleItems : 2, mode: 'default' } let slider1 = new SliderOOP(options1); let slider2 = new SliderOOP(options2);
SliderOOP.addMarginItems
inside the constructor, since in this case they will be created when they are updated with each object creation. In general, it is strange why constantly call these functions with bind / call if you can just add them to the prototype - Grundy