Зачем при верстке добавлять классы «js»? Я понимаю — разделение представление и логики. Но зачем это нужно? Зачем нужно это разделение?

Question

[sorry_i_noob]

Ну например есть у меня такой селектор: #filter-date__input-from. Чем плохо то, что я повешу обработчик на него, а не на .js-filter-date__input-from?

Comments

[Алмаз Бисенбаев]

Я понимаю — разделение представление и логики

Сам же и ответил на свой вопрос

Answer 1

[dom1n1k]

Часто бывает, что визуальную часть фронта делает один человек, а "оживляж" другой. А то и несколько других. Вот чтобы они как можно меньше пересекались.

Answer 2

[Алексей Скляров]

Плохого в том, что у вас есть 5 разных кнопок, но все запускают одно и то же событие. Вы будете вешать один и тот же обработчик на 5 разных айдишников? или все-таки создадите один класс, пропишите только для него обработчик и будете писать этот класс для всех кнопок, на которые вы хотите повесить какое-то действие? Я думаю ответ очевиден. А классы вида .js-add-to-cart делаются для того, чтобы было проще отыскать ваш функционал в коде, ведь сразу понятно что сюда повешен обработчик какой-то, чем пытаться потенциальный ID выискивать в вашем js коде.

Comments

[Максим]

Алексей Скляров полностью поддерживаю. По js-название_класса - легко и понятно, что это касается логики, и что если тут рефакторить, то нельзя просто взять и удалить этот класс.

[sorry_i_noob]

А если у меня действие (результат нажатия. точнее, JS код, который срабатывает при нажатии) для кнопки уникально. То есть, неприменимо к другим кнопкам. В таком случае не имеет смысла писать класс "js-..."?

[sorry_i_noob]

Максим, можно просто нажать ctrl+shift+f (в нормальных IDE) и найти все упоминания этого класса. можно поставить фильтр на расширения файла - `*.js`, например. или исключить `!*.css, !*.scss`. и это может быть даже надежнее, чем просто `js-имя_класса`. ибо, возможно, программист по ошибке повесил обработчик на обычный класс (без `js-` перед названием).

[Сергей delphinpro]

sorry_i_noob,

А если у меня действие (результат нажатия. точнее, JS код, который срабатывает при нажатии) для кнопки уникально.

Если вы пишете говносайт, про который никто и не вспомнит через пару месяцев — можете вообще писать как угодно.
Во всех остальных случаях вы не можете на сто процентов быть уверены в уникальности действия в долгосрочной перспективе.

[sorry_i_noob]

Сергей delphinpro, по такой логике получается, что весь JS код нужно писать так, как будто это плагин? То есть, с возможностью использовать код много раз. Писать функциями, в которые нужно отправлять параметры. Верно? А не просто вешать обработчики на DOM элементы.

[Сергей delphinpro]

sorry_i_noob, не совсем понял, как вы пришли к этому выводу, но в общем-то, да. я так и пишу. вы видите в этом проблему? я нет. зато при необходимости я легко методом копипасты переношу куски кода из проекта в проект практически без правок. Или даже оформляю как npm-пакет.

[sorry_i_noob]

Сергей delphinpro, почему в обычных уроках в интернете не пишут, как лучше писать JS код... А где можно почитать об этом? О тонкостях написания. Чтобы сразу научиться писать правильно. И не переписывать потом все.

[Сергей delphinpro]

sorry_i_noob, на первый вопрос отвечу легко: потому что их пишут такие же люди, которые недавно искали ответы на свои вопросы.
На второй вопрос не отвечу совсем. Учитесь думать "во времени", а что будет если условия изменятся, если заказчик скажет "хочу вот так теперь чтобы было". Как быстро вы сможете адаптировать то, что написали, под пока еще неизвестно что.
Сложно. Знаю. Возможно это даётся только с опытом. Возможно есть умные книжки, которые дадут толчок в нужном направлении.

[Алексей Скляров]

sorry_i_noob, вам есть смысл все равно использовать класс для обработчика, а не вешать на ID, хотя бы потому, что в будущем (возможно) вам может понадобиться повесить действие и на другой элемент.