Переиспользование конфигураций

В библиотеке Muuri конфигурация сетки (grid) и её элементов играет ключевую роль в управлении поведением и внешним видом. Повторное использование конфигураций позволяет стандартизировать настройки и снизить количество дублирующегося кода. Основными объектами, которые подлежат конфигурации, являются:

  • Grid options — параметры самой сетки.
  • Item options — параметры отдельных элементов сетки.
  • Drag and sort options — настройки перетаскивания и сортировки элементов.

Создание базовых конфигурационных объектов

Лучшей практикой является вынесение повторяющихся настроек в отдельные объекты:

const defaultGridOptions = {
  layout: {
    fillGaps: true,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
  },
  dragEnabled: true,
  dragSort: true,
  dragSortInterval: 50,
  dragContainer: document.body,
  layoutOnResize: 100
};

const defaultItemOptions = {
  visible: true,
  visibleStyles: {
    transform: 'scale(1)',
    opacity: 1
  },
  hiddenStyles: {
    transform: 'scale(0)',
    opacity: 0
  },
  showDuration: 400,
  hideDuration: 400
};

Использование таких объектов позволяет при создании сетки или элементов легко расширять и модифицировать конфигурацию:

const grid = new Muuri('.grid', {
  ...defaultGridOptions,
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  }
});

Расширение и переопределение конфигураций

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

const customGridOptions = {
  ...defaultGridOptions,
  dragEnabled: false,
  layout: {
    ...defaultGridOptions.layout,
    fillGaps: false
  }
};

const customGrid = new Muuri('.custom-grid', customGridOptions);

Здесь используется оператор расширения (...), который создаёт глубокую копию объекта и позволяет безопасно изменять отдельные свойства.

Конфигурации для Drag & Sort

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

const dragConfig = {
  dragEnabled: true,
  dragStartPredicate: {
    distance: 10,
    delay: 0
  },
  dragReleaseDuration: 300,
  dragSort: true
};

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

const gridA = new Muuri('.grid-a', {
  ...defaultGridOptions,
  ...dragConfig
});

const gridB = new Muuri('.grid-b', {
  ...defaultGridOptions,
  dragSort: false
});

Динамическое переиспользование конфигураций

Muuri позволяет изменять конфигурацию уже созданной сетки с помощью методов grid.setOptions() и item.set(). Это даёт возможность динамически адаптировать сетку без её пересоздания:

grid.setOptions({
  layout: { fillGaps: false },
  dragEnabled: false
});

grid.getItems().forEach(item => {
  item.set({ visible: false });
});

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

Конфигурации при создании новых элементов

При добавлении новых элементов в сетку через метод grid.add(), рекомендуется использовать базовые или кастомные конфигурации элементов:

const newItem = document.createElement('div');
newItem.classList.add('item');

grid.add(newItem, {
  ...defaultItemOptions,
  showDuration: 600
});

Такой подход обеспечивает одинаковое поведение всех элементов и упрощает управление их стилями и анимациями.

Секреты эффективного переиспользования

  1. Создавать отдельные объекты конфигураций для сетки, элементов и drag & sort.
  2. Использовать оператор расширения для частичного переопределения.
  3. Разделять статические и динамические настройки: статические — при создании сетки, динамические — через setOptions и item.set().
  4. Объединять конфигурации для нескольких сеток с помощью функции-обёртки:
function createGrid(selector, options = {}) {
  return new Muuri(selector, {
    ...defaultGridOptions,
    ...dragConfig,
    ...options
  });
}

const grid1 = createGrid('.grid1', { dragEnabled: false });
const grid2 = createGrid('.grid2', { layout: { fillGaps: false } });

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

Преимущества централизованной конфигурации

  • Уменьшение дублирования кода и ошибок при настройке.
  • Лёгкая поддержка и модификация глобальных параметров сетки и элементов.
  • Возможность масштабирования интерфейса с десятками сеток без хаотичных изменений.
  • Единообразие анимаций и поведения перетаскиваемых элементов.

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

Оглавление