Константы и перечисления

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

Основные типы констант

  1. Направления сортировки Для сортировки элементов в сетке используются константы:

    const { SORT_ORDER_ASCENDING, SORT_ORDER_DESCENDING } = Muuri;
    • SORT_ORDER_ASCENDING — сортировка по возрастанию.
    • SORT_ORDER_DESCENDING — сортировка по убыванию.

    Эти константы позволяют избежать ошибок при передаче строковых значений напрямую и делают код более читаемым.

  1. Состояния элементов

    Каждый элемент Muuri может находиться в определённом состоянии. Для работы с состояниями используются константы:

    const { VISIBLE, HIDDEN, REMOVED } = Muuri;
    • VISIBLE — элемент видим в сетке.
    • HIDDEN — элемент скрыт, но остаётся в DOM.
    • REMOVED — элемент удалён из сетки и DOM.

    Использование этих констант важно при фильтрации или обновлении элементов через методы show(), hide(), remove().

  1. Типы анимации

    Muuri поддерживает несколько типов анимации, задаваемых через константы:

    const { ANIMATION_MOVE, ANIMATION_SCALE, ANIMATION_OPACITY } = Muuri;
    • ANIMATION_MOVE — перемещение элементов.
    • ANIMATION_SCALE — масштабирование элементов.
    • ANIMATION_OPACITY — изменение прозрачности.

    При комбинировании этих констант можно создавать комплексные эффекты анимации для плавного отображения сетки.

Перечисления событий

События Muuri обозначаются как строки, хранящиеся в виде констант для удобства и предотвращения ошибок опечатки:

const { EVENT_MOVE, EVENT_REMOVE, EVENT_DRAG_START, EVENT_DRAG_END } = Muuri;
  • EVENT_MOVE — срабатывает при перемещении элемента.
  • EVENT_REMOVE — элемент удалён.
  • EVENT_DRAG_START — начало перетаскивания элемента.
  • EVENT_DRAG_END — завершение перетаскивания элемента.

Подписка на события осуществляется через метод on():

grid.on(EVENT_MOVE, (item) => {
  console.log('Элемент перемещён:', item);
});

Использование констант вместо строк напрямую гарантирует корректную работу обработчиков при обновлениях библиотеки.

Примеры практического применения

  1. Сортировка элементов по возрастанию:
grid.sort('title', { order: Muuri.SORT_ORDER_ASCENDING });
  1. Фильтрация видимых элементов:
grid.filter(item => item.getElement().classList.contains('active') ? Muuri.VISIBLE : Muuri.HIDDEN);
  1. Комбинированная анимация:
grid.synchronize().then(() => {
  grid.layout(true, {
    duration: 400,
    easing: 'ease-in-out',
    queue: true,
    layoutOnAnimationEnd: true
  });
});

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

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

Сводная таблица основных констант Muuri

Категория Константы Описание
Сортировка SORT_ORDER_ASCENDING, SORT_ORDER_DESCENDING Направление сортировки элементов
Состояние элементов VISIBLE, HIDDEN, REMOVED Текущее состояние элемента
Анимация ANIMATION_MOVE, ANIMATION_SCALE, ANIMATION_OPACITY Тип анимации при изменении позиции или стиля
События EVENT_MOVE, EVENT_REMOVE, EVENT_DRAG_START, EVENT_DRAG_END Перечисление событий сетки

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

Оглавление