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

Question

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

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

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

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

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

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

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

Я не вижу особого упоминания ни при чтении на unobtrusive javascript.

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

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

Answer 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 атрибутов даже состояние:

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

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

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

Answer 2

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

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

Я лично использую 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> 

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

Answer 3

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

<el class="block logicClass" /> 

Answer 4

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

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

Answer 5

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

.block { 
    display: block; 
} 

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

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

согласно вашему конкретному вопросу, «что являются основными отличиями: «как вы говорите, использование класса происходит быстрее/более результативно. Синтаксис, безусловно, чище. Спецификация doesn't seem to say anything specific об использовании атрибутов данных в качестве селекторов. Тем не менее, я всегда интерпретировал атрибуты данных как предназначенные для хранения скалярных данных, значения которых используются для алгоритмов. Это означает, что значения могут часто меняться, и данные могут быть добавлены/удалены из элементов часто, что сделает их недействительными для селекторов.