on и off

Библиотека Packery предоставляет мощный API для работы с сетками элементов, включая возможность отслеживания событий и динамического управления ими через методы on и off. Эти методы позволяют подписываться на события, происходящие в процессе работы Packery, и при необходимости отключать обработчики.

Метод on

Метод on используется для регистрации обработчика на определённое событие. Синтаксис выглядит следующим образом:

packeryInstance.on(eventName, handlerFunction);

  • eventName – строка с названием события. Packery поддерживает несколько событий, например:

    • layoutComplete – срабатывает после завершения расстановки элементов;
    • dragItemPositioned – срабатывает после перемещения элемента, если используется Draggabilly;
    • removeComplete – после удаления элементов;
    • fitComplete – после применения метода fit к элементу.

  • handlerFunction – функция-обработчик события. Она может принимать аргументы, которые Packery передаёт в момент вызова события.

Пример использования:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Элементы выложены:', laidOutItems.length);
});

pckry.on('dragItemPositioned', function(item) {
  console.log('Элемент перемещён:', item.element);
});

Ключевые моменты использования on:

  • Можно подписаться на несколько событий одновременно, вызвав on несколько раз с разными названиями событий.
  • Обработчик можно определить как обычную функцию или стрелочную, учитывая особенности this внутри функции.
  • eventName поддерживает только события, описанные в документации Packery; пользовательские события можно создавать через внешние инструменты, но Packery их напрямую не поддерживает.

Метод off

Метод off удаляет ранее зарегистрированные обработчики событий. Это важно для предотвращения утечек памяти и контроля за поведением сетки при динамическом изменении контента.

Синтаксис:

packeryInstance.off(eventName, handlerFunction);
  • eventName – название события, с которого нужно снять обработчик. Если аргумент опущен, удаляются все обработчики всех событий.
  • handlerFunction – ссылка на функцию, которую нужно удалить. Если опущен, удаляются все обработчики данного события.

Пример:

function logLayout(items) {
  console.log('Сетка выложена:', items.length);
}

pckry.on('layoutComplete', logLayout);

// Позже необходимо отключить обработчик
pckry.off('layoutComplete', logLayout);

Особенности метода off:

  • Метод требует точную ссылку на функцию-обработчик, переданную в on. Анонимные функции нельзя удалить напрямую.
  • Можно отключать все обработчики сразу, вызвав pckry.off() без аргументов.
  • Использование off вместе с динамическим созданием элементов позволяет эффективно управлять событиями при добавлении и удалении элементов.

Практическое применение on и off

  1. Отслеживание динамических изменений: При добавлении новых элементов в сетку можно подписываться на layoutComplete, чтобы сразу применять дополнительные стили или анимации:

    var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);

pckry.appended(newItem);

pckry.on('layoutComplete', function(items) {
  items.forEach(item => {
    item.element.style.backgroundColor = '#f0f0f0';
  });
});

  2. Взаимодействие с Draggabilly: Если элементы можно перетаскивать, dragItemPositioned позволит синхронизировать данные с сервером или обновлять позиции:

    pckry.on('dragItemPositioned', function(item) {
  saveItemPosition(item.element);
});

    Для отключения обработчика после завершения определённых действий:

    pckry.off('dragItemPositioned', saveItemPosition);

  3. Управление памятью при удалении элементов: При удалении элементов важно отключать обработчики, чтобы старые ссылки на элементы не сохранялись в памяти.

Рекомендации по использованию

  • Всегда хранить ссылки на функции-обработчики, если планируется их последующее удаление.
  • Использовать on для всех событий, где требуется реакция на изменение сетки или действий пользователя.
  • Применять off для очистки обработчиков при динамическом удалении элементов или при уничтожении экземпляра Packery:
pckry.destroy();
pckry.off();
  • Для сложных сеток с большим количеством элементов и частыми изменениями on и off помогают избежать накопления ненужных слушателей и замедления интерфейса.

Использование on и off в Packery обеспечивает гибкое управление событиями сетки и позволяет создавать динамичные, отзывчивые интерфейсы с точным контролем за поведением элементов.

Оглавление