Расширение прототипа

В библиотеке Masonry расширение прототипа позволяет добавлять собственные методы и модифицировать поведение существующих функций, сохраняя при этом совместимость с ядром библиотеки. Masonry построен на объектно-ориентированной архитектуре, где каждый экземпляр является объектом с набором методов, доступных через прототип. Работа с прототипом дает возможность внедрять глобальные улучшения для всех экземпляров без дублирования кода.

Доступ к прототипу Masonry

Прототип Masonry можно расширять напрямую через свойство Masonry.prototype. Например:

Masonry.prototype.highlightFirstItem = function() {
  if (this.items.length > 0) {
    this.items[0].element.style.border = '2px solid red';
  }
};

В этом примере добавлен метод highlightFirstItem, который устанавливает рамку для первого элемента сетки. После этого любой экземпляр Masonry может использовать новый метод:

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

grid.highlightFirstItem();

Ключевое преимущество расширения прототипа — новые методы становятся доступными всем существующим и будущим экземплярам Masonry.

Перезапись существующих методов

Masonry позволяет переопределять внутренние методы, например layout или stamp, чтобы изменить логику расчета расположения элементов. Это делается через сохранение ссылки на оригинальный метод:

var originalLayout = Masonry.prototype.layout;

Masonry.prototype.layout = function() {
  console.log('Начало пользовательской раскладки');
  originalLayout.apply(this, arguments);
  console.log('Завершение пользовательской раскладки');
};

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

Добавление приватных вспомогательных методов

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

Masonry.prototype._calculateExtraSpacing = function() {
  return this.columnWidth * 0.1;
};

Метод _calculateExtraSpacing можно использовать внутри других методов прототипа для вычисления дополнительного отступа между элементами.

Модификация поведения событий

Masonry активно использует события (layoutComplete, removeComplete, imagesLoaded). Расширение прототипа позволяет добавлять обработку событий на уровне всех экземпляров:

Masonry.prototype._onLayoutComplete = function() {
  console.log('Сетка завершила перестановку элементов');
};

var originalBindEvents = Masonry.prototype.bindEvents;
Masonry.prototype.bindEvents = function() {
  originalBindEvents.apply(this, arguments);
  this.on('layoutComplete', this._onLayoutComplete.bind(this));
};

Такой подход позволяет внедрять глобальное логирование или анимацию при завершении перестановки элементов без изменения кода каждого конкретного экземпляра.

Использование миксинов

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

var animationMixin = {
  fadeInItems: function(duration) {
    this.items.forEach(item => {
      item.element.style.opacity = 0;
      item.element.style.transition = `opacity ${duration}ms`;
      setTimeout(() => item.element.style.opacity = 1, 50);
    });
  }
};

Object.assign(Masonry.prototype, animationMixin);

После применения миксина метод fadeInItems доступен на всех экземплярах Masonry, обеспечивая плавное появление элементов сетки.