Сборка с webpack

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

Установка через npm

npm install @umbraco/umbrella --save

После установки библиотеку можно импортировать в код проекта как модуль ES6:

import u from '@umbraco/umbrella';

Если используется CommonJS-синтаксис, доступен вариант:

const u = require('@umbraco/umbrella');

Настройка Webpack для работы с библиотекой

Umbrella JS является модулем ES, поэтому важно убедиться, что Webpack поддерживает обработку ES6. В стандартной конфигурации достаточно настроить babel-loader для трансляции кода:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Эта конфигурация позволяет использовать Umbrella JS вместе с современными возможностями JavaScript без проблем совместимости.

Основные методы и работа с DOM

Umbrella JS использует универсальный селектор u(selector), который возвращает объект-обёртку для выбранных элементов. Это позволяет применять методы коллекции к множеству элементов одновременно.

Примеры базовых операций:

  • Выбор элементов
const items = u('.item'); // возвращает коллекцию элементов с классом .item
  • Манипуляции с содержимым
items.text('Новый текст'); // изменяет текст всех выбранных элементов
items.html('<span>HTML контент</span>'); // вставка HTML
  • Работа с атрибутами
items.attr('data-id', '123'); // установка атрибута
console.log(items.attr('data-id')); // получение атрибута первого элемента
items.removeAttr('data-id'); // удаление атрибута
  • Добавление и удаление классов
items.addClass('active');
items.removeClass('hidden');
items.toggleClass('highlight');
  • События
items.on('click', function(event) {
  console.log('Элемент кликнут', event.target);
});
items.off('click'); // удаление обработчика
  • Манипуляции с DOM-структурой
const newDiv = u('<div class="new">Новый элемент</div>');
u('body').append(newDiv); // добавление элемента в конец body
u('body').prepend(newDiv); // добавление элемента в начало body
newDiv.remove(); // удаление элемента

Работа с коллекциями элементов

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

u('.item')
  .addClass('highlight')
  .attr('data-active', 'true')
  .on('mouseenter', function() {
    u(this).addClass('hovered');
  });

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

AJAX-запросы через Umbrella JS

Umbrella JS предоставляет встроенный метод ajax для выполнения HTTP-запросов. Поддерживаются методы GET, POST и другие:

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

Также поддерживается отправка данных в формате JSON:

u.ajax({
  url: '/api/save',
  method: 'POST',
  data: { name: 'Umbrella' },
  contentType: 'application/json',
  success: function(response) {
    console.log('Данные отправлены', response);
  }
});

Использование Umbrella JS с современными модулями

При сборке проекта с Webpack рекомендуется использовать ES-модули, что упрощает tree-shaking и уменьшает размер итогового бандла. Все функции Umbrella JS импортируются через основной объект u:

import u from '@umbraco/umbrella';

const listItems = u('.list-item');
listItems.addClass('processed');

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

Практические советы по оптимизации

  • Выбор селекторов: использовать конкретные селекторы (.class, #id) вместо универсальных (div) для уменьшения объёма работы по выборке элементов.
  • Минимизация цепочек: объединять операции в цепочки, чтобы сократить количество обходов DOM.
  • Lazy-loading элементов: работать с DOM только после полной загрузки страницы или при необходимости динамического создания элементов.
  • Tree-shaking: включить в Webpack оптимизацию, чтобы исключить неиспользуемые части библиотеки.

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

Оглавление