Какие замечания к JS слайдеру?

Question

[konstant1n13]

Сделал слайдер на чистом JS. Хотел бы услышать как сделать лучше и вообще как дальше двигаться в обучении. Буду благодарен за всю критику и советы.
Слайдер: https://konstantinkot.github.io/Slider/
Репозиторий: https://github.com/konstantinkot/Slider

Comments

[godsplan]

Мне нравится подход, но явно не хватает перетаскивание пальцем/мышкой

[WapSter]

он срабатывает через раз когда назад прокручиваешь.

[twobomb]

Попробуйте нажать несколько раз резко например кнопку вправо, а потом когда слайд прокрутится нажать и влево или точку, он тупо не реагирует секунды 3 ни на что.
P.S. Чё так много кода для такого примитивного слайдера

[mayorpvk]

К сожалению - не юзабельно

[konstant1n13]

Я специально написал так, чтобы вовремя перемещения с одного слайда на другой точки и стрелкине реагировали.

Answer 1

[Ivan Bogachev]

По функционалу:

• Иногда подвисают кнопки "влево" и "вправо", не реагируют по несколько секунд.
  
• При переходе с последнего слайда к первому мелькают они все. Было бы круто, чтобы был просто переход, как между остальными.
  
• С клавиатуры нельзя попользоваться, свайпы тоже не поддерживаются.
  
• В начале есть что-то вроде document.querySelectorAll в большом количестве. Это намекает на то, что два слайдера на одной странице работать не будут (все смешается в кучу).
  

По коду:

• Код ужасно отформатирован. Читать сложно (читай поддерживать сложно). Ознакомьтесь хотя бы с Airbnb JavaScript Style Guide и поймите, зачем делать код читаемым. Также там мешанина из ES6+ и каких-то древних хаков с that=this, самовызывающимися функциями и.т.д. Вы же уже используете современный язык - так используйте только его. Код будет в разы проще по структуре. Сейчас там черт ногу сломит. И очень очень очень очень очень очень длинные функции тоже мешают ориентироваться в происходящем.
  
• Бессмысленные комментарии. Они просто дублируют код.
  
• Сторонний код лучше загружать через NPM и подключать из node_modules, а не копироваать себе, и тем более не стоит руками смешивать разные инструменты в один файл. И да, они там вообще используются или просто лежат?
  
• В репозитории отсутствуют конфиги и инструкция по сборке. Все это должно быть. Без них непонятно, как вообще это пересобрать.
  

Рекомендации:

• Почитайте про стиль кода, про то, как писать просто и понятно. Лучше этому сразу научиться.
  
• Загуглите, как и зачем писать комментарии (и как из них генерировать документацию).
  
• Поймите, зачем нужны все стандартные инструменты - сборщики, препроцессоры, линтеры, пакетные менеджеры, системы контроля версий и.т.д. Это понимание поднимет на новый уровень ваши поделки в плане их дальнейшего переиспользования. Да и вам поможет в работе.
  
• Тестируйте. Хотя бы вручную.
  

Comments

[konstant1n13]

Большое спасибо. Можно поподробнее про "древние хаки"? Я понял про that=this, самовызывающиеся функции. А что-то ещё есть, что уже не используется?
А самовызывающиеся функции - это плохо? Просто я работал в веб-студии, тамошний senior их по-полной использовал...

[Ivan Bogachev]

konstant1n13,

А самовызывающиеся функции - это плохо? Просто я работал в веб-студии, тамошний senior их по-полной использовал...

Часть языка не может быть "плохой". Здесь вопрос в уместности использования. Например делать методы класса как функции с подменой this (как у вас в слайдере), когда их можно сделать именно как методы класса - это не уместно. Это запутывает код. Когда-то, когда классов в JS вообще не было - это было уместно. Ну то есть выбора не было - люди хотели ООП и делали его как могли. А сейчас выбор есть - в языке появился официальный синтаксис для классов. Так что изучите все возможности современного JS - там много простых и лаконичных решений для того, что раньше костылили своими руками.

[Игорь]

Ivan Bogachev, Что бы Куратор тега JavaScript сделал код ревью можно просто попросить?)