Изменения между версиями

Библиотека Muuri постоянно развивается, и каждая новая версия приносит изменения, которые могут влиять на функциональность, производительность и API. Рассмотрим ключевые моменты, которые разработчик должен учитывать при обновлении с одной версии на другую.


Улучшения производительности

  • Оптимизация рендеринга сетки В новых версиях переработан алгоритм перерасчёта позиций элементов при анимации и сортировке. Это снижает нагрузку на браузер при работе с большим количеством элементов. Рекомендация: при работе с сетками более 200–300 элементов заметно сокращается время отклика и плавность анимации повышается.

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


Изменения в API

  • Переименование некоторых методов и опций

    • Метод refreshItems() остался, но его поведение уточнено: теперь он может принимать фильтр, позволяющий обновлять только определённые элементы сетки.
    • Опция dragEnabled теперь поддерживает динамическое включение и отключение через сеттер, что упрощает управление интерактивностью.
  • Новые события Появились события layoutStart и layoutEnd, которые сигнализируют о начале и завершении анимации сетки. Они позволяют точно синхронизировать сторонние действия с изменениями сетки.


Работа с анимациями

  • Улучшенная интерполяция Алгоритм расчёта движения элементов стал более предсказуемым, особенно при масштабировании и изменении размеров элементов.

  • Поддержка пользовательских анимаций Добавлен API animate(), который позволяет задавать кастомные функции анимации для отдельных элементов или всей сетки без вмешательства в внутренние механизмы Muuri.


Совместимость и устаревшие функции

  • Удаление deprecated методов Методы hide() и show() теперь считаются устаревшими. Для управления видимостью рекомендуется использовать опции фильтрации через filter() и CSS-классы.

  • Изменения в настройках drag Ранее жестко задававшиеся параметры dragSort, dragAxis и dragContainer теперь более гибкие и могут задаваться как функции, возвращающие значения динамически. Это особенно удобно при адаптивном дизайне.


Изменения в обработке фильтров и сортировки

  • Фильтры теперь возвращают массив элементов Функция filter() больше не изменяет внутреннее состояние сетки напрямую, а возвращает отфильтрованные элементы. Для применения фильтрации к сетке используется метод show() вместе с результатами фильтра.

  • Сортировка с кастомными функциями sort() поддерживает сложные функции сравнения, включая сортировку по нескольким критериям, без необходимости вручную пересчитывать позиции элементов.


Совместимость с мобильными устройствами

  • Обновлённая поддержка touch-событий В новых версиях Muuri улучшена работа drag-and-drop на сенсорных экранах. Используется более точный расчёт позиции пальца, что уменьшает дрожание и «проскальзывание» элементов при перетаскивании.

  • Оптимизация тач-анимаций Анимации теперь адаптированы под частоту кадров мобильных устройств, что повышает плавность даже при слабом железе.


Новые возможности кастомизации

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

  • Динамическая настройка размеров элементов Элементы могут автоматически подстраиваться под доступное пространство, что упрощает создание адаптивных сеток без ручного перерасчёта размеров.


Итоговые рекомендации при обновлении

  1. Проверять устаревшие методы и заменить их на новые аналоги.
  2. Пересмотреть настройки drag и фильтров, особенно если используется адаптивный или динамический контент.
  3. Тестировать анимации и производительность на мобильных устройствах.
  4. Использовать новые события layoutStart и layoutEnd для синхронизации сторонних эффектов.

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