Есть
jquery. Сто лет ему. Немного (сильно) сокращает код.
this.onMouseMoveBinded = this.onMouseMove.bind(this);
this.onMouseEndBinded = this.onMouseEnd.bind(this);
Не прочитать.
if( typeof (this.obj) === 'undefined' ) this.obj = opt.el;
Лучше
так.
if(this.obj === undefined) {
this.obj = opt.el;
}
Вам срочно нужна
векторная алгебра.
// ***
this.shiftX = e.clientX - thumbCoords.left;
this.shiftY = e.clientY - thumbCoords.top;
//***
this.coords = {
top: e.clientY - this.shiftY - this.parentShift.top,
left: e.clientX - this.shiftX - this.parentShift.left
};
//***
this.coords.top = e.clientY - this.shiftY - this.parentShift.top;
this.coords.left = e.clientX - this.shiftX - this.parentShift.left;
//***
this.rx = this.px - this.kx;
this.ry = this.py - this.ky;
//***
Ну
jquery же.
doc.documentElement.classList.remove('grabbing');
doc.removeEventListener('mousemove', this.onMouseMoveBinded);
doc.removeEventListener('mouseup', this.onMouseEndBinded);
Вообще, подумайте над названиями. Может оно и адекватно, но мне - непонятно. Откуда тут напряжение взялось?
function Tension(opt){
dragNdrop.apply(this, arguments);
}
Не помню как сейчас, но, ЕМНИП, в js объекты-классы определяются через var.
Tension.prototype = Object.create(dragNdrop.prototype);
Tension.prototype.constructor = Tension;
То есть декларирование Tension должно быть каким-то таким:
var Tension = function (opt){
dragNdrop.apply(this, arguments);
}
Снова не прочитать условия. Не жалейте строк! Алсо, всё в одну кучу - UI, логику, физику - это плохой знак.
function Slider(opt){
if(typeof (this.obj) === 'undefined') this.obj = opt.thump;
if(typeof (this.slider) === 'undefined') this.slider = opt.slider;
dragNdrop.apply(this, arguments);
}
new dragNdrop({
el: doc.getElementById('ball1'),
physiq: true
});
new dragNdrop({
el: doc.getElementById('ball2')
});
new Tension({
el: doc.getElementById('square1')
});
new Slider({
slider: doc.getElementById('slider'),
thump: doc.querySelector('.thumb'),
physiq: true
});
new StepSlider({
el: doc.getElementById('slider-step'),
from: 5,
to: 40
});
Плачу кровавыми слезами. Что это? Не боитесь сборщика мусора? Не надо так. Вообще global space - не есть хорошо.
Итого мы имеем сложно читаемую математику, паршивый нейминг, неудобные условия и нежелание следовать каким-то
best-practice. Это всё не фатально, более того - прототип рабочий. Меняться вам или нет - решайте сами. Из важного, я бы посоветовал сделать всё читаемым, а для этого потребуется адекватный нейминг,
не сваливать всё в кучу и следовать неформальным правилам. В остальном, javascript
не идеальный вариант, чтобы показывать задротство в области clear code. И с паттернами у него
беда.
