Библиотека Zepto предоставляет компактный и выразительный способ управлять наборами DOM-элементов. В основе лежит концепция коллекции, представляющей собой массивоподобный объект, над которым доступны методы выборки, фильтрации, обхода и модификации. Эта модель позволяет описывать целые группы узлов единым набором операций.
Основой формирования коллекции служит функция Zepto
(короткая форма $). Результатом вызова становится объект,
содержащий выбранные элементы в порядке их появления в документе.
Пример: $('.item') выбирает все элементы с классом
item и создаёт коллекцию.
Коллекции Zepto поддерживают обращение по индексу
(collection[0]), чтение длины
(collection.length) и итерацию стандартными средствами
JavaScript. Однако основной потенциал раскрывается через методы самой
библиотеки.
Метод each выполняет функцию обхода. Он вызывает
переданный коллбэк для каждого элемента коллекции, передавая в него
индекс и сам DOM-узел. Это позволяет применять императивные операции,
например изменение атрибутов или вычисление свойств стилей.
Метод map создаёт новый массив, возвращая результат
выполнения коллбэка для каждого элемента. В отличие от
each, результатом становится массив JavaScript, а не
коллекция Zepto. Для получения обратно коллекции используется метод
map в сочетании с Zepto либо
специализированные методы фильтрации.
Механизм фильтрации основан на трёх ключевых методах:
filter, not и has.
filter: оставляет только элементы, удовлетворяющие условию. Условием может выступать CSS-селектор или функция.
not: исключает из коллекции элементы, совпадающие по селектору или по проверке функции.
has: сохраняет элементы, содержащие определённые потомки по селектору.
Для поиска внутренних элементов применяется метод find,
который возвращает новую коллекцию, построенную на основе всех
подходящих потомков исходного набора.
Коллекции служат основой для массовых изменений в документе. Методы
html, text, attr,
removeAttr, prop и css принимают
либо значения, либо функции-генераторы значений, вызываемые для каждого
узла по отдельности. Такой подход делает возможной динамическую
подстройку элементов в зависимости от их состояния или данных.
Особое место занимают методы addClass,
removeClass, toggleClass и
hasClass, обеспечивающие работу с классами. Они выполняют
операции сразу над всеми элементами коллекции.
Вставка новых узлов в документ реализуется с помощью
append, prepend, after и
before. В качестве аргументов принимаются HTML-строки,
DOM-узлы, коллекции Zepto или функции для вычисления значений. Удаление
элементов совершается методом remove, а извлечение из DOM
без уничтожения обработчиков возможно через detach.
Манипуляции возвращают исходную коллекцию, что даёт возможность объединять вызовы цепочками.
Для модификации самого набора элементов используются методы
add, eq, first, last
и slice.
add: объединяет текущую коллекцию с результатом селектора или другим набором.
eq: создаёт новую коллекцию из одного элемента по указанному индексу.
first и last: удобные сокращения для выбора первого или последнего элемента коллекции.
slice: возвращает новый набор на основе диапазона
индексов, аналогично Array.prototype.slice.
Метод data позволяет связывать с элементами произвольные
данные. Хранилище работает на основе HTML5 data-* атрибутов
и внутреннего кеша. Чтение данных происходит по ключу, запись — по ключу
и значению. Удаление осуществляется передачей null или
использованием методов удаления атрибутов.
Характерным для Zepto становится объединение работы с коллекциями и
событийной моделью. Методы on, off,
one и trigger действуют на все элементы
набора, обеспечивая массовую подписку и генерацию событий. Делегирование
событий производится через дополнительный селектор, что особенно полезно
при динамическом создании узлов.
Большинство методов возвращают исходную коллекцию. Это свойство обеспечивает лаконичный стиль, при котором последовательность операций выглядит как декларативное описание поведения. Команды, меняющие DOM, состоят из коротких шагов: выборка — фильтрация — изменение — вставка — подписка на события.
Zepto разработан с упором на размеры библиотеки и работу в мобильных браузерах. Модель коллекций оптимизирована для небольших и средних наборов элементов. Методы фильтрации и обхода реализованы так, чтобы минимизировать накладные расходы при манипуляциях в рантайме, что особенно ценно при большом количестве повторяющихся операций.
Концепция коллекций полностью совместима с подходом jQuery. Многие методы совпадают по названию и сигнатурам. Это даёт возможность использовать знакомый стиль работы, но в значительно более компактной среде. В ряде случаев отсутствуют дополнительные вспомогательные функции, однако основные операции обхода, выборки и манипуляции покрыты полноценным API.
В зависимости от характера задачи подходят разные комбинации методов:
для быстрых выборок — filter и find, для
манипуляций — массовые методы изменения атрибутов и содержимого, для
расширения — add и slice, для событий —
on и trigger. Гибкость подхода к коллекциям
позволяет формировать предельно чистый и выразительный код, где
поведение набора элементов фиксируется компактно и прозрачно.