Контекст выборки

Контекст выборки в Zepto играет роль прозрачного посредника между элементами DOM и функциями библиотеки. После вызова селектора ($()), результатом становится объект-коллекция, содержащий подходящие элементы. Коллекция обладает методами для манипуляции, навигации и обработки событий, при этом сохраняя необходимые связи с исходным документом.

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

Создание контекста и область поиска

Вызов $() может принимать второй аргумент — корень, внутри которого производится выборка:

$('.item', document.getElementById('sidebar'))

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

Структура коллекции

Коллекция Zepto ведет себя как массивоподобный объект: элементы индексируются целыми числами, длина хранится в свойстве length. Однако коллекция не является чистым массивом; это объект специального типа, расширенный методом $.fn, что дает доступ к библиотечным функциям:

var items = $('.item')
items.addClass('highlight')

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

Наследование контекста между методами

Большинство методов Zepto создают новый контекст, сохраняя логику цепочки:

$('.menu')
  .find('li')
  .eq(2)
  .addClass('active')

find() ограничивает контекст дочерними элементами, eq() выбирает конкретный элемент, а addClass() модифицирует уже точечный контекст. Каждый шаг работает с результатом предыдущего без повторной выборки от document.

Поиск и фильтрация

Контекст можно уточнять с помощью фильтрации:

$('.item').filter('.selected')

Здесь контекстом выступают только элементы .item, а фильтрация уменьшает коллекцию до тех, что соответствуют .selected. Метод not() действует противоположным образом. Такой механизм обеспечивает контроль над выборкой без повторного запуска селектора.

Контекст и работа с DOM

Контекст чувствителен к динамическим изменениям DOM. При добавлении элементов методами вроде append() или before() обновления контекста напрямую не происходит; коллекция остается прежней. Для получения актуального состояния выборка вызывается заново:

var list = $('ul')
list.append('<li>New</li>')
// list всё ещё содержит старые элементы, пока не вызвать $('ul li') заново

Такой подход подчеркивает, что контекст фиксируется на момент выборки.

Контекст и обход дерева

Методы вроде parent(), children(), siblings() и closest() позволяют перемещаться по дереву без изменения внешнего скопа. При вызове closest() контекст сужается к первому подходящему предку, что уменьшает необходимость ручного обхода DOM.

Контекст событий

При делегировании событий вторым аргументом выступает селектор, работающий в рамках контекста:

$('.list').on('click', 'li', function() {})

Событие навешивается на .list, но реакция происходит только при совпадении селектора li. Это снижает накладные расходы и исключает необходимость назначения обработчиков на каждую строку списка.

Выход за пределы контекста

Если требуется работа с глобальным документом, контекст можно игнорировать, вызвав $() без второго аргумента:

$(document).find('.modal')

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

Влияние контекста на производительность

Контекстное ограничение существенно ускоряет выборки и цепочки операций в условиях сложных интерфейсов. Вместо переобхода DOM достаточно сохранять минимально возможную область поиска. Это особенно видно при большом количестве вложенных узлов и часто обновляющихся списков.

Согласованность контекста

Все методы Zepto стремятся сохранять единообразие поведения коллекций. Возврат нового контекста вместо изменения старого снижает риск нежелательных побочных эффектов и делает цепочку действий предсказуемой. При этом контекст остается неизменным до явного вызова нового селектора.

Практическое значение

Использование контекста облегчает композицию операций, обеспечивает управляемость выборок и выделяет Zepto в направлении компактного и предельно функционального подхода к DOM. Через контекст решаются сразу три задачи: локализация выборки, ускорение поиска и удобство построения цепочек операций.