Атрибут data и работа с ним

В HTML5 введены пользовательские атрибуты данных с префиксом data-. Они позволяют хранить произвольную информацию в элементах DOM без нарушения семантики HTML. В JavaScript доступ к этим данным можно получать через стандартное свойство dataset, а Umbrella JS предоставляет для этого удобные методы с лаконичным синтаксисом.

Чтение данных с элементов

Метод .data() является основным способом работы с атрибутами data-* в Umbrella JS. Если вызвать его без аргументов, возвращается объект всех пользовательских данных элемента:

u('.item').data();

Если элемент содержит:

<div class="item" data-id="42" data-role="admin"></div>

Выражение выше вернёт объект:

{ id: "42", role: "admin" }

Можно получить конкретное значение, передав имя атрибута в .data():

let role = u('.item').data('role'); // "admin"

Umbrella JS автоматически преобразует имена атрибутов из kebab-case в camelCase. Например:

<div data-user-id="101"></div>
u('div').data('userId'); // "101"

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

Метод .data(key, value) позволяет записывать данные в элемент. Если элемент уже содержит атрибут data-*, значение обновляется; если нет — создаётся новый атрибут.

u('.item').data('status', 'active');

Результатом в HTML будет:

<div class="item" data-id="42" data-role="admin" data-status="active"></div>

Можно передавать объект для массовой установки:

u('.item').data({
    level: 5,
    group: 'users'
});

Umbrella JS добавит соответствующие data-* атрибуты:

<div class="item" data-id="42" data-role="admin" data-status="active" data-level="5" data-group="users"></div>

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

Удаление атрибутов данных осуществляется методом .removeData() с указанием имени:

u('.item').removeData('status');

Если вызвать без аргументов, будут удалены все пользовательские атрибуты data-*:

u('.item').removeData();

Особенности работы с массивами и объектами

Umbrella JS хранит данные в памяти, а не только в DOM. При работе с объектами или массивами важно помнить:

  1. Модификация объекта через .data() не изменяет исходный атрибут data-*, пока не вызвать .data(key, value) с конкретным ключом.
  2. При повторном вызове .data() возвращается уже “живой” объект, который можно изменять напрямую.

Пример:

u('.item').data('config', { theme: 'dark', fontSize: 14 });

let config = u('.item').data('config');
config.theme = 'light';

// Чтобы сохранить в DOM:
u('.item').data('config', config);

Интеграция с событиями

Данные, хранящиеся через .data(), удобно использовать вместе с событиями Umbrella JS:

u('.btn').on('click', function() {
    let action = u(this).data('action');
    console.log('Выполняется действие:', action);
});

Если HTML содержит:

<button class="btn" data-action="save">Сохранить</button>

При клике в консоль выведется:

Выполняется действие: save

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

Сравнение с attr('data-*')

Umbrella JS позволяет также использовать стандартные методы .attr('data-*') для чтения и записи. Основные различия:

Метод Тип данных Автоматическое преобразование имен Поддержка объектов/массивов
.data() JS-значения (string, number, объект) Да, kebab-case → camelCase Да
.attr('data-*') Всегда строка Нет Нет, только JSON вручную

Использование .data() делает код более чистым и удобным для работы с структурированными данными.

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

  • Использовать .data() для хранения состояния UI, параметров конфигурации и идентификаторов элементов.
  • Для массивов и объектов всегда оперировать копиями и явно сохранять изменения через .data(key, value).
  • При массовой установке данных передавать объект в .data({...}) вместо множественных вызовов.
  • Удалять ненужные данные через .removeData() для освобождения памяти, особенно в динамических интерфейсах.

Использование атрибутов data-* в сочетании с методами Umbrella JS обеспечивает легкий и структурированный доступ к пользовательским данным, упрощает код и делает взаимодействие с DOM более предсказуемым и безопасным.

Оглавление