Код-стайл и конвенции

При работе с библиотекой Muuri важно поддерживать чистую и предсказуемую структуру проекта. Основные рекомендации включают:

  • Разделение HTML, CSS и JS на отдельные файлы для повышения читаемости и удобства поддержки.
  • Создание отдельного файла для инициализации сетки Muuri (grid.js) с единой точкой входа для всех операций с сеткой.
  • Разделение логики на модули: один модуль отвечает за сортировку, другой — за фильтрацию, третий — за обработку событий.

Пример структуры проекта:

/project
 ├─ index.html
 ├─ css/
 │   └─ style.css
 └─ js/
     ├─ grid.js
     ├─ filter.js
     ├─ sort.js
     └─ events.js

Такой подход облегчает тестирование и рефакторинг кода.

Инициализация Muuri

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

Пример корректного стиля:

const gridOptions = {
  dragEnabled: true,
  layoutOnInit: true,
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  },
  layout: {
    rounding: false
  }
};

const grid = new Muuri('.grid', gridOptions);

Ключевые моменты:

  • dragEnabled — включение или отключение перетаскивания элементов.
  • layoutOnInit — автоматическая расстановка элементов при инициализации.
  • dragSortPredicate — настройки сортировки при перетаскивании.
  • layout.rounding — управление округлением координат для точного позиционирования.

Использование объекта gridOptions улучшает читаемость и упрощает поддержку кода при добавлении новых параметров.

Работа с элементами сетки

Все манипуляции с элементами должны происходить через API Muuri. Не рекомендуется напрямую изменять CSS-свойства элементов для перемещения или анимации, так как это нарушает внутреннюю логику сетки.

Примеры правильного использования методов:

// Добавление элементов в сетку
grid.add([element1, element2]);

// Удаление элементов
grid.remove([element3], { removeElements: true });

// Фильтрация элементов по классу
grid.filter(item => item.getElement().classList.contains('active'));

// Сортировка элементов по атрибуту data-order
grid.sort((a, b) => {
  return a.getElement().dataset.order - b.getElement().dataset.order;
});

Основные рекомендации:

  • Использовать getElement() для получения DOM-элемента внутри сетки.
  • Методы add, remove, filter, sort всегда должны работать с массивами элементов.
  • Изменение порядка или фильтрация должны сопровождаться вызовом grid.refreshItems() при необходимости обновления состояния сетки.

Обработка событий

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

Стиль обработки событий:

grid.on('dragStart', (item) => {
  console.log('Начало перетаскивания:', item.getElement());
});

grid.on('dragEnd', (item) => {
  console.log('Элемент отпущен:', item.getElement());
});

grid.on('layoutEnd', () => {
  console.log('Сетка перестроена');
});

Рекомендации по код-стайлу:

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

Код-стайл и читаемость

Для поддержания качества кода Muuri рекомендуется:

  • Консистентность отступов — 2 или 4 пробела на уровень вложенности.
  • Явные имена переменных — grid, items, filteredItems, sortedItems.
  • Использование констант для строковых значений и конфигурационных параметров.

Пример хорошей практики:

const DRAG_THRESHOLD = 50;

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSortPredicate: {
    threshold: DRAG_THRESHOLD,
    action: 'move'
  }
});
  • DRAG_THRESHOLD ясно показывает назначение числа, вместо использования магического значения 50 в коде.
  • Все настройки сгруппированы в конфигурационном объекте, что облегчает поддержку и изменение параметров.

Итоговая рекомендация по конвенциям

Muuri требует строгого соблюдения архитектурной структуры:

  1. Разделение логики сетки на модули.
  2. Использование конфигурационных объектов при инициализации.
  3. Манипуляция элементами только через API Muuri.
  4. Строгий и единообразный код-стайл: отступы, имена переменных, константы.
  5. Вынесение сложной логики обработчиков событий в отдельные функции.

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

Оглавление