Переход с jQuery

Umbrella JS — лёгкая библиотека для работы с DOM, вдохновлённая jQuery, но с более компактным синтаксисом и меньшим размером. Основной объект библиотеки создаётся вызовом функции u(selector), где selector может быть строкой CSS-селектора, элементом DOM или NodeList. Возвращается коллекция элементов, поддерживающая цепочки методов для манипуляций, событий и получения данных.

Пример базового синтаксиса:

u('.item').addClass('active').hide();

В этом примере происходит выбор всех элементов с классом item, добавление класса active и скрытие элементов.

Ключевые особенности:

  • Минимальный вес — меньше 4 КБ в сжатом виде.
  • Методы цепочек — возвращают объект Umbrella JS для продолжения вызовов.
  • Совместимость с современными браузерами — нет поддержки старых IE.

Работа с DOM

Выбор элементов Umbrella JS поддерживает те же селекторы, что и querySelectorAll.

const buttons = u('button'); // выбирает все кнопки
const mainDiv = u('#main'); // выбирает элемент с id "main"

Манипуляции с классами Методы addClass, removeClass, toggleClass полностью аналогичны jQuery.

u('.menu').addClass('open');
u('.menu').removeClass('closed');
u('.menu').toggleClass('active');

Изменение содержимого и атрибутов Методы html, text, attr позволяют работать с контентом и атрибутами:

u('#title').text('Новый заголовок');
u('img').attr('src', 'logo.png');

Для удаления атрибута используется removeAttr:

u('input').removeAttr('disabled');

Стили Метод css задаёт или возвращает стили:

u('.box').css('background-color', 'red');
const bg = u('.box').css('background-color');

Поддерживается объектная запись для установки сразу нескольких свойств:

u('.box').css({
  color: 'white',
  padding: '10px'
});

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

  • append и prepend вставляют элементы внутрь выбранного контейнера:
u('#list').append('<li>Новый элемент</li>');
u('#list').prepend('<li>Первый элемент</li>');
  • before и after вставляют элементы относительно выбранного:
u('#item2').before('<li>Перед вторым</li>');
u('#item2').after('<li>После второго</li>');
  • remove удаляет элементы из DOM:
u('.obsolete').remove();

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

Подобно jQuery, Umbrella JS упрощает добавление и удаление событий.

Добавление события:

u('button').on('click', () => {
  console.log('Кнопка нажата');
});

Удаление события:

function handler() { console.log('Событие'); }
u('button').on('click', handler);
u('button').off('click', handler);

Поддерживаются все стандартные события DOM: click, input, submit, mouseenter и т.д.

События на динамически добавленных элементах можно реализовать через делегирование:

u('#container').on('click', 'button', (e) => {
  console.log('Нажатая кнопка внутри контейнера', e.target);
});

Работа с атрибутами данных

Методы data и removeData позволяют работать с data-* атрибутами.

u('#item').data('id', 123); // устанавливает data-id
const id = u('#item').data('id'); // получает значение
u('#item').removeData('id'); // удаляет атрибут

Все значения автоматически сериализуются и десериализуются в строку/число.

Анимации

Umbrella JS предоставляет упрощённые методы для анимаций: show, hide, toggle, а также fadeIn, fadeOut и fadeToggle.

u('.box').fadeIn(500); // плавное появление за 500 мс
u('.box').fadeOut(300); // плавное исчезновение
u('.box').toggle(200); // переключение видимости

Все методы работают асинхронно и могут использоваться в цепочках:

u('.box').fadeOut(300).fadeIn(300);

Ajax

Umbrella JS включает простой метод для работы с Ajax-запросами.

GET-запрос:

u.ajax({
  url: '/api/data',
  method: 'GET',
  success: (data) => console.log(data),
  error: (err) => console.error(err)
});

POST-запрос с отправкой данных:

u.ajax({
  url: '/api/save',
  method: 'POST',
  data: { name: 'Umbrella', type: 'JS' },
  success: () => console.log('Сохранено')
});

Метод ajax поддерживает все стандартные опции: url, method, data, headers, success, error.

Работа с размерами и позиционированием

Методы height, width, offset позволяют получать и задавать размеры элементов:

u('.box').height(200); // задаёт высоту
const w = u('.box').width(); // получает ширину
const pos = u('.box').offset(); // возвращает объект { top, left }

Цепочки и коллекции

Все методы Umbrella JS возвращают объект библиотеки, что позволяет использовать цепочки вызовов без создания промежуточных переменных:

u('.item')
  .addClass('active')
  .css('color', 'red')
  .fadeIn(300);

Коллекции поддерживают индексирование и итерацию через each:

u('.item').each((el, i) => {
  console.log(i, el);
});

Переход с jQuery на Umbrella JS

Сокращения и замены:

  • $ → u
  • $(selector).html() → u(selector).html()
  • $(selector).css() → u(selector).css()
  • $(selector).on() → u(selector).on()
  • $(selector).fadeIn() → u(selector).fadeIn()

Отличия:

  • Umbrella JS не поддерживает старые IE и не имеет некоторых устаревших jQuery-плагинов.
  • Методы работают только с коллекциями, даже если выбран один элемент.
  • Ajax и анимации более минималистичны и лаконичны, без глобальных настроек $.ajaxSetup.

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

Оглавление