Работа с data-атрибутами

Data-атрибуты представляют собой специальный способ хранения пользовательских данных непосредственно в HTML-элементах. Они позволяют связывать произвольную информацию с DOM-узлами без необходимости вмешательства в структуру документа или использование глобальных переменных. В Zepto.js работа с data-атрибутами реализована через удобные методы .data() и .removeData(), которые упрощают чтение, запись и удаление данных.

Чтение данных с помощью .data()

Метод .data() позволяет получать значения data-атрибутов элементов. Data-атрибуты в HTML записываются с префиксом data-, например:

<div id="item" data-id="42" data-name="sample"></div>

Чтобы получить значение атрибута data-id, используется следующий синтаксис:

var id = $('#item').data('id'); // 42
var name = $('#item').data('name'); // "sample"

Особенности чтения:

  • Zepto автоматически преобразует значения в соответствующие типы JavaScript, например "true" → true, "42" → 42.
  • Если атрибут отсутствует, метод возвращает undefined.
  • Метод может быть вызван на коллекции элементов, возвращая значение первого найденного элемента.

Запись данных с помощью .data()

Метод .data() также поддерживает запись данных. Существует два способа:

  1. По отдельности для одного атрибута:
$('#item').data('category', 'books');
console.log($('#item').data('category')); // "books"
  1. С передачей объекта для множественной записи:
$('#item').data({
    author: 'John Doe',
    year: 2026
});
console.log($('#item').data('author')); // "John Doe"
console.log($('#item').data('year')); // 2026

Особенности записи:

  • При присвоении значений через .data() Zepto сохраняет их в собственном внутреннем кэше, не изменяя напрямую HTML-атрибут data-*. Это обеспечивает быстрый доступ и предотвращает постоянные операции над DOM.
  • Для синхронизации с HTML можно использовать метод .attr('data-*', value), но чаще достаточно работы через .data().

Удаление данных с помощью .removeData()

Метод .removeData() позволяет удалять данные, ранее добавленные через .data():

$('#item').removeData('category');
console.log($('#item').data('category')); // undefined

Можно удалить сразу несколько значений, передав массив ключей:

$('#item').removeData(['author', 'year']);

Преобразование имен атрибутов

Data-атрибуты в HTML используют дефисы (data-user-id), а в JavaScript при работе через .data() применяются верблюжный стиль (userId):

<div id="user" data-user-id="101" data-user-name="Alice"></div>
var userId = $('#user').data('userId'); // 101
var userName = $('#user').data('userName'); // "Alice"

Zepto автоматически конвертирует имена атрибутов при доступе, что позволяет избегать ошибок при взаимодействии с DOM.

Работа с коллекциями элементов

Методы .data() и .removeData() применяются к набору элементов. При чтении значения возвращается из первого элемента коллекции, при записи данные добавляются ко всем выбранным элементам:

<div class="item" data-count="1"></div>
<div class="item" data-count="2"></div>
$('.item').data('active', true); // добавляет всем элементам data-active = true
console.log($('.item').eq(0).data('active')); // true
console.log($('.item').eq(1).data('active')); // true

Взаимодействие с атрибутами HTML

Zepto позволяет также работать напрямую с HTML-атрибутами data-* через метод .attr(). Разница между .attr() и .data():

  • .attr('data-*') читает/записывает значение напрямую в HTML.
  • .data() использует внутренний кэш, что быстрее и безопаснее для сложных данных (объектов, массивов).

Пример:

$('#item').attr('data-role', 'admin');
console.log($('#item').data('role')); // "admin"
$('#item').data('role', 'editor');
console.log($('#item').attr('data-role')); // "admin" — HTML не изменился

Для обновления HTML через .data() необходимо явно использовать .attr():

$('#item').attr('data-role', $('#item').data('role'));

Практические рекомендации

  • Использовать .data() для временного хранения объектов и состояния элементов.
  • Использовать .attr('data-*') для значений, которые должны быть видимы в HTML и доступны без JavaScript.
  • Для сложных данных можно хранить объекты и массивы, так как Zepto кэширует их в память без привязки к строковому представлению.

Обработка событий с data-атрибутами

Часто значения из data-атрибутов используются в обработчиках событий. Например:

$('.btn').on('click', function() {
    var action = $(this).data('action');
    if (action === 'delete') {
        $(this).closest('.item').remove();
    }
});

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

Итоговые ключевые моменты

  • .data() для чтения и записи данных с внутренним кэшем.
  • .removeData() для удаления данных.
  • Имена атрибутов конвертируются из дефисной записи в camelCase.
  • Работа с коллекциями элементов распространяет операции на все выбранные узлы.
  • Отличие .data() и .attr('data-*') заключается в хранении данных в памяти и прямой записи в HTML соответственно.
  • Использование data-атрибутов повышает гибкость кода и снижает зависимость от глобальных переменных.
Оглавление