Статические методы

Статические методы в библиотеке Muuri предоставляют инструменты для работы с элементами сетки, манипуляции коллекциями и управления событиями без необходимости создавать отдельный экземпляр сетки. Они являются частью самого конструктора Muuri и позволяют выполнять операции глобально или на уровне всех элементов, независимо от конкретной сетки.

Создание коллекции элементов

Метод Muuri.get используется для получения экземпляра сетки по DOM-элементу или селектору. Он не создает новую сетку, а возвращает существующую, если она была ранее инициализирована:

const gridElement = document.querySelector('.grid');
const gridInstance = Muuri.get(gridElement);
  • Если передан DOM-элемент, метод вернет объект сетки, связанный с этим элементом.
  • Если сетка с данным элементом не существует, будет возвращено undefined.
  • Позволяет работать с уже созданными сетками без повторной инициализации.

Муури и управление всеми элементами

Статические методы предоставляют возможности работы с элементами и их коллекциями глобально:

  • Muuri.create — создание новой сетки на указанном элементе. В отличие от обычного конструктора, позволяет сразу задать параметры конфигурации.
const grid = Muuri.create(document.querySelector('.grid'), {
  dragEnabled: true,
  layoutDuration: 400,
});
  • Muuri.destroyAll — разрушение всех сеток на странице. Полезно при динамическом обновлении контента:
Muuri.destroyAll();
  • Muuri.refreshAll — обновление размеров и позиций всех элементов всех сеток. Используется при изменении DOM или стилей, влияющих на размер элементов.
Muuri.refreshAll();

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

Элементы сетки в Muuri представляют собой отдельные объекты, которые можно получить и манипулировать ими с помощью статических методов:

  • Muuri.getItem — возвращает объект элемента по DOM-узлу:
const itemElement = document.querySelector('.item');
const itemInstance = Muuri.getItem(itemElement);
  • Muuri.getItems — возвращает массив объектов всех элементов сетки, что удобно для перебора или фильтрации:
const allItems = grid.getItems(); 
const activeItems = allItems.filter(item => item.isActive());
  • Muuri.filter — фильтрация элементов без удаления их из сетки:
grid.filter(item => item.getElement().classList.contains('visible'));

Манипуляции с сетками на глобальном уровне

Использование статических методов Muuri упрощает работу с несколькими сетками на одной странице:

  • Muuri.on и Muuri.off — подписка и отписка на глобальные события. Позволяет реагировать на создание или разрушение сеток, изменения элементов и другие события без привязки к конкретному экземпляру.
Muuri.on('add', event => {
  console.log('Добавлен новый элемент:', event.item);
});
  • Muuri.once — подписка на одноразовое событие. Автоматически отписывает обработчик после срабатывания.
Muuri.once('layoutEnd', () => {
  console.log('Первое завершение перестановки элементов');
});

Применение статики для кастомизации поведения

Статические методы позволяют интегрировать Muuri в сложные интерфейсы, где необходимо контролировать сразу несколько сеток:

  1. Объединение сеток Можно получить элементы из разных сеток и объединить их в одну коллекцию для одновременной сортировки или фильтрации.
const gridAItems = Muuri.get(document.querySelector('#gridA')).getItems();
const gridBItems = Muuri.get(document.querySelector('#gridB')).getItems();
const combinedItems = gridAItems.concat(gridBItems);
  1. Массовое обновление элементов После изменения размеров или контента элементов статические методы позволяют обновить всю страницу без индивидуальных вызовов refresh для каждой сетки.
Muuri.refreshAll();
  1. Глобальная подписка на события Используется, когда требуется логирование действий пользователя или аналитика, не привязанная к конкретной сетке.
Muuri.on('move', event => {
  console.log('Элемент перемещен:', event.item.getElement());
});

Важные нюансы

  • Статические методы не заменяют экземпляры сетки, а лишь предоставляют глобальные инструменты для управления и получения объектов.
  • Методы вроде refreshAll и destroyAll действуют на все сетки на странице, поэтому их использование требует понимания контекста.
  • Использование Muuri.get и Muuri.getItem позволяет избегать повторной инициализации сеток или элементов, что повышает производительность в динамических интерфейсах.

Статические методы Muuri являются мощным инструментом для централизованного управления сетками и элементами, позволяя создавать сложные, интерактивные интерфейсы без необходимости вручную отслеживать каждый экземпляр сетки. Их правильное применение обеспечивает масштабируемость, удобство и стабильность работы динамических элементов на странице.

Оглавление