Graceful degradation

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

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

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

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

u('.class-name'); // выбирает все элементы с классом 'class-name'
u('#id');         // выбирает элемент с идентификатором 'id'
u('div');         // выбирает все <div> на странице

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

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

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

  • html() — получение или установка HTML-содержимого:
u('p').html(); // возвращает HTML первого <p>
u('p').html('<strong>Пример</strong>'); // заменяет содержимое всех <p>
  • text() — работа с текстом:
u('p').text('Новый текст'); // устанавливает текст
  • append() и prepend() — добавление элементов:
u('ul').append('<li>Элемент</li>');
u('ul').prepend('<li>Первый элемент</li>');
  • attr() — работа с атрибутами:
u('img').attr('src');           // получает значение атрибута src
u('img').attr('alt', 'Описание'); // устанавливает атрибут alt
  • remove() — удаление элементов из DOM:
u('.to-remove').remove();

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

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

  • addClass('class') — добавление класса:
u('div').addClass('active');
  • removeClass('class') — удаление класса:
u('div').removeClass('inactive');
  • hasClass('class') — проверка наличия класса:
u('div').hasClass('active'); // возвращает true или false
  • toggleClass('class') — переключение класса:
u('div').toggleClass('highlight');

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

Umbrella JS поддерживает добавление и удаление событий с помощью методов on и off:

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

u('button').off('click'); // удаление всех обработчиков click

События можно привязывать не только к существующим элементам, но и к динамически добавляемым. Это особенно полезно при работе с контентом, который создаётся через JavaScript.

Анимации и эффекты

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

  • show() — делает элемент видимым
  • hide() — скрывает элемент
  • toggle() — переключает видимость
u('.box').hide();
u('.box').show();
u('.box').toggle();

Эти методы оперируют свойством CSS display и позволяют быстро реализовать эффекты плавного отображения или скрытия без сложных CSS-анимаций.

AJAX-запросы

Umbrella JS поддерживает простые AJAX-запросы через метод request(), который принимает объект с параметрами:

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

Поддерживаются методы GET, POST и работа с JSON, что делает библиотеку удобной для динамического обновления интерфейса без дополнительных зависимостей.

Грейсфул деградация (Graceful Degradation)

Umbrella JS изначально построена с учётом принципа graceful degradation, что означает корректную работу функционала даже в браузерах, где часть возможностей отсутствует. Основные механизмы:

  1. Выборка элементов: при отсутствии совпадений возвращается пустой объект, что предотвращает ошибки при дальнейших методах.
  2. Методы DOM: функции, работающие с атрибутами или классами, безопасно игнорируют несуществующие элементы.
  3. События: методы on и off проверяют поддержку событий в браузере и корректно обрабатывают отсутствующие типы.
  4. AJAX: при недоступности современных API запросы автоматически используют более старые подходы через XMLHttpRequest.

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

Расширяемость

Umbrella JS поддерживает создание собственных плагинов и расширений через прототип объекта u. Любой метод можно добавить, обеспечивая единый интерфейс для работы с элементами:

u.prototype.greenify = function() {
    this.css('color', 'green');
    return this;
};

u('p').greenify();

Такой подход упрощает интеграцию сторонних компонентов и модификацию поведения стандартных методов библиотеки.

Итог

Umbrella JS сочетает лаконичность синтаксиса с мощным набором инструментов для работы с DOM, событиями, классами и AJAX. Благодаря принципу graceful degradation она остаётся безопасной для широкого спектра браузеров, а её расширяемость позволяет адаптировать библиотеку под любые задачи фронтенд-разработки.

Оглавление