Цепочка вызовов (chaining)

Dom7 — это легковесная библиотека для работы с DOM, активно используемая во фреймворке Framework7. Одной из ключевых особенностей является поддержка цепочек вызовов (method chaining), которая позволяет выполнять несколько операций над элементами DOM последовательно, без повторного обращения к объекту выборки. Цепочка вызовов повышает читаемость кода и сокращает количество временных переменных.

$$('div.item')
  .addClass('active')
  .css('color', 'red')
  .attr('data-status', '1');

В этом примере к элементам с классом item последовательно применяются методы addClass, css и attr. Каждый метод возвращает объект Dom7, что позволяет продолжать цепочку.

Принцип работы chaining

Dom7 строится по принципу фасада над массивом элементов. Любая выборка $$('селектор') возвращает объект, который похож на массив:

  • Доступ к элементам через индекс: $$('div')[0].
  • Методы обработки коллекции применяются к каждому элементу.
  • Большинство методов возвращают тот же объект Dom7, что и делает chaining возможным.

Методы можно разделить на три категории с точки зрения возвращаемого значения:

  1. Методы, возвращающие Dom7 для цепочки: addClass(), removeClass(), css(), attr(), html(), append(), prepend(), on(), off(). Использование этих методов не прерывает цепочку.

  2. Методы, возвращающие данные о элементах: css('color'), attr('id'), width(), height(), index(). Эти методы возвращают конкретное значение, а не объект Dom7, поэтому цепочка завершается.

  3. Методы для навигации по DOM: parent(), children(), siblings(), next(), prev(). Эти методы возвращают новый объект Dom7 с выбранными элементами, что позволяет продолжить цепочку.

Примеры комплексных цепочек

Изменение стилей и атрибутов нескольких элементов

$$('.card')
  .css({
    border: '1px solid #ccc',
    padding: '10px'
  })
  .attr('data-active', 'true')
  .addClass('highlighted');

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

Добавление событий и манипуляция DOM

$$('button.toggle')
  .on('click', function () {
    $$(this).closest('.panel').toggleClass('open');
  })
  .css('cursor', 'pointer');

Здесь on() возвращает объект Dom7, что позволяет сразу применить метод css(). Элементы остаются доступными для дальнейшей обработки.

Навигация и манипуляция соседними элементами

$$('.item.active')
  .next()
  .addClass('next-item')
  .siblings()
  .removeClass('highlight');

Сначала выбирается следующий элемент после .item.active, затем к нему применяется класс next-item, после чего с помощью siblings() можно обработать остальные элементы на том же уровне DOM.

Создание цепочек с пользовательскими методами

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

Dom7.prototype.toggleVisibility = function () {
  return this.each(function (el) {
    if (el.style.display === 'none') el.style.display = '';
    else el.style.display = 'none';
  });
};

$$('.menu-item')
  .toggleVisibility()
  .addClass('processed');

Метод toggleVisibility применяет действие к каждому элементу и возвращает объект Dom7, что позволяет продолжать цепочку вызовов.

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

  1. Начинать с выборки элементов через $$('селектор').
  2. Группировать операции по смыслу: стили, атрибуты, события.
  3. Завершать цепочку методами, которые возвращают данные, если нужно получить результат для дальнейшей логики.
  4. Использовать навигацию (parent, children, siblings) внутри цепочки, чтобы работать с элементами без повторного вызова селектора.
  5. Не перегружать цепочки слишком большим количеством методов, чтобы код оставался читаемым.

Метод each как часть цепочки

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

$$('.list-item')
  .each(function (el, index) {
    el.textContent = `Элемент ${index + 1}`;
  })
  .addClass('numbered');

Использование each особенно полезно для сложной логики, которая не может быть реализована стандартными методами Dom7.

Преимущества chaining в Dom7

  • Компактность кода: сокращается количество временных переменных и повторных выборок.
  • Читаемость и логическая структура: последовательность действий над элементами видна как единый поток.
  • Производительность: выборка DOM происходит один раз, методы применяются к уже найденным элементам.

Chaining в Dom7 — это не просто удобный синтаксис, а фундаментальный механизм, позволяющий строить гибкие, структурированные и легко поддерживаемые сценарии работы с DOM.

Оглавление