Профилирование кода

Umbrella JS — это лёгкая и минималистичная библиотека для работы с DOM, стилизованная по принципам jQuery, но с современным синтаксисом и оптимизацией под современные браузеры. Основная идея заключается в том, чтобы манипулировать элементами DOM, обрабатывать события, управлять классами и атрибутами, а также выполнять AJAX-запросы, используя компактный и читаемый API. Библиотека распространяется как один файл JavaScript, что облегчает интеграцию в проекты с минимальной зависимостью.

u('div.example').addClass('active').text('Привет, мир!');

Выражение выше демонстрирует цепочку методов (chainable API), что является ключевым преимуществом Umbrella JS.

Выбор элементов

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

const items = u('.list-item');  // все элементы с классом list-item
const container = u(document.getElementById('container')); // конкретный элемент по ID

Особенности:

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

Манипуляции с DOM

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

u('
Новый элемент
').appendTo('.container');
u('.old-item').remove();
  • appendTo() — добавляет элементы внутрь указанного контейнера.
  • remove() — удаляет выбранные элементы из DOM.

Изменение содержимого и атрибутов

u('.title').text('Обновлённый заголовок'); // текст
u('.link').attr('href', 'https://example.com'); // атрибут
u('.link').removeAttr('target'); // удаление атрибута
  • text() изменяет или возвращает текстовое содержимое.
  • html() позволяет работать с HTML-содержимым.
  • attr() управляет атрибутами элементов.

Работа с классами

Umbrella JS предоставляет удобные методы для управления CSS-классами:

u('.box').addClass('highlight');
u('.box').removeClass('highlight');
u('.box').toggleClass('active');
  • addClass() добавляет класс к элементам.
  • removeClass() удаляет класс.
  • toggleClass() переключает наличие класса.

Обработка событий

События обрабатываются с помощью методов on() и off():

u('.button').on('click', function(event) {
    u(this).toggleClass('pressed');
});

u('.button').off('click'); // удаление обработчика
  • Поддерживаются стандартные DOM-события (click, input, submit и др.).
  • Методы позволяют добавлять несколько обработчиков на один элемент.
  • Контекст this внутри обработчика ссылается на текущий элемент.

AJAX и работа с сетью

Umbrella JS включает встроенный метод для выполнения AJAX-запросов:

u.ajax({
    url: '/data.json',
    method: 'GET',
    success: function(response) {
        console.log('Данные получены:', response);
    },
    error: function(err) {
        console.error('Ошибка запроса:', err);
    }
});

Особенности:

  • Поддержка GET и POST методов.
  • Обработка успешного ответа через success.
  • Обработка ошибок через error.
  • Можно использовать цепочку методов для упрощённого взаимодействия с сервером.

Эффекты и анимации

Для простых анимаций библиотека предоставляет методы fadeIn(), fadeOut() и toggle():

u('.modal').fadeIn(400); // плавное появление за 400ms
u('.modal').fadeOut(400); // плавное исчезновение
u('.modal').toggle(); // переключение видимости
  • Методы поддерживают настройку времени анимации.
  • Анимации выполняются с использованием CSS-свойств opacity и display.
  • Поддерживается обратный вызов после завершения анимации.

Цепочки методов и производительность

Umbrella JS построена на цепочках методов, что позволяет писать компактный код:

u('.item')
    .addClass('active')
    .text('Обновлённый текст')
    .fadeIn(300);
  • Каждый метод возвращает объект-обёртку.
  • Позволяет объединять несколько операций в одну последовательность без многократного обращения к DOM.
  • Минимизирует количество перерисовок браузера и повышает производительность.

Дополнительные утилиты

Umbrella JS предоставляет ряд вспомогательных функций:

  • each(callback) — перебор элементов с доступом к текущему элементу и индексу.
  • index() — возвращает позицию элемента среди соседей.
  • closest(selector) — поиск ближайшего родителя, соответствующего селектору.
  • find(selector) — поиск потомков внутри выбранных элементов.
u('.list-item').each(function(el, i) {
    u(el).text(`Элемент ${i + 1}`);
});

Интеграция с современным JavaScript

Umbrella JS полностью совместима с ES6+:

  • Использование стрелочных функций.
  • Поддержка const и let.
  • Возможность интеграции с модулями через import/export.
import u from 'umbrellajs';

u('.button').on('click', () => console.log('Клик выполнен'));
  • Библиотека легкая (≈3KB минифицированного кода), что обеспечивает быструю загрузку и минимальное влияние на производительность.
  • Совместимость со всеми современными браузерами без необходимости полифиллов.

Практический пример

Объединение всех возможностей в одном коде:

u(document).ready(() => {
    u('.toggle-button').on('click', function() {
        u('.menu').toggleClass('open').fadeToggle(200);
    });

    u.ajax({
        url: '/api/items',
        success: function(data) {
            u('.list').html('');
            data.forEach(item => {
                u('
  • ').text(item.name).appendTo('.list');
            });
        }
    });
});

    • В этом примере демонстрируются:

    • Обработка события click.
    • Управление классами и анимацией.
    • Получение данных с сервера и динамическое создание элементов.
    Оглавление