В чем разница между использованием атрибутов данных и класса /ID для поведения JavaScript?

Я работаю над приложением, передняя часть в основном использует jQuery.

Мы полагаемся на некоторые классифицированные элементы, присутствующие на странице, чтобы мы могли приложить к ним поведение. Например:

$('.block').on('click', clickHandler);

Один из других разработчиков сказал, что мы должны отделить презентацию от логики (с которой я согласен). Поскольку классы используются для представления, он предложил использовать атрибуты данных:

$('[data-attribute-name~=value]').on('click', clickHandler);

Однако я знаю следующее об этом подходе:

Он значительно менее эффективен, чем селектор класса.
HTML-классы используются для придания семантического значения элементу DOM и, как таковые, не ограничиваются презентационными применениями.

Я не вижу особого упоминания ни о том, что читал на ненавязчивый javascript.

Каковы основные отличия использования [data-attribute] от классов/идентификаторов?

Это строго вопрос производительности/предпочтения?

Ответ 1

Поскольку классы используются для представления

Это отчасти верно. Классы используются как для представления, так и для поведения. Нет ничего плохого в использовании классов для привязки поведения к нескольким элементам.

Атрибуты данных отлично подходят для переноса дополнительной информации, специфичной для элемента, но я бы очень советовал использовать атрибуты данных с единственной целью приведения в действие поведения.

Если вам действительно нужно отделить использование классов для целей презентации и поведения, я бы рекомендовал вам назвать их соответствующим образом. Например, вы можете сделать:

<div class="pres-alert">Watch Out!</div>

против.

<div class="behav-alert">Watch Out!</div>

или

<div class="pres-alert behav-alert">Watch Out!</div>

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

UPDATE:

Чтобы оставить комментарий своего со-разработчика немного дальше, я полагаю, что он на самом деле ошибочен, чтобы связать атрибуты class с презентацией. Спецификации HTML5 для атрибутов class даже утверждают:

Нет никаких дополнительных ограничений на то, что авторы токенов могут использовать в атрибуте class, но авторам рекомендуется использовать значения, описывающие характер контента, а не значения, которые описывают желаемое представление содержимого.

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

Поэтому вместо использования class="big-red-box" вы должны использовать class="alert". Теперь вы можете прикреплять стили к этому классу alert (color:red;font-size:bold), а также к поведению (то есть всплывающее окно при наведении).

Ответ 2

Вы должны обязательно придерживаться идентификаторов, если можете, если не по какой-либо другой причине, чем самая быстрая из селекторов. Я бы добавил больше на ваш второй пункт: HTML-классы должны использоваться только для придания семантического значения элементу DOM. Это использует класс CSS, который, как я полагаю, вы выше, например:

.block {
    display: block;
}

действительно противоречит духу HTML/CSS. Это не значит, что мы не все это делаем, но дело в том, что вы должны по крайней мере иметь семантический смысл за именами классов, к которым вы хотите привязать:

$(".show-popup").on('click', showPopup);

В соответствии с вашим конкретным вопросом, "каковы основные отличия:" как вы говорите, использование класса происходит быстрее/более результативно. Синтаксис, безусловно, чище. Спецификация не говорит ничего конкретного об использовании атрибутов data в качестве селекторов. Тем не менее, я всегда интерпретировал атрибуты данных как предназначенные для хранения скалярных данных, значения которых используются для алгоритмов. Это означает, что значения могут часто меняться, и данные могут быть добавлены/удалены из элементов часто, что сделало бы их уникальными для селекторов.

Ответ 3

Класс может быть связан с несколькими элементами, тогда как идентификатор связан только с одним элементом.

Я только немного прочитал ваш вопрос и посмотрю, что вам нужна дополнительная информация:

Я лично использую атрибуты data для хранения необходимых переменных, которые могут использоваться при обработке события, и я использую класс "событие" для всего, что будет использоваться jQuery, а не CSS. Например:

<a class="event" data-action="Alert" data-id="123" href="#">Foo</a>

<script>

var Event = {
  Alert: function(ele){
     alert(ele.attr("data-id")); //alerts "123"
  };
};

$(".event").on("click",function(){
   var ele = $(this);
   Event[ele.attr("data-action")](ele);
});

</script>

Надеюсь, что это поможет!

Ответ 4

У вас может быть несколько классов, и вы можете связать имя с логикой и другими с презентацией и сохранить производительность селектора классов.

<el class="block logicClass" />

Ответ 5

Атрибуты данных не предназначены только для селекторов. Иногда вы хотите дать дополнительный смысл тегу, который может использовать script.

Например, вы можете иметь data-attribute-validate-repeat="firstpassword" в поле повтора пароля, где это значение относится к первому паролю. Затем форма-валидатор может прочитать этот атрибут, чтобы найти другое поле по идентификатору. Это невозможно сделать только с помощью классов и идентификаторов, если вы не используете специальное соглашение об именах, которое не было бы очень аккуратным.