Модульная архитектура

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

Модульная архитектура Umbrella JS реализована через объект u(), который является основной точкой взаимодействия с DOM. Каждый метод библиотеки инкапсулирует конкретную функциональность, предоставляя отдельный модуль поведения, будь то выборка элементов, манипуляции с атрибутами, события или анимации.

Структура модулей

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

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

    let items = u('.item'); // возвращает коллекцию всех элементов с классом "item"

  2. Манипуляция классами (addClass, removeClass, toggleClass) Отдельный модуль для работы с классами каждого элемента в коллекции.

    items.addClass('active');
items.removeClass('hidden');
items.toggleClass('selected');

  3. Атрибуты и свойства (attr, prop) Модуль для работы с атрибутами и свойствами элементов. Поддерживает как чтение, так и запись.

    items.attr('data-id', '123'); // установка атрибута
let value = items.attr('data-id'); // получение атрибута

  4. События (on, off, once) Модуль для привязки обработчиков событий. Методы позволяют добавлять, удалять и использовать однократные обработчики, сохраняя внутреннюю структуру данных о событиях каждого элемента.

    items.on('click', function() { console.log('Clicked!'); });
items.off('click');

  5. Манипуляции с DOM (append, prepend, before, after, remove) Позволяет добавлять или удалять элементы относительно выбранного DOM. Каждый метод инкапсулирует операции над коллекцией элементов, избегая дублирования кода.

    u('body').append('<div class="new-item">Hello</div>');
items.remove();

  6. CSS и стили (css) Модуль для управления стилями каждого элемента коллекции. Поддерживаются как отдельные свойства, так и объектная форма для установки нескольких стилей одновременно.

    items.css('color', 'red');
items.css({ 'font-size': '16px', 'margin': '10px' });

Принципы построения модульной архитектуры

  1. Изоляция ответственности Каждый модуль отвечает только за один аспект работы с DOM. Методы не пересекаются по функциональности: управление классами, атрибутами и событиями реализовано независимо.

  2. Цепочечный вызов Методы возвращают объект Umbrella JS, что позволяет объединять несколько операций в цепочку:

    u('.item')
  .addClass('active')
  .css('color', 'blue')
  .on('click', () => console.log('Clicked'));

  3. Минимизация побочных эффектов Внутренние данные коллекции и привязки событий хранятся локально, что предотвращает непредвиденное изменение других элементов на странице.

  4. Расширяемость Архитектура построена так, что новые модули могут добавляться без изменения ядра библиотеки. Это реализуется через прототип u.fn, позволяющий добавлять пользовательские методы:

    u.fn.highlight = function() {
    return this.css('background-color', 'yellow');
};

u('.item').highlight();

Работа с внутренними данными модулей

Каждый модуль Umbrella JS работает с массивоподобной коллекцией элементов, обеспечивая унифицированный доступ:

  • Индексация элементов по порядку (this[0], this[1] и т.д.)
  • Методы итерации (each, map) для обхода коллекции
  • Изоляция данных событий и атрибутов для каждого элемента

Пример итерации через модульный подход:

u('.item').each(function(el, i) {
    el.textContent = `Item ${i + 1}`;
});

Модуль each действует как независимый блок, который не зависит от других модулей, но может взаимодействовать с ними через объект коллекции.

Взаимодействие модулей

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

  • Метод addClass изменяет визуальное состояние элемента, но не затрагивает привязанные события.
  • Метод on привязывает обработчики событий, не изменяя атрибуты или стили.
  • Метод append добавляет элементы в DOM, не влияя на предыдущие коллекции элементов.

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

Итоговые особенности модульной архитектуры Umbrella JS

  • Легковесность и компактность Каждый модуль выполняет строго ограниченную задачу.
  • Прозрачность и предсказуемость поведения Методы не зависят от состояния других модулей.
  • Цепочечные вызовы и гибкость Объединение модулей позволяет создавать комплексные манипуляции над DOM.
  • Простое расширение Любой модуль может быть добавлен через u.fn, сохраняя внутреннюю целостность библиотеки.

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

Оглавление