Pull to refresh

HTML-атрибуты data-* для хранения параметров и получения их в js

Reading time 3 min
Views 304K
В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Например, для сохранения уникального номера блока часто пишут так:

<div class="items">
  <div class="item1">...</div>
  <div class="item3">...</div>
  <div class="item6">...</div>
  <div class="item1">...</div>
  ...
</div>


А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

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

Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.

И вот нам на помощь спешат Чип и Дейл атрибуты data-*.

Плюшки


Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
Можно в названии писать словосочетания: data-email-id=”190”.
Можно использовать любую строку в значении.
Можно использовать любой количество таких параметров для одного тега.

HTML тогда превратится в это:

<div class="items">
  <div class="item" data-item="1">...</div>
  <div class="item" data-item="3">...</div>
  <div class="item" data-item="6">...</div>
  <div class="item" data-item="1">...</div>
  ...
</div>


Теперь самое интересное, а именно — работа в jQuery.

Находим: $(‘[data-email-id]’) или $(‘[data-action=close]’) или даже $(‘[data-date^=2010]’)
Получаем значение: var email = $(selector).attr(‘data-email-id’)

Самое интересное — это использование функции .data().
В версии 1.4.3 data() научилось получать наши атрибуты data-* вот таким образом:

   var action = $(selector).data(‘action’); // close

Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:


  <div id="superid" data-foo-bar="123"></div>

 &nbsp $('#superid').data('fooBar'); // вернет 123


Один минус (а может и не минус) — это то, что в data() сохранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data('fooBar') увидим наше старое значение.
Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:

    var baz = 150;
    $(selector).data('fooBar', baz).attr('data-foo-bar', baz);


Хотя, если вам не нужно отслеживать код в, например, фаербаге, то можно и не обновлять .attr(), так как он влияет только на “визуальное” отображение.

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

ЗЫ:


Интересно, кто нибудь пробовал хранить в атрибутах json? :)
Хотя это, пожалуй, в ненормальное программирование.

ЗЫЫ:


Многие говорят про функцию jQuery.data(elem, key, [value])
Кто не знает, эта функция отличается от $(selector).data(key, [value])
Она позволяет привязывать данные к DOM-элементам любым объектам, а не к jQuery объектам. Да, она работает на 60% быстрей, но вот data-* атрибуты она не получает.

ЗЫЫЫ:


trijin: Не упомянуто что $(selector).data() — вернет объект со всеми data-* свойствами элемента.
Tags:
Hubs:
+21
Comments 82
Comments Comments 82

Articles