Внутренние операции библиотеки Umbrella JS опираются на компактную модель выполнения кода, где контекст и цепочки вызовов позволяют обрабатывать узлы DOM эффективно и предсказуемо. Контекст определяет, какие элементы участвуют в выражении, каким образом вызываются методы и как возвращаются результаты.
Контекстом считается набор выбранных DOM-элементов, обёрнутых в
объект u(...). Почти каждый метод библиотеки возвращает
этот же объект, что создаёт цепочку операций над одним и тем же набором
узлов. При этом ключевым элементом становится не изменение
глобального состояния, а аккуратное преобразование доменной
коллекции.
Пример базового выбора элементов:
u('.item') // формируется контекст из всех элементов с классом .item
Данный вызов создаёт внутреннюю коллекцию элементов, к которой могут
быть применены последующие методы (addClass,
attr, find и многие другие).
При вызове методов, способных изменить набор элементов, контекст переопределяется:
u('ul').find('li')
Метод find находит дочерние элементы li и
формирует новый контекст. Предыдущий набор (ul) при этом не
уничтожается концептуально, но не участвует в
дальнейших вызовах цепочки.
Важно подчеркнуть: методы Umbrella JS не изменяют DOM-коллекции напрямую вне текущего контекста, который выступает ядром цепочки выполнения.
Методы, не меняющие состав контекста, возвращают ту же коллекцию элементов. Это относится к:
addClassremoveClasstoggleClassattr (установка)css (установка)html (установка)on и offПодобное поведение формирует предсказуемый поток выполнения, где команда за командой модифицирует то, что было выбрано первой инструкцией.
u('.item')
.addClass('active')
.css({ color: 'red' })
Каждый метод продолжает работу в контексте .item.
Для получения значений существуют методы, разрывающие цепочку и возвращающие не сам контекст, а данные. Это может быть:
html() без параметровtext() без параметровattr(name) без параметровfirst() или last(), когда требуется один
элемент, а продолжение цепочки уже логически не имеет смыслаconst text = u('.item').first().text()
Здесь text() возвращает строку, а не коллекцию, поэтому
дальнейший вызов методов Umbrella JS невозможен.
eachОсобый интерес представляет each, который исполняет
функцию для каждого элемента контекста:
u('.item').each(function(node, i) {
node.dataset.index = i
})
Функция выполняется в стандартизированном окружении: параметр
node — это конкретный DOM-узел, i — индекс.
Возвратом each вновь становится исходный контекст, что
позволяет продолжать цепочку.
Комбинация find и filter создаёт вложенные
цепочки выбора, формируя локальные подмножества
узлов:
u('.list')
.find('li')
.filter('.active')
.addClass('highlight')
Здесь меняется контекст последовательно: list →
li → li.active. Такой подход позволяет
избегать временных переменных и промежуточных массивов узлов, что
повышает читаемость и компактность кода.
Umbrella JS не создаёт абстракций над DOM глубже, чем необходимо. Контекст выступает тонкой оболочкой над NodeList, но обеспечивает:
Эта модель контекста делает цепочки методов Umbrella JS близкими по духу к jQuery, но с более строгой минималистичной архитектурой и меньшим количеством магии.
Контекст Umbrella JS можно рассматривать как единицу выполнения цепочки операций, в которой:
Подобная модель обеспечивает прозрачное поведение, позволяющее структурировать логику модификации DOM последовательно и детерминированно.