Расширение функциональности

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

Пользовательские методы

Umbrella JS позволяет создавать пользовательские методы, которые становятся частью цепочки вызовов u-объектов. Для добавления нового метода используется объект u.fn.

u.fn.highlight = function(color = 'yellow') {
  this.each(el => el.style.backgroundColor = color);
  return this;
};

После определения метода он становится доступен для всех выбранных элементов:

u('p').highlight('lightblue');

Ключевые особенности пользовательских методов:

Доступ к каждому элементу коллекции через this.each.
Возврат this для сохранения цепочки вызовов.
Возможность добавления параметров для гибкой настройки поведения.

Расширение через плагины

Плагины позволяют интегрировать сторонние функции в Umbrella JS. Структура плагина обычно включает регистрацию методов в u.fn и, при необходимости, отдельные утилитарные функции.

Пример простого плагина:

(function(u) {
  u.fn.fadeOut = function(duration = 400) {
    this.each(el => {
      el.style.transition = `opacity ${duration}ms`;
      el.style.opacity = 0;
      setTimeout(() => el.style.display = 'none', duration);
    });
    return this;
  };
})(u);

Использование:

u('.alert').fadeOut(800);

Преимущества плагинов:

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

Методы работы с коллекциями

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

each(callback) — итерация по каждому элементу коллекции.
map(callback) — создание нового массива на основе элементов.
filter(callback) — фильтрация элементов по условию.
find(selector) — поиск потомков внутри выбранной коллекции.

Пример расширенного метода для фильтрации элементов с определённым текстом:

u.fn.containsText = function(text) {
  return this.filter(el => el.textContent.includes(text));
};

const items = u('li').containsText('JavaScript');
items.each(el => el.style.fontWeight = 'bold');

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

Расширение функциональности часто включает обёртки для событий и анимаций. Umbrella JS предоставляет удобный метод .on() для привязки событий, что можно использовать для создания более сложных обработчиков.

Пример пользовательского метода с анимацией при клике:

u.fn.slideToggle = function(duration = 400) {
  this.each(el => {
    const display = getComputedStyle(el).display === 'none' ? 'block' : 'none';
    el.style.transition = `height ${duration}ms`;
    el.style.height = display === 'block' ? '0px' : `${el.scrollHeight}px`;
    setTimeout(() => el.style.display = display, duration);
  });
  return this;
};

u('.menu').on('click', function() {
  u(this).find('.submenu').slideToggle(300);
});

Подключение сторонних утилит

Umbrella JS легко интегрируется с другими библиотеками, так как основной объект u() остаётся простым объектом JavaScript. Можно создавать методы-обёртки для сторонних функций, например для работы с AJAX, localStorage или сторонними анимациями.

Пример метода для удобного AJAX-запроса:

u.fn.loadJSON = function(url, callback) {
  fetch(url)
    .then(res => res.json())
    .then(data => this.each(el => callback(el, data)));
  return this;
};

u('#content').loadJSON('/api/data', (el, data) => {
  el.textContent = data.message;
});