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

Bliss.js — это компактная библиотека для работы с DOM, которая строится вокруг концепции цепочек вызовов. Цепочки позволяют последовательно применять методы к одному элементу или группе элементов, сокращая код и повышая его читаемость.

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

Bliss('#myElement')
    .addClass('active')
    .setText('Привет')
    .on('click', () => console.log('Клик!'));

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

Работа с коллекциями элементов

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

Bliss('.btn')
    .addClass('highlight')
    .on('mouseenter', e => e.target.style.color = 'red');

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

Методы для управления классами и атрибутами

Bliss.js предоставляет методы для работы с классами (addClass, removeClass, toggleClass) и атрибутами (attr, removeAttr, data). Их использование в цепочках выглядит естественно:

Bliss('#menu')
    .addClass('visible')
    .attr('data-open', 'true')
    .toggleClass('expanded');

Методы attr и data могут быть вызваны с объектом для массового обновления атрибутов:

Bliss('input[type="text"]')
    .attr({placeholder: 'Введите текст', required: true});

Работа с содержимым элементов

Для изменения текста, HTML или значений полей доступны методы setText, html, val. Они также возвращают объект Bliss, позволяя продолжать цепочку:

Bliss('#content')
    .html('<p>Обновлённый контент</p>')
    .addClass('updated')
    .on('transitionend', () => console.log('Анимация завершена'));

Метод html перезаписывает содержимое элемента, а setText работает только с текстом, предотвращая интерпретацию HTML.

Манипуляции с DOM

Bliss упрощает добавление, удаление и вставку элементов через методы append, prepend, before, after, remove. Их использование в цепочках делает код компактным и последовательным:

Bliss('#list')
    .append('<li>Новый элемент</li>')
    .prepend('<li>Первый элемент</li>')
    .find('li')
    .addClass('item');

Методы find и children возвращают коллекцию элементов Bliss, позволяя создавать вложенные цепочки:

Bliss('#menu')
    .find('li')
    .addClass('menu-item')
    .children('a')
    .on('click', e => e.preventDefault());

Обработчики событий в цепочках

Методы on, off, once полностью поддерживают цепочки. Можно добавлять несколько событий к одной коллекции, продолжая манипулировать элементами:

Bliss('.btn')
    .on('click', e => console.log('Клик'))
    .on('mouseenter', e => e.target.style.background = 'yellow');

Также можно комбинировать с другими методами:

Bliss('#form')
    .on('submit', e => e.preventDefault())
    .addClass('submitted')
    .find('input')
    .val('');

Асинхронные операции и цепочки

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

Bliss('#box')
    .addClass('animate')
    .on('transitionend', () => {
        Bliss('#box')
            .setText('Анимация завершена')
            .removeClass('animate');
    });

Важно помнить, что асинхронные вызовы разрывают основную цепочку, и для продолжения необходимо снова обернуть элемент в Bliss.

Использование кастомных функций

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

Bliss('.card')
    .each(el => el.style.border = '1px solid black')
    .addClass('styled');

Метод возвращает исходный объект Bliss, что делает его удобным для включения в цепочки вместе с другими методами.

Резюме принципов chaining

  • Любой метод Bliss возвращает объект Bliss для продолжения цепочки.
  • Методы автоматически работают с коллекциями элементов.
  • Асинхронные операции требуют повторного обертывания в Bliss.
  • Комбинирование методов управления классами, атрибутами, содержимым и событиями создаёт компактный и понятный код.

Цепочки вызовов в Bliss.js обеспечивают логическую последовательность действий над элементами DOM, сокращая код и делая его структурированным, без необходимости в многочисленных временных переменных или отдельных вызовах.

Оглавление