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

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

Цепочки методов строятся на принципе возврата объекта u() из методов библиотеки, что позволяет сразу вызывать следующий метод после предыдущего.

u('div')
  .addClass('highlight')
  .attr('data-active', 'true')
  .text('Обновленный текст');

В этом примере u('div') возвращает объект Umbrella, содержащий все <div> на странице, после чего последовательно применяются методы addClass, attr и text.

Методы, возвращающие объект для цепочек

Не все методы Umbrella возвращают объект, пригодный для цепочек. Основные методы, поддерживающие цепочки:

  • addClass(className) — добавляет класс ко всем выбранным элементам.
  • removeClass(className) — удаляет класс.
  • toggleClass(className) — переключает наличие класса.
  • attr(attributeName, value) — устанавливает значение атрибута.
  • css(propertyName, value) — применяет CSS-стиль.
  • text(content) — устанавливает текстовое содержимое.
  • html(content) — задает HTML-содержимое.
  • append(content) — добавляет дочерний элемент.
  • prepend(content) — добавляет элемент в начало.
  • show() / hide() — управление видимостью элементов.

Пример комбинирования:

u('.menu-item')
  .addClass('active')
  .css('color', 'red')
  .attr('data-selected', '1');

Здесь один вызов u() позволяет одновременно обновить класс, стиль и атрибут для всех .menu-item.

Вложенные выборки и фильтрация элементов

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

  • find(selector) — поиск потомков внутри выбранных элементов.
  • children() — получение непосредственных дочерних элементов.
  • parent() / parents() — доступ к родительским элементам.
  • filter(selectorOrFunction) — фильтрация элементов по селектору или условию.
  • first() / last() — выбор первого или последнего элемента.

Пример:

u('.container')
  .find('p')
  .filter(function(el) {
    return el.textContent.includes('важно');
  })
  .addClass('highlight');

В этом примере сначала выбираются все <p> внутри .container, затем фильтруются те, которые содержат слово «важно», и к ним применяется класс highlight.

Цепочки событий

Umbrella позволяет навешивать обработчики событий с сохранением цепочки:

u('button')
  .on('click', function() {
    console.log('Нажата кнопка');
  })
  .css('background-color', 'blue');

Метод on возвращает объект Umbrella, что позволяет продолжать цепочку, например, изменяя стили кнопки сразу после назначения обработчика.

Дополнительные методы для работы с событиями:

  • off(eventType) — удаление обработчиков событий.
  • trigger(eventType) — программное вызов события.

Использование анимаций в цепочках

Umbrella JS поддерживает базовые анимации с помощью методов show(), hide(), fadeIn(), fadeOut(). Все они возвращают объект Umbrella, что делает их совместимыми с цепочками:

u('.notification')
  .fadeIn(500)
  .css('color', 'green')
  .delay(2000)
  .fadeOut(500);

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

Практические советы по построению цепочек

  1. Минимизировать выборку DOM: всегда пытаться выбрать элементы один раз и применять к ним всю последовательность действий.
  2. Использовать фильтры до модификаций: чтобы избежать ненужных изменений элементов, сначала фильтруйте набор, затем применяйте методы.
  3. Смешивать модификации и события: благодаря цепочкам можно одновременно задавать стили и назначать обработчики событий без повторного вызова u().
  4. Читать цепочки сверху вниз: логика выполняется строго по порядку вызовов. Любой метод, который не возвращает объект Umbrella (например, html() без аргумента для чтения содержимого), разрывает цепочку.

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

u('.card')
  .addClass('active')
  .find('img')
    .css('border', '2px solid red')
    .parent()
  .find('h3')
    .text('Обновленный заголовок')
  .end()
  .on('click', function() {
    u(this).toggleClass('selected');
  });
  • .addClass('active') — активируем карточку.
  • .find('img') — находим изображение внутри карточки.
  • .css('border', ...) — задаем рамку изображению.
  • .parent() — возвращаемся к карточке.
  • .find('h3') — выбираем заголовок и обновляем текст.
  • .end() — возвращаемся к исходному набору .card.
  • .on('click', ...) — навешиваем обработчик на все карточки.

Использование метода end() важно для возвращения к предыдущему набору элементов при работе с вложенными выборками.

Цепочки методов в Umbrella JS обеспечивают чистый и компактный синтаксис, сокращая количество повторных выборок DOM и делая код более читаемым и поддерживаемым. Правильное комбинирование фильтров, модификаций, событий и анимаций позволяет создавать мощные интерфейсы с минимальным количеством кода.

Оглавление