Управление состоянием

Zepto.js — лёгкая библиотека, предоставляющая упрощённый интерфейс для работы с DOM, событиями и анимациями, сохраняя при этом знакомый синтаксис jQuery. Управление состоянием в контексте Zepto связано с возможностью хранить, изменять и отслеживать данные, привязанные к DOM-элементам, а также управлять их видимостью и поведением.

Хранение данных в элементах

Zepto предоставляет метод data() для привязки пользовательских данных к элементам:

var $elem = $('#myElement');
$elem.data('key', 'value');  // Устанавливает данные
console.log($elem.data('key')); // Получает данные

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

  • Данные хранятся в памяти, а не в атрибутах HTML, что позволяет избежать загрязнения DOM.
  • Поддерживается чтение нескольких значений сразу через объект:
$elem.data({
  name: 'John',
  age: 30
});
  • Для удаления данных используется метод removeData:
$elem.removeData('age');

Управление видимостью элементов

Методы show(), hide() и toggle() позволяют изменять состояние видимости элементов:

$elem.hide();   // Скрывает элемент
$elem.show();   // Отображает элемент
$elem.toggle(); // Переключает видимость

Ключевые моменты:

  • toggle() может принимать булево значение для явного управления видимостью:
$elem.toggle(true);  // Показывает
$elem.toggle(false); // Скрывает
  • Для анимации используется метод fadeIn, fadeOut или fadeToggle с указанием времени:
$elem.fadeIn(400);
$elem.fadeOut(400);
$elem.fadeToggle(400);

Работа с атрибутами состояния

Атрибуты элементов могут использоваться для хранения состояния, например, checked, disabled или selected. Zepto упрощает их чтение и изменение через методы attr() и prop():

$elem.attr('disabled', true); // Добавляет атрибут disabled
console.log($elem.attr('disabled')); // true

$checkbox.prop('checked', true); // Устанавливает состояние checkbox
console.log($checkbox.prop('checked')); // true

Разница между attr() и prop() важна: attr() работает с HTML-атрибутами, а prop() — с текущими свойствами DOM.

Классы как индикаторы состояния

Классы используются для отражения состояния элементов и управления их стилями. Методы addClass(), removeClass() и toggleClass() позволяют гибко изменять состояние:

$elem.addClass('active');    // Добавляет класс
$elem.removeClass('active'); // Удаляет класс
$elem.toggleClass('active'); // Переключает класс

Дополнительные возможности:

  • toggleClass может принимать булево значение для явного управления:
$elem.toggleClass('active', true);  // Добавляет
$elem.toggleClass('active', false); // Убирает
  • Можно передавать несколько классов через пробел:
$elem.addClass('highlight selected');

События и управление состоянием

События в Zepto позволяют изменять состояние элементов при взаимодействии. Методы on() и off() заменяют устаревшие bind() и unbind():

$elem.on('click', function() {
  $(this).toggleClass('active');
});

Важные моменты:

  • Делегирование событий через селекторы позволяет управлять состоянием динамически добавленных элементов:
$(document).on('click', '.btn', function() {
  $(this).toggleClass('selected');
});
  • Методы trigger() и triggerHandler() позволяют программно изменять состояние:
$elem.trigger('click'); // Вызывает обработчик клика

Управление размерами и позициями

Состояние элементов часто связано с их размерами и расположением. Методы width(), height(), offset() и position() предоставляют доступ к этим параметрам:

var w = $elem.width();       // Ширина без padding
var h = $elem.height();      // Высота без padding
var pos = $elem.offset();    // Положение относительно документа
var relPos = $elem.position(); // Положение относительно родителя

Изменение размеров влияет на визуальное состояние и может использоваться в динамических интерфейсах:

$elem.width(200);
$elem.height(100);

Анимация и состояние

Методы animate() и fade*() позволяют плавно изменять состояние визуальных свойств:

$elem.animate({ width: '300px', opacity: 0.5 }, 500);
  • Параметры анимации включают объект свойств, длительность и функцию обратного вызова.
  • Анимация может отражать переход состояния между «активным» и «неактивным».

Синхронизация состояния с данными

Комбинация data(), классов и атрибутов позволяет управлять состоянием элементов и синхронизировать его с внутренними данными приложения:

$elem.data('enabled', true)
     .toggleClass('active', $elem.data('enabled'))
     .prop('disabled', !$elem.data('enabled'));

Такой подход обеспечивает централизованное управление состоянием без прямой зависимости от структуры DOM.

Управление состоянием в Zepto строится на сочетании методов для работы с данными, атрибутами, классами и событиями, что позволяет создавать динамичные и интерактивные интерфейсы с минимальным количеством кода и высокой читаемостью.

Оглавление