Управление data-атрибутами

Bliss.js предоставляет компактный и удобный синтаксис для работы с HTML-элементами, включая возможность легко манипулировать data-* атрибутами. Эти атрибуты часто используются для хранения метаданных элементов без вмешательства в визуальное представление страницы. Bliss.js делает доступ к ним простым и интуитивным.

Получение значения data-атрибута

Для получения значения атрибута data-* используется метод data. Он автоматически преобразует имя атрибута в формат camelCase. Например, атрибут data-user-id становится userId.

// HTML: <div id="profile" data-user-id="42"></div>
var profile = Bliss('#profile');

// Получение значения
var userId = profile.data('userId'); // 42

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

  • Метод data возвращает строку, если атрибут существует.
  • Если атрибут отсутствует, возвращается undefined.
  • CamelCase автоматически упрощает работу с длинными именами атрибутов.

Установка значения data-атрибута

Для изменения или добавления нового data-* атрибута используется тот же метод data, но с двумя аргументами: имя атрибута и новое значение.

// Установка нового значения
profile.data('userId', 99);

// Создание нового атрибута
profile.data('userRole', 'admin');

// HTML будет: <div id="profile" data-user-id="99" data-user-role="admin"></div>

Важно:

  • Значение автоматически преобразуется в строку при установке.
  • Если имя атрибута содержит дефис, Bliss.js также корректно конвертирует его в camelCase.

Удаление data-атрибута

Удаление data-* атрибута производится через метод removeAttr с полным именем атрибута:

// Удаление атрибута data-user-id
profile.removeAttr('data-user-id');

// После удаления: <div id="profile" data-user-role="admin"></div>

Метод removeAttr работает со всеми атрибутами, но при работе с data-атрибутами следует использовать полное имя, включая data-.

Массовое управление data-атрибутами

Bliss.js позволяет оперировать с несколькими атрибутами одновременно, используя объект в методе data. Ключи объекта соответствуют camelCase именам data-атрибутов.

profile.data({
    userId: 101,
    userRole: 'editor',
    theme: 'dark'
});

// HTML: <div id="profile" data-user-id="101" data-user-role="editor" data-theme="dark"></div>

Преимущества:

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

Автоматическое приведение типов

Bliss.js может автоматически преобразовывать значения атрибутов к типам JavaScript при получении:

// HTML: <div id="settings" data-items="5" data-enabled="true"></div>
var settings = Bliss('#settings');

var items = settings.data('items'); // 5 (число)
var enabled = settings.data('enabled'); // true (булевое)

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

  • Значения true, false, null, числа и JSON объекты распознаются автоматически.
  • Если значение не может быть преобразовано, возвращается строка.

Работа с динамическими элементами

Bliss.js сохраняет актуальные данные при динамическом создании элементов через create или при добавлении через appendTo.

var newItem = Bliss.create('div', {
    data: { id: 200, type: 'widget' },
    text: 'Новый элемент'
});

newItem.appendTo('#container');

// HTML: <div data-id="200" data-type="widget">Новый элемент</div>

Метод create принимает объект data и автоматически выставляет соответствующие data-* атрибуты при генерации элемента.

Чтение всех data-атрибутов элемента

Bliss.js позволяет получить все data-атрибуты элемента сразу в виде объекта с camelCase ключами:

var allData = profile.data();

// Пример результата:
// { userId: 101, userRole: 'editor', theme: 'dark' }

Преимущества:

  • Удобно при необходимости сериализации или передачи данных на сервер.
  • Позволяет легко перебрать все метаданные без прямого обращения к DOM.

Связь с DOM dataset

Методы Bliss.js тесно интегрированы с нативным dataset:

console.log(profile.data('userRole')); // Аналогично profile.dataset.userRole
profile.data('theme', 'light'); // Аналогично profile.dataset.theme = 'light'

Bliss.js добавляет удобство: приведение типов, camelCase доступ и массовое обновление.

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

  • Использовать camelCase для обращения к data-атрибутам через data.
  • Для сложных объектов предпочтительно хранить JSON и использовать JSON.parse при необходимости.
  • Массовое обновление и получение всех data-атрибутов упрощает управление состоянием интерфейса.

Bliss.js превращает работу с data-* атрибутами в лаконичные и читаемые операции, сохраняя совместимость с нативным DOM API и добавляя удобные высокоуровневые возможности.

Оглавление