-
-
Save amiskov/c35a5d4d91e0108f076c0b359a189f48 to your computer and use it in GitHub Desktop.
| <ul class="products js-products"> | |
| <li class="product"> | |
| <img src="trousers.jpg" alt="" class="product__img"> | |
| <button class="product__buy" data-price="120">Купить</button> | |
| </li> | |
| </ul> | |
| <script> | |
| $('.js-products').on('click', '.product__buy', function(event) { // .product__buy или .js-product-buy? | |
| // Нужно ли давать класс с префиксом `js-` кнопке, если обработчик | |
| // навешивается на li? Или обращаться к ней по .product__buy? | |
| var price = $(this).data('price'); | |
| buyProduct(price); // функционал покупки | |
| }); | |
| </script> |
я бы ставил префикс всем элементам, которые обрабатываются js. Потому как уже из разметки понятно, что элемент участвует в js. А так есть задача поменять верстку чуть-чуть и не понятно, можно трогать классы или на них навешано что-то, надо дополнительно тестить, лезть в код и т.д. С префиксом увидел, значит точно элемент используется в js.
Сейчас обычно ставится айдишник родителю, а кнопке js-класс.
Если нельзя айдишник (несколько блоков на странице), то обработчик ставится на <html>.
Я тоже за то, чтобы добавлять префикс всем элементам, которые обрабатываются js. На мой взгляд, так даже проще поддерживать код, к примеру, если нужно удалить элемент с префиксом js-, то сразу понятно, что этот элемент обрабатывается яваскриптом и можно удалить ненужный js.
@anastasiast @shabanovtg, вы пишете, что:
нужно добавлять префикс всем элементам, которые обрабатываются js
Однако по факту при делегировании событий обработчик навешивается только на родителя, а кнопка выбирается логически, по event.target. То есть JS-ом кнопка не обрабатывается, JS за ней следит по классу.
Но нельзя не согласиться с тем, что при поддержке, когда есть префикс на кнопке, сразу становится понятно, что этот класс присутствует в js-файле. Именно, что он там есть и менять его не стоит, а не то, что на нем навешен обработчик.
Короче, я согласен с тем, что нужно ставить префикс на все классы, которые фигурируют в js-файлах, а не только на те, на которые навшиваются обработчики. Получается, что вопрос был именно в формулировке.
В итоге получим:
<ul class="products js-products">
<li class="product">
<img src="trousers.jpg" alt="" class="product__img">
<button class="product__buy js-buy-product" data-price="120">Купить</button>
</li>
</ul>
<script>
$('.js-products').on('click', '.js-buy-product', function(event) {
var price = $(this).data('price');
buyProduct(price);
});
</script>Такую формулировку я предлагаю и закрепить в качестве стандарта. Все правильно?
Еще про айдишники надо подумать... Просто если у элемента стоит id, точно не ясно, используется ли он в js или это на нем якорь навешен или просто так он там стоит. А с классом js-class-name все понятно — используется в js.
Для поддержки, можем договориться ставить рядом с id (который используется в js) класс .js-use-id или что-то в этом роде
Нужно ли добавлять префикс js- для темплейтов? Например:
<script id="someTemplate" type="text/x-jsrender">
{{if name}}<p class="nearest-salon-popup__name">{{:name}}</p> {{/if}}
</script>Он используется в JS, но это мета-информация. Никаких обработчиков нет.
Я думаю, что
js-нужно ставить только тем элементам, которые непосредственно обрабатываются яваскриптом. Если делегируем событие на детей, то используем их БЭМ-классы без дополнительногоjs-префикса.