Пользовательские атрибуты HTML5 - Почему я должен их использовать?

Я не могу понять, почему я должен быть доволен HTML5, позволяющим настраивать атрибуты? Почему я должен их использовать?

ОТВЕТЫ

Ответ 1

Я предполагаю, что вы ссылаетесь на атрибуты HTML5 [data-*].

Преимущество состоит в том, что вы можете легко связать некоторые данные сценариев (все еще семантические, но не для отображения) с вашими элементами без необходимости вставлять встроенный javascript повсюду, и он будет действительным HTML5. Чтобы сделать то же самое в HTML4, потребуется указать собственное пространство имен и добавить некоторые атрибуты с именами.

Скажем, у вас есть список предметов для продажи, вы можете захотеть сохранить числовую цену, не пытаясь разобрать строку:

<ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2, only $1</li>
  ...
</ul>

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

В качестве альтернативы вы могли бы поместить числа в диапазон с определенным классом, найти правильный диапазон на нужном элементе и вытащить значение таким образом, но атрибуты [data-*] уменьшают количество разметки /script необходимо сделать то же самое.

Если вы не хотите его использовать, вам не нужно. Существует много способов связывания данных с элементами, это просто новый.

Кроме того, новый dataset JavaScript API обеспечивает согласованное средство декларативного доступа к значениям, хранящимся в атрибутах [data-*].

Для пользователей jQuery .data() и .attr() можно использовать для доступа к атрибутам [data-*], а Я написал подробный ответ о том, когда вы захотите использовать один за другим.

Ответ 2

Пользовательские атрибуты уже широко используются, например здесь пример из dojoToolkit():

<div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>

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

Там хорошее введение в атрибуты data- * на HTML5 Doctor.

Ответ 3

Использование настраиваемого атрибута data- будет в будущем проверять вашу страницу html5, никакие будущие браузеры, придерживающиеся спецификации, не будут использовать data-[attribute], поэтому не будут сталкиваться с вашим настраиваемым атрибутом.