Почему стоит использовать специальные классы для привязки событий

Отчего-то, для привязки событий, многие разработчики js используют классы доставшиеся от верстки. Я много раз сталкивался с проблемами, которые появляются при таком методе, проблемах, связанных с поддержкой такого кода, и сейчас я хотел бы подробнее рассказать о об этом.

На мой взгляд существует 3 популярных способа навесить событие на элемент в думе:

1. Через ID
2. Через то, что досталось от верстки
3. Через специальные классы

1. Привязка через ID

Что может быть проще? Уверен многие, при первых знакомствах с JS так делали, а кто-то делает и сейчас. У метода, естественно, есть плюсы. Во-первых, это высокая скорость, обусловленная тем, что элементы с id находятся в глобальном объекте window и их даже искать не надо. Во-вторых, элементы легко найти при отладке, как из шаблона, так и через навешивание событий.
К примеру, у нас есть код

<div class="main">
<p>
Новейшая система слива обеспечивает качественную и быструю работу спускных клапанов. Происшествия возникают лишь в 3- случаях из 10.
<a href="#" id="system-detail">Подробнее</a>
</p>
</div>

Согласитесь, легко найти по #system-detail в каком месте к этому элементу привязывается событие. Также это справедливо и тогда, когда у нас есть js код, а надо найти шаблон.

Без минусов тоже никуда. В случае если эти элементы используются в шаблонах, которые несколько раз вставляются на страницу, мы получим конфликты из-за совпадения ID.

2. Привязка через то, что досталось от верстки

Суть метода заключается в том, что мы не редактируем шаблон, а отталкиваемся от того, что есть. К примеру, у нас есть такой шаблон.

<div class="block_content">
<p class="left b_font red_font"><a href="#">Пропустить рекламу вперед</a></p>
<div class="left inline-block">
<p>
Современно соотечественники не в состоянии созидать без современных вещей! Своевременно смените старые вещи на совершенные. Своенравные товарищи, будут осовременены принудительно.
<a href="#">Осовремениться</a>
<p class="hidden">
<span>Ну а если вам лень куда-то ехать можете<a href="#">Вызвать подмогу на дом</a></span>
</p>
</p>
</div>
</div>

Скорей всего разработчик написал что-то в духе

$('.block_content .inline-block a:first'); // Осовремениться
$('.block_content .left.b_font.red_font'); // Пропустить рекламу вперед
$('.block_content .inline-block a:last'); // Вызвать подмогу на дом

Помимо большого количества селекторов в запросе, эта команда очень хрупкая. Стоит нам поменять класс одного из элементов или их расположение, как все рассыпется. Кроме того такие запросы очень сложно отлаживать.
Как узнать где навешивается событие на «Осовремениться»! Как будем искать? По частям только и то наугад. Будем искать по одному селектору, потом по другому и так пока не найдем что-то похожее, после чего еще будем проверять то ли это, или нет. В случае, если нам надо продублировать действие на другой элемент, нам нужно повторно писать присвоение(или добавлять в старый селектор через запятую).

Чтобы модифицировать такой запрос, нужно посмотреть кучу шаблонов, чтобы быть уверенным в том, что он не привяжется к чему-нибудь похожему, в случае если это один файл на весь проект.
А вот мы передаем шаблон верстальщику для правки цвета с красного на синий, и что происходит? Ссылка больше не работает.
Хорошо может разбираться в таком шаблоне только тот, кто его сам и написал, и то, довольно непродолжительное время.

3. Привязка через специальные классы

И вот мы подошли к последнему пункту. Для привязывания событий добавляется специальный класс, к примеру, js-new-message или app-open-window, который не используется для задания стилей, а только нужен для того, чтобы навесить событие. Возьмем предыдущий пример и доработаем его

<div class="block_content">
<p class="left b_font red_font"><a href="#" class="app-skip-advert">Пропустить рекламу вперед</a></p>
<div class="left inline-block">
<p>
Современно соотечественники не в состоянии созидать без современных вещей! Своевременно смените старые вещи на совершенные. Своенравные товарищи, будут осовременены принудительно.
<a href="#" class="app-modern">Осовремениться</a>
<p class="hidden">
<span>Ну а если вам лень куда-то ехать можете<a href="#" class="app-help-me">Вызвать подмогу на дом</a></span>
</p>
</p>
</div>
</div>

$('.app-skip-advert'); // Пропустить рекламу вперед
$('.app-go-to-modern'); // Осовремениться
$('.app-help-me'); // Вызвать подмогу на дом

Разница очевидна. Код не зависит от стилей, если нужно продублировать действие, достаточно присвоить нужный класс в нужное место. Поиск, как элементов, так и кода, легок в обоих направлениях. Поддержка такого кода занимает минимум времени. При использовании нескольких шаблонов на одной странице, в случае если привязка идет не к глобальному объекту, а к корню шаблона, код будет работать хорошо. Да, могут быть конфликты, но их отследить проще, чем во втором варианте.

Автор: blare

Источник ^[1]