Устаревшие методы и свойства

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

Методы работы с фильтрацией

isotopeInstance.arrange({ filter: selector }) — основной современный способ фильтрации элементов. Ранее применялся метод $('#container').isotope('filter', selector), который сейчас считается устаревшим. Его использование не рекомендуется по следующим причинам:

  • Он привязан к устаревшему синтаксису jQuery.
  • Не учитывает новые возможности анимации и динамического добавления элементов.
  • Может создавать конфликты при совместном использовании с плагинами и фреймворками.

Замена: следует использовать объект конфигурации arrange, где ключ filter принимает строку селектора, функцию фильтрации или массив элементов.

// Устаревший подход
$('#container').isotope('filter', '.active');

// Современный подход
isotopeInstance.arrange({ filter: '.active' });

Методы сортировки

Методы сортировки также претерпели изменения. Ранее активно применялись вызовы вида:

$('#container').isotope('sortBy', 'name');
$('#container').isotope('updateSortData', $('.item'));

В новых версиях библиотеки рекомендуется использовать объект конфигурации sortBy внутри метода arrange:

isotopeInstance.arrange({
  sortBy: 'name',
  sortAscending: true
});

Ключевые отличия:

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

Свойства элементов

Старые свойства объектов элементов, такие как isotopeItem.position или isotopeItem.isShown, перестали быть публичными и прямой доступ к ним считается небезопасным. Их использование может привести к непредсказуемому поведению при обновлении Isotope.

Рекомендация: использовать методы публичного API:

  • getItemElements() — возвращает массив DOM-элементов, находящихся под контролем Isotope.
  • layout() — инициирует перерасчет позиций элементов без изменения фильтров или сортировки.
  • updateSortData(items) — обновляет данные сортировки для новых или изменённых элементов.

Прямой доступ к внутренним свойствам типа _isLayoutInited или _transitionDuration нарушает инкапсуляцию и может сломать будущие версии.

События и их устаревшие формы

События layoutComplete, arrangeComplete, removeComplete ранее регистрировались через jQuery:

$('#container').on('layoutComplete', function(event, laidOutItems) { ... });

В последних версиях рекомендуется использовать нативные слушатели событий, привязанные к экземпляру Isotope:

isotopeInstance.on('layoutComplete', function(laidOutItems) { ... });

Особенности устаревших событий:

  • jQuery-события часто теряли контекст при динамическом добавлении элементов.
  • Нативные события позволяют более точно отслеживать изменения и избегать утечек памяти.

Методы добавления и удаления элементов

Устаревший подход:

$('#container').isotope('insert', $newItem);
$('#container').isotope('remove', $oldItem);

Современный способ:

isotopeInstance.appended($newItem);
isotopeInstance.removed($oldItem);
isotopeInstance.layout();

Различия:

  • insert больше не поддерживается напрямую. Использование appended обеспечивает корректную анимацию появления новых элементов.
  • Метод removed удаляет элементы из внутренней коллекции и автоматически обновляет позиции оставшихся.
  • После удаления рекомендуется явно вызывать layout() для перерасчёта сетки, особенно если элементы изменяют общий размер контейнера.

Ключевые моменты перехода с устаревших методов

  1. Фильтрация и сортировка — использовать только arrange({ filter, sortBy, sortAscending }).
  2. Работа с элементами — напрямую манипулировать DOM-элементами через публичные методы (getItemElements, appended, removed), избегая внутренних свойств.
  3. События — перейти на нативные слушатели событий экземпляра Isotope.
  4. Обновление данных сортировки — не вызывать вручную устаревшие методы, использовать updateSortData только с явными элементами.

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

Оглавление