Как правильно переписать код с ES5 на ES6?

Question

[Jason12]

Переписал код с ES5 https://codepen.io/anon/pen/bYQJWM на ES6 https://codepen.io/anon/pen/MOLWjm?editors=1010 функционал работает но по другому думаю проблема с контекстом скорей всего в версии ES5 применялся self у себя применял не получается. Возможно не так вызываю функции прототипа подскажите плиз.

Comments

[Александр]

Добавьте автоматическое тестирование (mocha+chai) и проверьте, где не правильно работает код

[Jason12]

Александр, Я уж думаю весь на ES5 только по нормальному переписать а потом переписать на опять ES6) но ето долго( никак не могу понять а что значит такая запись с jquery $RangeSlider это просто переменная через доллар?

var length = 3;
	var self = this,
	  $RangeSlider = $('#'+containerID),
	  $SliderThumnb = $RangeSlider.find('.RangeSlider_Thumb'),
	  $SliderTrack = $RangeSlider.find('.RangeSlider_Track'),
	  $SliderTrackFill = $RangeSlider.find('.RangeSlider_TrackFill'),
	  $ClickArea = $RangeSlider.find('.RangeSlider_ClickArea'),
	  $SliderPoints = $RangeSlider.find('.RangeSlider_Point');

Answer 1

[0xD34F]

Переписал код с ES5 на ES6

Брехня. Первое что видим, открыв оба варианта - const и шаблонную строку. То есть, у вас везде используются возможности ES6. Во втором варианте (это который якобы ES6) для сохранения контекста зачем-то применяется bind вместо arrow functions.

Теперь какие косяки были вами допущены:

• забыли подключить jquery
  
• в методе clickarea неправильно привязали контекст, в результате пытаетесь вызывать несуществующий метод
  
• в методе _setupDrag неправильно вешаете обработчик mousemove или в методе _finishDrag неправильно снимаете - в первом у вас addEventListener, во втором off
  
• в методе _updateTrackFill неправильно вычисляется новая позиция - должно быть this._length вместо length
  

Вот исправленный вариант.

Comments

[Антон Спирин]

Кажется вы забыли форкнуть пример.

[Jason12]

Спасибо а подскажи по структуре кода плохо все? как можно улучшить? Просто неохота все методы в прототипе держать.

[0xD34F]

Антон Спирин, не забыл - почему вы так решили?

[Kovalsky]

Jason12, так они это, и так все в прототипе.

[Jason12]

0xD34F, я так понимаю я не могу вешать обработчик к примеру через jquery а снимать через removeEventListener?

в методе _setupDrag неправильно вешаете обработчик mousemove или в методе _finishDrag неправильно снимаете - в первом у вас addEventListener, во втором off

[Jason12]

Никита Полевой,, спасибо исправил не так выразился)

[0xD34F]

Jason12, ну, вы же и сами видите - когда вешаете нативно, а снимаете с помощью jquery, то обработчик не снимается.

[Антон Спирин]

0xD34F, видимо было очень поздно и надо было идти спать )