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

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

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

  1. Цепочки методов Практически все методы Cash, которые возвращают объект Cash, могут использоваться в цепочках. Это позволяет писать компактный и последовательный код без создания дополнительных переменных.

    $('#menu')
  .addClass('active')
  .find('li')
  .hide();

    Важно понимать, что методы, возвращающие данные, а не объект Cash, разрывают цепочку. К таким методам относятся html(), text(), val(), css() при чтении значений.

  2. Методы чтения и записи Многие методы Cash имеют перегрузку для чтения и записи данных. Например:

    • html()

      const content = $('#container').html(); // Чтение
$('#container').html('<p>Новый контент</p>'); // Запись

    • val()

      const inputValue = $('input').val(); // Получение значения
$('input').val('Пример'); // Установка значения

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

  3. Методы выборки элементов Методы find(), children(), parent(), closest() возвращают новый объект Cash, состоящий из соответствующих элементов. Это означает, что после вызова этих методов можно применять практически любые методы для работы с DOM.

    $('.list')
  .children('li')
  .addClass('highlight')
  .end() // возвращает к исходной выборке .list
  .css('border', '1px solid black');

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

Особенности работы с классами и атрибутами

Методы, работающие с классами (addClass, removeClass, toggleClass) и атрибутами (attr, prop, removeAttr) возвращают объект Cash при записи значения и поддерживают цепочки с любыми другими методами, изменяющими DOM.

$('#button')
  .addClass('active')
  .attr('disabled', true)
  .css('background', 'gray');

При чтении атрибутов (attr('data-id')) возвращается строка или null, что разрывает цепочку. Это важная особенность для понимания совместимости методов: любые операции, которые возвращают примитив, не могут быть продолжены цепочкой без оборачивания результата обратно в Cash.

Манипуляции с контентом и стилями

  • Методы html() и text() При записи этих методов они полностью заменяют содержимое элементов, возвращая объект Cash для дальнейшей цепочки:

    $('.card')
  .html('<p>Новый текст</p>')
  .addClass('updated');

  • Методы CSS

    • Чтение: css('color') возвращает строку.
    • Запись: css('color', 'red') возвращает объект Cash. Это позволяет применять несколько стилей в цепочке:
    $('p')
  .css('color', 'blue')
  .css('font-weight', 'bold');

    Для установки нескольких свойств сразу используется объект:

    $('p').css({
  color: 'green',
  'font-size': '16px'
});

События и их совместимость

Методы для работы с событиями (on, off, trigger) полностью совместимы с цепочками, так как при назначении событий возвращается объект Cash:

$('#input')
  .on('focus', () => console.log('Focus'))
  .on('blur', () => console.log('Blur'))
  .addClass('active');

Метод trigger возвращает объект Cash, что позволяет комбинировать его с другими манипуляциями DOM:

$('#submit')
  .trigger('click')
  .removeClass('disabled');

Методы фильтрации и проверки

Методы, возвращающие подмножества элементов (filter, not, is, has), поддерживают совместимость следующим образом:

  • filter и not возвращают объект Cash для продолжения цепочки.
  • is возвращает логическое значение, разрывая цепочку.
  • has возвращает объект Cash с элементами, которые содержат указанный дочерний элемент.
$('.item')
  .filter('.active')
  .css('border', '1px solid blue');

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

Методы each и map имеют особенности совместимости:

  • each всегда возвращает исходный объект Cash, что позволяет продолжать цепочку:
$('li').each((index, el) => {
  $(el).addClass(`item-${index}`);
}).hide();
  • map возвращает массив, разрывая цепочку, поэтому для дальнейших операций с DOM требуется снова обернуть результат в Cash:
const ids = $('li').map((i, el) => el.id); // массив
const elements = $(ids.map(id => document.getElementById(id))); // возвращаем Cash

Итоговые правила совместимости

  1. Методы записи (DOM, классы, CSS, события) возвращают объект Cash и поддерживают цепочку.
  2. Методы чтения (атрибуты, значения, текст, html при чтении) возвращают примитив и разрывают цепочку.
  3. Методы фильтрации и выборки возвращают объект Cash, за исключением логических проверок (is).
  4. Для продолжения цепочек после методов, возвращающих массивы или примитивы, требуется обернуть результат обратно в Cash.
  5. Метод end() позволяет возвращаться к предыдущей выборке, сохраняя гибкость цепочек.

Эффективная работа с Cash строится на понимании этих правил, что обеспечивает предсказуемость поведения методов и совместимость при создании сложных цепочек DOM-операций.

Оглавление