Content Security Policy

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

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

Выбор элементов в Umbrella JS производится через функцию u(), принимающую CSS-селектор или DOM-элемент:

u('.button');      // выбор всех элементов с классом button
u('#header');      // выбор элемента с id header
u(document.body);  // оборачивание DOM-элемента

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

Манипуляция классами и атрибутами

Добавление и удаление классов:

u('.item').addClass('active');   // добавление класса active
u('.item').removeClass('active'); // удаление класса
u('.item').toggleClass('highlight'); // переключение класса

Работа с атрибутами:

u('img').attr('alt', 'Описание картинки'); // установка атрибута
u('img').attr('src');                      // получение значения атрибута
u('a').removeAttr('href');                 // удаление атрибута

Работа с содержимым элементов

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

u('#content').html('
Новый текст
'); // замена HTML содержимого
u('#content').text('Только текст');       // установка текстового содержимого
u('#content').append('Добавлено'); // добавление в конец элемента
u('#content').prepend('В начало'); // добавление в начало
u('#content').empty();                     // удаление всего содержимого

Управление стилями

Для управления стилями используются методы css():

u('.box').css('background-color', 'red'); // установка одного свойства
u('.box').css({ color: 'white', fontSize: '16px' }); // установка нескольких свойств
u('.box').css('display');                 // получение значения свойства

События

Umbrella JS упрощает работу с событиями:

u('.btn').on('click', function(event) {
    console.log('Кнопка нажата', event.target);
});

u('.btn').off('click'); // удаление обработчиков
u('.btn').trigger('click'); // программное вызов события

События могут быть назначены на несколько элементов одновременно, что делает код компактным и управляемым.

Работа с DOM-структурой

Umbrella JS облегчает работу с DOM-структурой:

u('.list').append('
  • Новый элемент
    • ');   // добавление элемента
u('.list li').remove();                        // удаление элементов
u('.list li').before('
  • Перед элементом
    • '); // вставка перед
u('.list li').after('
  • После элемента
    • ');   // вставка после

    Также поддерживаются методы навигации по DOM:

    u('.active').parent();    // родительский элемент
u('.active').children();  // дочерние элементы
u('.active').siblings();  // соседние элементы

    Работа с формами

    Методы работы с формами включают удобное получение и установку значений:

    u('input[name="username"]').val();       // получение значения
u('input[name="username"]').val('admin'); // установка значения
u('form').serialize();                   // сериализация формы в объект

    AJAX-запросы

    Umbrella JS предоставляет простую обертку для AJAX-запросов через u.ajax():

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

    Можно использовать также метод u.get() и u.post() для упрощённых GET и POST запросов:

    u.get('/api/data', function(response) {
    console.log(response);
});

u.post('/api/save', { name: 'John' }, function(response) {
    console.log(response);
});

    Интеграция с Content Security Policy

    Umbrella JS совместима с современными политиками CSP (Content Security Policy), поскольку все методы работы с DOM и событиями не требуют инлайновых скриптов. Использование внешних скриптов и обработчиков через on() и ajax() полностью соответствует CSP:

    • Безопасное добавление скриптов: не используется eval() или инлайновые события.
    • AJAX-запросы: работают с разрешёнными источниками через connect-src.
    • Динамическое изменение контента: допустимо, если script-src 'unsafe-inline' не используется.

    Для проектов с жёсткой CSP рекомендуется загружать Umbrella JS как внешний файл и использовать только методы API, избегая вставки инлайновых скриптов.

    Производительность и оптимизация

    Umbrella JS отличается минимальным весом и высокой скоростью:

    • Быстрый выбор элементов благодаря оптимизированной функции querySelectorAll.
    • Цепочки вызовов сокращают количество операций над DOM.
    • Методы изменяют только выбранные элементы, не затрагивая ненужные узлы.
    • Поддержка кэширования выборки позволяет повторно использовать результаты u() без повторного поиска в DOM.

    Совместимость

    Umbrella JS поддерживает все современные браузеры и корректно работает в мобильных устройствах. Благодаря отсутствию зависимостей и использованию стандартизированных методов DOM, библиотека легко интегрируется с любыми фронтенд-фреймворками и библиотеками.

    Оглавление