Проверка существования элементов

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

Выражение cash(selector) возвращает коллекцию, поведение которой во многом напоминает jQuery. Важным аспектом является то, что пустая коллекция не вызывает ошибку при вызове методов, а просто не выполняет действие. Это позволяет писать цепочки, не опасаясь исключений при отсутствии элементов.

Пример безопасного вызова:

cash('.item').addClass('active');

Если элементов с классом .item не существует, метод addClass отработает без эффекта.

Проверка через свойство length

Основное средство проверки существования — свойство length. Возвращается целое число, показывающее, сколько элементов нашлось по селектору.

const items = cash('.item');

if (items.length > 0) {
  // элементы существуют
}

В контексте Cash не используется специальный метод вроде exists(), поэтому length остаётся ключевым индикатором. Любая цепочка может быть прервана логической проверкой.

Проверка в цепочках

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

const panel = cash('#panel');

panel.length && panel.css('display', 'block');

Подобная конструкция избегает создания дополнительных временных переменных и сохраняет выразительность кода.

Проверка через методы фильтрации

Некоторые операции внутренне выполняют фильтрацию и могут служить опосредованной проверкой. Например, метод find возвращает новую коллекцию. Если искомые ноды отсутствуют, коллекция будет пустой.

const result = cash('#container').find('.child');

if (result.length) {
  // .child найден внутри #container
}

Подход важен при работе с вложенными компонентами и шаблонами, где возможно временное отсутствие узлов.

Проверка существования перед манипуляциями

При изменении структуры DOM безопаснее сначала убедиться, что целевая коллекция не пуста. Особенно это касается операций вставки, замены и удаления.

const target = cash('.target');

if (target.length) {
  target.remove();
}

Метод remove не вызовет ошибок и без проверки, однако явная проверка повышает читаемость и дисциплину кода в образовательном контексте.

Проверка в асинхронных сценариях

При работе с асинхронными процессами (AJAX, Fetch, динамические рендеры) важно повторно проверять существование, поскольку DOM может измениться между вызовами. Cash не кэширует структурные данные, поэтому повторный вызов cash(selector) всегда отражает текущее состояние дерева.

fetch('/data.json')
  .then(() => {
    const box = cash('.box');
    if (box.length) box.addClass('loaded');
  });

Асинхронные проверки особенно полезны при обновлении интерфейса без перезагрузки страницы.

Проверка при обработке событий

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

cash(document).on('click', '.btn', function () {
  const panel = cash('.panel');
  if (panel.length) panel.toggleClass('opened');
});

Делегирование позволяет избежать ошибок, связанных с отсутствием .btn на момент назначения обработчика.

Проверка в условиях условного рендера

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

const section = cash('#section');

section.length && section.text('Готово');

Стиль лаконичен и хорошо сочетается с функциональными конструкциями.

Проверка многоэлементных коллекций

length не только подтверждает существование элементов, но и позволяет понять масштаб воздействия. При работе с группами нод стоит учитывать, что методы Cash применяются ко всем найденным элементам.

const items = cash('.item');

if (items.length > 1) {
  items.addClass('grouped');
}

Реакция на количество найденных узлов полезна для компонентных интерфейсов.

Проверка перед получением данных из элементов

Методы чтения (text, html, attr, val) возвращают значение только первого элемента. При отсутствии элементов возвращается undefined. Это делает проверку перед чтением более предсказуемой.

const value = cash('input[name="email"]').val();

if (value !== undefined) {
  // значение существует
}

Такой подход исключает неоднозначность при работе с формами.

Итоговый паттерн

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

Оглавление