На что «опираться» при выборке элемента в JS?

Question

[psyhO_octopus]

Всем привет. Вопрос такой, допустим у меня есть какая-то UI вещь (кнопочки, крестики). И допустим у меня такой кусок верстки

...
<button class="xxx__action">action</button>
...

На .xxx__action добавлены стили.
И хочу я повесить обработчик клика на это кнопку.
Вопрос: на что мне "опираться" при выборке элемента.
Можно так:
var action = $('.xxx__action');
Можно добавить класс кнопке js-action

...
<button class="xxx__action js-action">action</button>
...

И выбирать по нему:
var action = $('.js-action');

Скажите кто как делает и какие +/- есть у этих подходов.

Answer 1

[Сергей Протько]

А можно так:

<button class="xxx__action" data-action="close">action</button>
<button class="xxx__action" data-close="">action</button>

$('[data-action=close]').on('click', ...);
$('[data-close]').on('click', ...);

И это будет немного кошернее.

Comments

[Евгений Петров]

@Fesor можно учесть, что на одном элементе может быть несколько функций

$('[data-action~="close"]').on('click', ...);

[Сергей Протько]

@Petroveg довольно редкий кейс. Лучше делать все же отедльные атрибуты на каждое поведение.

[Евгений Петров]

@Fesor у меня не хватает фантазии иногда — придумывать уникальные атрибуты. Скажем, data-container — работаю внутри этого элемента, или data-target — туда я несу свои результаты.

Были случаи, когда один и тот же элемент служил контейнером как для сортировки, так и для построения прокрутки. Я спокойно объединял data-container="sort scroll".

Или мы добавляем 1 символ ~ и пользуемся одинаковыми названиями атрибутов, не нарушая логики ни CSS, ни своей же системы. Или придумываем систему названий, позволяющую описывать роль разными словами, но с одним и тем же смыслом. Я сделал выбор в пользу первого варианта.

[Сергей Протько]

@Petroveg поработайте с angularjs, попишите директивки, или с shadow dom поработайте. Фантазия сразу добавится и может код просто улучшится.

[psyhO_octopus]

Fesor, скажи чем это будет более кошерно?

[Сергей Протько]

@psyhO_octopus тем что выборка по селекторам с атрибутами быстрее в разы чем выборка по классу (хотя это не столь уж и важно) и это намного удобнее чем выборка по айдишникам и вообще. Более универсально, можно назначать несколько действий, удобно искать в коде и т.д. Да и классы больше для оформления, биндить на них логику js как-то нехорошо. А так у вас получаются довольно специфичные селекторы, не нужно проверять вложенность и т.д. Из всех доступных вариантов это самый быстрый, удобный и надежный способ. Если вы можете подсказать более удобный способ, который при этом не засоряет js код стремными селекторами, или который позволяет так же быстро добавить поведение на любой элемент на странице, метод при котором можно красиво и удобно инкапсулировать логику - предлагайте. Я для себя ничего удобнее не нашел.

[Сергей Протько]

@psyhO_octopus так же в data-* атрибуты можно запихивать параметры и тем самым упростить реюз кода, уменьшить его дублирование и т.д.

[Евгений Петров]

@Fesor да, давно хочу попробовать в деле angular. Видимо, придётся поменять подход к написанию фронтенда.

Answer 2

[memba]

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

Comments

[Сергей Протько]

выборка по атрибутам судя по тестам работает не намного медленнее getElementById (раз в 5-10) но всеравно быстрее чем выборка по классу, и при этом код выходит намного более гибким. Да и обычно выборки элементов кешируют, так что если у вас есть необходимость в более быстрой выборке по селекторам - либо у вас кривые селекторы, либо вы что-то делаете не так. Производительность в этом вопросе вообще можно оставить на второй план.

[Илья Лесных]

@Fesor пруф киньте про то, что выборка по атрибутам быстрее, чем по классу.

[Сергей Протько]

jsperf.com/queryselectorall-vs-getelementbyid/32