Цепочки вызовов методов

В библиотеке Masonry большинство методов возвращают экземпляр самого объекта Masonry. Благодаря этому возможно использовать цепочки вызовов методов (method chaining) — стиль программирования, при котором несколько операций выполняются последовательно в одной инструкции.

Цепочка вызовов позволяет:

  • уменьшить количество промежуточных переменных
  • сделать код компактнее
  • выразить последовательность действий над одним объектом
  • сгруппировать логически связанные операции

Фактически каждый вызов метода возвращает тот же объект Masonry, позволяя немедленно вызвать следующий метод.

Базовый пример цепочки

После создания экземпляра Masonry можно вызывать несколько методов подряд:

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

msnry.layout()
     .reloadItems()
     .layout();

В данном фрагменте:

  1. layout() выполняет первичную раскладку элементов.
  2. reloadItems() перечитывает элементы сетки.
  3. повторный layout() пересчитывает позиции элементов.

Каждый метод возвращает объект msnry, что позволяет продолжать цепочку.

Как работает механизм chaining

Цепочка возможна благодаря тому, что методы Masonry внутри своей реализации возвращают this.

Упрощённая схема метода:

Masonry.prototype.layout = function() {
  this._layoutItems(this.items);
  return this;
};

this в данном контексте — текущий экземпляр Masonry. Возврат этого значения позволяет продолжить цепочку вызовов.

Преимущества цепочек вызовов

Компактность кода

Без chaining:

msnry.reloadItems();
msnry.layout();
msnry.layoutItems(msnry.items);

С chaining:

msnry.reloadItems()
     .layout()
     .layoutItems(msnry.items);

Логическая последовательность операций

Цепочка показывает, какие действия выполняются над объектом в порядке выполнения:

msnry.appended(newItems)
     .layout();

Сначала добавляются элементы, затем выполняется перерасчёт сетки.

Часто используемые методы в цепочках

Наиболее часто объединяются в цепочку следующие методы Masonry:

Метод Назначение
reloadItems() перечитывает элементы сетки
layout() выполняет перерасчёт расположения
layoutItems() раскладывает указанные элементы
appended() добавляет новые элементы
prepended() вставляет элементы в начало
remove() удаляет элементы

Пример:

msnry.appended(newElems)
     .layoutItems(newElems)
     .layout();

Последовательность действий:

  1. новые элементы добавляются в сетку
  2. для них вычисляются позиции
  3. выполняется общий перерасчёт

Цепочки при динамической загрузке элементов

Одно из основных применений chaining — работа с динамически добавляемыми элементами.

Пример загрузки карточек:

fetch('/data/items.json')
  .then(response => response.json())
  .then(data => {

    var elems = data.map(item => {
      var div = document.createElement('div');
      div.className = 'grid-item';
      div.textContent = item.title;
      return div;
    });

    grid.append(...elems);

    msnry.appended(elems)
         .layout();
  });

Последовательность операций:

  1. элементы создаются динамически
  2. добавляются в DOM
  3. Masonry уведомляется о появлении новых элементов
  4. выполняется перерасчёт сетки

Комбинирование с другими библиотеками

Цепочки часто используются совместно с jQuery, поскольку jQuery также активно применяет chaining.

Пример интеграции:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

$grid.append(newItems)
     .masonry('appended', newItems)
     .masonry('layout');

В данном случае цепочка включает как методы jQuery, так и вызовы Masonry через API плагина.

Цепочки после удаления элементов

Удаление элементов также удобно организовывать через цепочки:

msnry.remove(itemsToDelete)
     .layout();

Этапы выполнения:

  1. элементы удаляются из сетки Masonry
  2. выполняется новый расчёт расположения

Такой подход предотвращает появление пустых промежутков в сетке.

Читаемость длинных цепочек

При большом количестве вызовов код рекомендуется переносить на новые строки:

msnry
  .reloadItems()
  .layoutItems(msnry.items)
  .layout();

Такой стиль делает структуру цепочки более понятной.

Ограничения chaining

Не все методы подходят для цепочек. Метод не должен возвращать значение, отличное от экземпляра Masonry.

Пример метода, который не используется в цепочках:

var items = msnry.getItemElements();

getItemElements() возвращает массив DOM-элементов, а не объект Masonry. После такого вызова цепочка прерывается.

Комбинирование цепочек с переменными

Иногда удобнее сохранить промежуточный результат:

var items = msnry.getItemElements();

msnry.layoutItems(items)
     .layout();

Здесь:

  1. сначала получаются элементы сетки
  2. затем выполняется цепочка методов Masonry

Практический пример полной цепочки операций

msnry
  .reloadItems()
  .layout()
  .appended(newElems)
  .layoutItems(newElems)
  .layout();

Выполняемые действия:

  1. перечитываются элементы сетки
  2. выполняется базовый layout
  3. добавляются новые элементы
  4. для них рассчитываются позиции
  5. выполняется финальный перерасчёт всей сетки

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

Архитектурная роль chaining в Masonry

Цепочки вызовов являются частью архитектурной философии библиотеки. Основные принципы:

  • объектно-ориентированное API
  • операции над одним экземпляром
  • последовательная обработка layout-операций

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

Оглавление