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

Библиотека Cash предоставляет удобный и компактный API для работы с DOM, сохраняя многие концепции jQuery, но в современном, легковесном формате. Один из наиболее часто используемых инструментов — работа с data-атрибутами, которые позволяют хранить пользовательские данные прямо в HTML-элементах и безопасно взаимодействовать с ними через JavaScript.

Основы data-атрибутов

data-атрибуты в HTML имеют вид data-ключ="значение". Например:

<div id="product" data-id="123" data-category="books"></div>

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

В Cash доступ к этим атрибутам реализован через метод .data(). Он служит для получения и установки значений.

Получение данных

Для чтения значения data-атрибута используется:

const product = $('#product');
const productId = product.data('id'); // 123
const category = product.data('category'); // books

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

  • Если значение можно преобразовать в число или логический тип (true/false), Cash выполнит автоматическое приведение.
  • Атрибуты, не существующие на элементе, возвращают undefined.

Установка данных

Для записи значений можно передать ключ и значение:

product.data('price', 499);
product.data('available', true);

После этого соответствующие data-атрибуты доступны через .data():

console.log(product.data('price')); // 499
console.log(product.data('available')); // true

При этом фактический HTML-атрибут data-price не изменяется автоматически — изменения происходят в внутреннем кэше Cash. Для синхронизации с HTML используется метод .attr():

product.attr('data-price', 499);

Работа с объектами и сложными данными

Cash поддерживает сохранение объектов в data:

product.data('info', { weight: '1kg', color: 'red' });
const info = product.data('info');
console.log(info.weight); // 1kg

Это удобно для хранения структурированных данных без сериализации в JSON вручную. Но при использовании .attr() объекты сохраняются как строка [object Object], поэтому для отображения в HTML их нужно преобразовывать через JSON.stringify().

Множественные элементы

Методы .data() работают с коллекциями элементов:

$('.item').data('selected', false);

Это установит значение selected для всех элементов с классом item. При чтении:

const firstSelected = $('.item').first().data('selected');

будет возвращено значение первого элемента коллекции.

Удаление данных

Чтобы удалить данные из внутреннего кэша Cash, используется метод .removeData():

product.removeData('available');
console.log(product.data('available')); // undefined

Это не изменяет HTML-атрибут, но полностью очищает сохранённое значение в памяти.

Связь с HTML-атрибутами

При первом вызове .data() Cash считывает значения data-атрибутов и сохраняет их в кэш. Последующие операции работают только с этим кэшем, что обеспечивает высокую производительность. Поэтому:

product.attr('data-id', 456);
console.log(product.data('id')); // всё ещё 123, кэш не обновлён

Для обновления кэша можно использовать:

product.removeData('id');
console.log(product.data('id')); // теперь 456, прочитано из HTML

Полезные приёмы

  • Хранение состояния элементов, например выбран/не выбран.
  • Передача данных между событиями и обработчиками.
  • Создание динамических интерфейсов с уникальными идентификаторами элементов.

Советы по использованию

  • Избегать хранения больших объектов в HTML-атрибутах — использовать .data() для кэша.
  • Для совместимости с другими библиотеками следить за синхронизацией с HTML через .attr().
  • При массовом изменении данных использовать коллекции Cash для оптимизации производительности.

Работа с data-атрибутами в Cash сочетает простоту jQuery и современную лёгкость, позволяя управлять пользовательскими данными прямо в DOM без лишней нагрузки на память и DOM-структуру.

Оглавление