Хуки и callbacks

В библиотеке Masonry для JavaScript хуки и callbacks играют ключевую роль в управлении поведением сетки и взаимодействием с элементами после их расположения. Они позволяют разработчику реагировать на события изменения DOM, завершения рендеринга и перестановки элементов.

Типы callbacks

Masonry предоставляет несколько встроенных callback-функций:

  1. onLayout Вызывается после завершения выполнения метода layout(). Используется для действий, которые должны выполняться после того, как Masonry перестроил сетку.

    var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});

msnry.on('layoutComplete', function(items) {
  console.log('Сетка обновлена. Количество элементов:', items.length);
});

    Параметр items — это массив DOM-элементов, которые были переставлены при последнем layout.

  2. onRemoveComplete Вызывается после того, как элементы были удалены из Masonry-сетки.

    msnry.on('removeComplete', function(removedItems) {
  console.log('Элементы удалены:', removedItems);
});

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

  3. onAddComplete Срабатывает после добавления новых элементов с последующим пересчетом расположения сетки.

    var newElements = document.querySelectorAll('.new-item');
msnry.appended(newElements);

msnry.on('layoutComplete', function() {
  console.log('Новые элементы добавлены и выровнены');
});

Хуки для событий

Masonry предоставляет следующие события, к которым можно привязать функции:

  • layoutComplete — вызывается после завершения layout всех элементов.
  • removeComplete — срабатывает после удаления элементов.
  • fitComplete — вызывается после того, как элементы были выровнены в соответствии с параметрами fitWidth или stamp.
  • appendComplete — срабатывает после добавления элементов через методы appended() или prepended().

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

msnry.on('layoutComplete', function(items) {
  console.log('layoutComplete:', items);
});

msnry.on('removeComplete', function(items) {
  console.log('removeComplete:', items);
});

msnry.on('fitComplete', function(items) {
  console.log('fitComplete:', items);
});

Асинхронная работа с callbacks

Callbacks в Masonry особенно полезны при работе с асинхронным контентом, например, изображениями. Для правильного выравнивания сетки часто используют imagesLoaded, чтобы дождаться полной загрузки изображений перед вызовом layout().

imagesLoaded('.grid', function() {
  msnry.layout();
});

В сочетании с callback layoutComplete можно выполнять дополнительные действия после завершения полной перестройки сетки:

imagesLoaded('.grid', function() {
  msnry.layout();
});

msnry.on('layoutComplete', function(items) {
  items.forEach(item => {
    item.style.opacity = 1;
  });
});

Передача пользовательских функций

Masonry позволяет передавать кастомные функции в качестве callback при работе с методами добавления и удаления элементов:

  • appended() и prepended() принимают массив элементов и могут использовать callback для последующей обработки:
var newItems = document.querySelectorAll('.new-item');
msnry.appended(newItems, function() {
  console.log('Новые элементы добавлены и выровнены через callback');
});
  • remove() также поддерживает callback для действий после удаления:
var itemsToRemove = document.querySelectorAll('.old-item');
msnry.remove(itemsToRemove, function() {
  console.log('Элементы удалены, callback выполнен');
});

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

  1. Минимизировать тяжелые операции в callbacks — выполнение ресурсоемких действий при каждом layoutComplete может замедлять работу интерфейса.
  2. Использовать debounce при динамическом добавлении элементов — при частом добавлении или удалении элементов рекомендуется ограничивать вызовы функций для оптимизации производительности.
  3. Следить за порядком событий — layoutComplete срабатывает после всех перестановок элементов, fitComplete — после применения параметров выравнивания.
  4. Комбинировать с imagesLoaded для изображений — особенно важно, если сетка содержит медленно загружаемые изображения, иначе layout будет некорректным.

Встроенные методы с callback-поддержкой

  • layout() — перестраивает сетку; можно использовать совместно с layoutComplete.
  • appended(items) — добавляет элементы и вызывает layout().
  • prepended(items) — вставляет элементы в начало сетки.
  • remove(items) — удаляет элементы с последующим callback.
  • stamp(element) — отмечает элемент, который должен быть учтен при выравнивании других элементов; может быть полезен совместно с layoutComplete.

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

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

imagesLoaded(grid, function() {
  msnry.layout();
});

msnry.on('layoutComplete', function(items) {
  items.forEach(el => el.classList.add('visible'));
});

document.querySelector('#add-item').addEventListener('click', function() {
  var newItem = document.createElement('div');
  newItem.className = 'grid-item';
  grid.appendChild(newItem);
  msnry.appended([newItem], function() {
    console.log('Добавлен новый элемент и выровнен');
  });
});

В этом примере демонстрируется сочетание хуков, callback и асинхронной загрузки изображений для плавного управления Masonry-сеткой.

Оглавление