Совместимость методов

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

Цепочка методов (Chaining)

Umbrella JS поддерживает цепочку вызовов, что позволяет применять несколько методов к одному набору элементов. Каждый метод возвращает объект u(), что обеспечивает совместимость с последующими вызовами:

u('.item')
  .addClass('active')
  .attr('data-role', 'button')
  .css('color', 'red');

Важный момент: не все методы возвращают объект u(). Например, методы получения значений (.html(), .text(), .val()) возвращают строку или значение, поэтому цепочка после них невозможна:

let content = u('.item').html(); // Возвращает HTML, дальше цепочка невозможна

Совместимость с методами обхода DOM

Umbrella JS предоставляет методы для обхода элементов:

  • .parent()
  • .children()
  • .siblings()
  • .closest()
  • .find()

Эти методы возвращают новый объект u(), поэтому они полностью совместимы с большинством других методов Umbrella JS:

u('.item')
  .parent()
  .addClass('highlight')
  .children()
  .css('background', 'yellow');

Важно учитывать, что методы типа .parent() возвращают первый уровень родителей, а .closest() — ближайший подходящий элемент по селектору. Попытка применять методы, ожидающие коллекцию элементов, к одному элементу не вызывает ошибки, но может дать неожиданный результат, если не контролировать выборку.

Совместимость с методами работы с атрибутами и свойствами

Методы .attr(), .removeAttr(), .prop(), .removeProp() полностью совместимы с большинством методов изменения стилей и классов, поскольку всегда возвращают объект u():

u('input[type="text"]')
  .attr('placeholder', 'Введите текст')
  .addClass('input-active')
  .css('border', '1px solid blue');

Методы получения атрибутов (.attr('name')) возвращают строку или null, поэтому их нельзя использовать в цепочке с методами модификации элементов без создания новой выборки:

let nameAttr = u('input').attr('name'); // Получает значение
// u('input').attr('name').addClass('active'); <- ошибка

Совместимость с методами работы с классами

Методы работы с классами:

  • .addClass()
  • .removeClass()
  • .toggleClass()
  • .hasClass()

возвращают объект u(), кроме .hasClass(), который возвращает булево значение. Это означает, что .hasClass() нарушает цепочку:

u('.item').addClass('visible').removeClass('hidden'); // Работает
let hasVisible = u('.item').hasClass('visible'); // true/false

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

if (u('.item').hasClass('visible')) {
  u('.item').css('color', 'green');
}

Методы работы с содержимым

Методы .html(), .text(), .val():

  • В режиме установки значения возвращают объект u(), совместимы с цепочкой.
  • В режиме получения значения возвращают строку или число, нарушая цепочку.

Пример установки:

u('#title').html('<strong>Заголовок</strong>').css('color', 'blue');

Пример получения:

let value = u('#input').val(); // Возвращает значение input

Совместимость с методами событий

Методы .on(), .off(), .trigger() возвращают объект u(), что позволяет комбинировать их с другими методами:

u('.button')
  .on('click', () => console.log('Клик'))
  .addClass('clickable')
  .css('cursor', 'pointer');

Особенность: .on() поддерживает множественные события через пробел, а .off() — аналогично, что упрощает совместное использование с другими методами изменения элементов.

Методы удаления элементов

  • .remove()
  • .empty()

возвращают объект u(), однако после удаления элементы больше не присутствуют в DOM, поэтому последующие методы, ожидающие выборку этих элементов, не оказывают эффекта:

u('.item').remove().addClass('deleted'); // .addClass() не будет работать

Совместимость с нативным JavaScript

Umbrella JS полностью совместим с нативными методами Node, Element и NodeList при получении элементов:

u('.item')[0].innerHTML = 'Новый контент'; // Использование нативного DOM
u('.item').each(el => el.style.color = 'red'); // Применение нативного свойства

Метод .each() возвращает объект u() и может использоваться для обхода коллекции перед применением любых других методов.

Основные принципы совместимости

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

Совместимость методов Umbrella JS строится на простом принципе: каждый метод, возвращающий объект u(), интегрируется в цепочку, а методы получения данных — возвращают конкретное значение и требуют отдельной обработки. Это делает библиотеку легкой, но требует внимательного подхода при построении сложных цепочек вызовов.

Оглавление