Расширение прототипа

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

Основы расширения прототипа

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

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

В этом примере добавлен метод highlight, который устанавливает цвет фона выбранных элементов. Ключевой момент: метод возвращает this, что позволяет сохранять цепочку вызовов (chaining).

Добавление нескольких методов одновременно

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

u.extend({
    hide: function() {
        this.css('display', 'none');
        return this;
    },
    show: function() {
        this.css('display', '');
        return this;
    }
});

После этого можно использовать новые методы для любых элементов:

u('.menu').hide().show();

Доступ к текущим элементам

Методы, добавленные через u.extend(), получают доступ к текущему набору элементов через this. this представляет собой массивоподобный объект, содержащий выбранные элементы DOM. Для итерации по элементам можно использовать встроенный метод each():

u.extend({
    addClassToAll: function(className) {
        return this.each(function(el) {
            el.classList.add(className);
        });
    }
});

Метод each() упрощает выполнение операций над всеми элементами коллекции, сохраняя цепочку вызовов.

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

Расширяя прототип, можно использовать встроенные методы библиотеки. Например, метод css() или attr() можно применять для изменения стилей и атрибутов элементов.

u.extend({
    toggleRed: function() {
        return this.each(function(el) {
            if (u(el).css('color') === 'red') {
                u(el).css('color', '');
            } else {
                u(el).css('color', 'red');
            }
        });
    }
});

Таким образом, новые методы органично интегрируются с существующими функциями Umbrella JS.

Параметры методов

Методы, добавляемые через u.extend(), могут принимать параметры, аналогично стандартным методам библиотеки. Можно задавать значения по умолчанию, использовать объекты настроек или функции обратного вызова:

u.extend({
    fade: function(duration = 400) {
        return this.each(function(el) {
            el.style.transition = `opacity ${duration}ms`;
            el.style.opacity = 0;
        });
    }
});

В этом примере метод fade() плавно скрывает элементы за указанное время.

Сочетание с цепочкой вызовов

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

u('.item')
    .highlight('lightblue')
    .fade(300)
    .addClassToAll('active');

Правильное расширение прототипа обеспечивает компактный и читаемый код.

Организация кода при расширении

Для крупных проектов рекомендуется структурировать расширения:

  1. Отдельные модули: каждый набор методов хранится в отдельном файле.
  2. Именование методов: использовать осмысленные имена, избегать конфликтов с встроенными методами.
  3. Документирование параметров: описывать возможные значения аргументов, поведение по умолчанию.
  4. Повторное использование: методы могут вызывать другие расширенные методы или встроенные функции библиотеки.
// fadeAndHighlight.js
u.extend({
    fadeAndHighlight: function(color = 'yellow', duration = 400) {
        return this.fade(duration).highlight(color);
    }
});

Это позволяет создавать композиции методов, повышая читаемость и поддерживаемость кода.

Работа с событиями через расширения

Методы можно расширять для работы с событиями:

u.extend({
    onClickToggleClass: function(className) {
        return this.each(function(el) {
            u(el).on('click', function() {
                u(el).toggleClass(className);
            });
        });
    }
});

Подобные расширения интегрируются с системой событий Umbrella JS и упрощают добавление интерактивного поведения.

Примеры полезных расширений

  • Анимации: fadeIn, fadeOut, slideUp, slideDown.
  • Манипуляция классами: toggleActive, addErrorClass.
  • Работа с атрибутами: setDataAttr, removeAttr.
  • Пользовательские эффекты: комбинированные визуальные изменения.

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

Оглавление