Работа с массивами

Umbrella JS — лёгкая библиотека для работы с DOM, событиями и коллекциями элементов. Одной из ключевых возможностей является работа с массивоподобными коллекциями элементов, предоставляемыми выборкой u(selector). Эти коллекции ведут себя схоже с массивами JavaScript, но содержат методы, оптимизированные для манипуляции DOM.

Основные методы обхода коллекций

  1. each(callback) Метод each позволяет перебрать все элементы коллекции и выполнить для каждого заданную функцию:
u('li').each(function(el, index) {
    console.log(index, el.textContent);
});
  • el — текущий DOM-элемент коллекции.
  • index — позиция элемента в коллекции.

Коллекция u() сама не изменяется, метод используется исключительно для обработки элементов.

  1. map(callback) Создаёт новый массив на основе значений, возвращённых функцией:
let texts = u('li').map(function(el) {
    return el.textContent.toUpperCase();
});
console.log(texts);

Отличие от each в том, что map возвращает массив результатов.

  1. filter(callback) Позволяет отобрать элементы, удовлетворяющие условию:
let activeItems = u('li').filter(function(el) {
    return el.classList.contains('active');
});

Возвращается новая коллекция Umbrella, содержащая только выбранные элементы.

Методы модификации массивоподобных коллекций

  1. addClass / removeClass / toggleClass Эти методы позволяют изменять классы сразу у всех элементов коллекции:
u('li').addClass('highlight');
u('li').removeClass('inactive');
u('li').toggleClass('selected');
  1. attr / removeAttr Работа с атрибутами:
u('a').attr('href', '#new-link');
u('a').removeAttr('target');

Если в attr передан только ключ, возвращается значение атрибута первого элемента:

let href = u('a').attr('href');
  1. css Изменение стилей элементов коллекции:
u('div').css('color', 'red');
u('div').css({
    'font-size': '18px',
    'margin-top': '10px'
});

Метод поддерживает передачу объекта с несколькими свойствами или пары ключ-значение.

Преобразование коллекций в массивы

Umbrella JS возвращает специальный объект, который поддерживает методы массивов, но не является настоящим массивом JavaScript. Для применения стандартных методов массива используется toArray():

let elements = u('p').toArray();
elements.forEach(el => console.log(el.textContent));

Метод toArray преобразует коллекцию в чистый массив DOM-элементов.

Работа с подмножествами коллекции

  1. eq(index) Возвращает элемент коллекции по индексу, упакованный в объект Umbrella:
u('li').eq(2).addClass('selected');
  1. first() / last() Позволяют выбрать первый или последний элемент:
u('li').first().css('font-weight', 'bold');
u('li').last().css('font-style', 'italic');
  1. slice(start, end) Возвращает подколлекцию элементов, аналогично Array.prototype.slice:
u('li').slice(1, 3).addClass('partial');

Слияние и комбинирование коллекций

  1. add(selectorOrElement) Добавляет новые элементы к существующей коллекции:
let items = u('li.active').add('#special-item');
  1. concat Для получения массива можно использовать стандартный concat после toArray():
let allItems = u('li').toArray().concat(u('p').toArray());

Методы поиска внутри коллекции

  1. find(selector) Ищет потомков в каждом элементе коллекции:
u('ul').find('li.active').css('color', 'green');
  1. children() Возвращает прямых потомков:
u('ul').children().addClass('child-item');
  1. parent() / parents() Позволяют подняться к родителям элементов:
u('li').parent().addClass('has-children');
u('li').parents('div.container').css('border', '1px solid black');

Методы сортировки и преобразования

Umbrella JS не предоставляет встроенные методы сортировки коллекций напрямую, но их можно комбинировать с toArray() и стандартными методами массивов:

let sorted = u('li').toArray().sort((a, b) => a.textContent.localeCompare(b.textContent));

После сортировки можно снова обернуть элементы в Umbrella:

u(sorted).addClass('sorted');

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

  • data(key, value) — хранение пользовательских данных на элементах:
u('li').data('index', 10);
let index = u('li').data('index');
  • on / off — привязка и удаление обработчиков событий, которые могут работать с коллекцией элементов:
u('li').on('click', function(e) {
    console.log('Clicked:', this.textContent);
});
u('li').off('click');

Ключевые моменты

  • Коллекции Umbrella ведут себя как массивы, но для применения стандартных методов массива лучше использовать toArray().
  • Методы манипуляции возвращают новые коллекции или модифицируют существующие элементы без копирования DOM.
  • Слияние и поиск позволяют создавать динамические подколлекции, управлять классами, атрибутами и стилями сразу у нескольких элементов.
  • Встроенные методы обхода (each, map, filter) обеспечивают удобное и эффективное управление коллекциями DOM.

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

Оглавление