Первая программа на Umbrella JS

Umbrella JS представляет компактную альтернативу jQuery с лаконичным API и высокой скоростью работы. Базовая идея — выбор элементов, их изменение и связывание с событиями через единый интерфейс u().

Umbrella JS распространяется в виде одного небольшого файла. Подключение осуществляется через локальный скрипт или CDN:

<script src="https://unpkg.com/umbrella-js"></script>

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

Первый выбор элемента

Основной инструмент — функция u(selector), принимающая CSS-селектор или DOM-узел. Возвращается объект-коллекция, содержащий набор DOM-элементов и методы для манипуляций.

const title = u('#title');

Объект title теперь предоставляет доступ к элементу с идентификатором title.

Работа с содержимым

Umbrella JS объединяет операции чтения и записи в один метод:

u('#title').html('Umbrella JS работает');

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

const current = u('#title').html();

Текстовые узлы обрабатываются через .text(), атрибуты — .attr(). Механика одинакова для всех методов: передан аргумент — запись, аргумент не передан — чтение.

Добавление элементов

Создание и вставка разметки возможны через метод .append():

u('body').append('<p class="msg">Первый запуск завершён</p>');

Umbrella не перегружает API, поэтому .append() всегда добавляет внутрь текущей коллекции в конец.

Работа с событиями

Назначение обработчиков выполняется через .on(event, handler):

u('#run').on('click', () => {
  u('#status').text('Выполнено');
});

Umbrella поддерживает делегирование событий. Форма: .on(event, selector, handler):

u('ul').on('click', 'li', e => {
  u('#status').text('Нажат пункт: ' + u(e.target).text());
});

Удаление обработчиков осуществляется методом .off() с теми же сигнатурами.

Создание первой мини-программы

Набор стандартных операций — выбор элементов, обработка ввода и реакция на действия.

HTML-заготовка:

<input id="name" placeholder="Имя">
<button id="go">Пуск</button>
<div id="output"></div>

JS-логика:

u('#go').on('click', () => {
  const value = u('#name').val();
  u('#output').html('Привет, ' + value);
});

Метод .val() аналогичен .html(), но заточен под элементы форм.

Тонкости селекторов и коллекций

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

u('.unknown').addClass('active'); // не вызывает исключений

Цепочки вызовов

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

u('#item')
  .addClass('visible')
  .html('Загружено')
  .append('<span>+</span>');

Манипуляции со стилями

Umbrella предоставляет методы .css(), .addClass(), .removeClass() и .toggleClass():

u('#box').css({ width: '200px', height: '120px' });
u('#box').addClass('ready');

При вызове .css() с одним строковым аргументом возвращается значение свойства.

AJAX-операции

Библиотека включает простой интерфейс для HTTP-запросов. Базовый пример:

u.ajax('/data.json')
  .then(resp => u('#output').text(resp.name));

По умолчанию запросы выполняются методом GET, тело ответа автоматически парсится для JSON.

Минимизация кода и философия

Особенность Umbrella — отсутствие избыточных абстракций. В API только необходимые операции: выбор, манипуляции, события, AJAX, классы и стили. В сочетании с микроскопическим размером библиотеки получается набор инструментов, который позволяет быстро написать готовое поведение интерфейса без сложной инфраструктуры.

Дальнейшее расширение

Поведение можно расширять кастомными плагинами через u.prototype. Подход повторяет классические практики jQuery и не требует дополнительных зависимостей, что облегчает создание собственных мини-модулей для интерфейсов и учебных проектов.

Оглавление