Работа с коллекциями нулевой длины

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

Создание коллекции нулевой длины

Коллекция нулевой длины формируется, когда селектор не находит ни одного соответствующего элемента в DOM:

var emptyCollection = Dom7('.non-existent-class');
console.log(emptyCollection.length); // 0

Несмотря на отсутствие элементов, объект emptyCollection является полноценным экземпляром Dom7. Он поддерживает все методы библиотеки, что позволяет безопасно применять операции даже на пустых коллекциях.

Особенности методов при пустой коллекции

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

Примеры поведения:

var empty = Dom7('.non-existent');

// Добавление класса
empty.addClass('highlight'); // Ничего не произойдет, ошибок нет

// Получение текста
var text = empty.text(); // Вернет пустую строку ''

// Итерация
empty.each(function(el, index) {
  console.log(el); // Этот код не выполнится
});

Такое поведение позволяет писать цепочки методов, не проверяя вручную длину коллекции на каждом шаге:

Dom7('.non-existent')
  .addClass('active')
  .css('color', 'red')
  .text('Hello'); // безопасно, даже если коллекция пустая

Проверка пустой коллекции

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

var items = Dom7('.item');

if (items.length === 0) {
  console.log('Элементы не найдены');
} else {
  items.addClass('found');
}

Для большинства операций такая проверка не обязательна, но она важна при работе с DOM-структурами, где отсутствие элементов требует альтернативной логики.

Цепочки методов и пустые коллекции

Особенность Dom7 в том, что методы, возвращающие коллекцию, всегда возвращают Dom7-объект, даже если коллекция пуста. Это позволяет строить цепочки без дополнительных условий:

Dom7('.non-existent')
  .removeClass('old')
  .addClass('new')
  .find('.child')
  .css('display', 'none');
  • removeClass и addClass на пустой коллекции не вызовут ошибок.
  • find на пустой коллекции вернет также пустую коллекцию.
  • css на пустой коллекции просто не изменит элементы.

Таким образом, цепочки методов безопасны и предсказуемы, даже когда селектор не находит элементов.

Методы, возвращающие конкретные значения

Некоторые методы Dom7 возвращают не коллекцию, а конкретные значения, и их поведение на пустой коллекции отличается:

Метод Пустая коллекция возвращает
html() undefined
text() ''
val() undefined
outerWidth() undefined
outerHeight() undefined

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

Преобразование пустой коллекции в массив

Dom7 коллекции можно преобразовать в массив с помощью стандартного метода toArray():

var emptyArray = Dom7('.non-existent').toArray();
console.log(emptyArray); // []

Это особенно полезно для интеграции с нативными JavaScript-методами, которые не принимают коллекции Dom7 напрямую.

Использование с событиями

Подписка на события с пустой коллекцией также безопасна:

Dom7('.non-existent').on('click', function() {
  console.log('Нажатие произошло');
});

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

Резюме особенностей коллекций нулевой длины

  • Пустая коллекция — полноценный Dom7-объект.
  • Методы, возвращающие коллекцию, всегда возвращают Dom7, даже если коллекция пуста.
  • Методы, возвращающие значение, могут возвращать undefined или пустую строку.
  • Цепочки методов безопасны на пустых коллекциях.
  • Проверка length необходима только при условной логике.
  • Подписка на события безопасна, обработчики не вызываются.
  • Преобразование в массив через toArray() возвращает пустой массив.

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

Оглавление