Регистрация методов

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

Основы регистрации методов

Методы в Umbrella JS регистрируются с помощью функции u.fn.extend(). Она принимает объект, где ключи — это имена новых методов, а значения — функции, реализующие их поведение.

Пример базовой структуры:

u.fn.extend({
    имяМетода: function(аргументы) {
        // this — коллекция элементов Umbrella
        return this; // возврат this для цепочек
    }
});

Особенности:

  • this внутри метода всегда ссылается на текущую коллекцию элементов Umbrella.
  • Для сохранения цепочек вызовов обязательно возвращать this.
  • Аргументы метода могут быть любыми, включая функции обратного вызова.

Пример регистрации простого метода

Создадим метод .highlight(), который будет добавлять элементу класс highlight:

u.fn.extend({
    highlight: function() {
        this.each(function(el) {
            el.classList.add('highlight');
        });
        return this;
    }
});

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

u('p').highlight(); // Все параграфы получат класс 'highlight'

Разбор:

  • each перебирает все элементы коллекции.

  • el — текущий DOM-элемент.

  • После добавления класса возвращается this, что позволяет продолжить цепочку вызовов:

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

Методы с аргументами

Методы могут принимать параметры для динамической настройки поведения. Пример: метод .setText(text):

u.fn.extend({
    setText: function(text) {
        this.each(function(el) {
            el.textContent = text;
        });
        return this;
    }
});

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

u('h1').setText('Новый заголовок');

Аргумент text передается внутрь функции и применяется к каждому элементу коллекции.

Методы с функцией обратного вызова

Для динамического изменения элементов часто используются колбэки:

u.fn.extend({
    updateText: function(callback) {
        this.each(function(el, i) {
            el.textContent = callback(el, i);
        });
        return this;
    }
});

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

u('li').updateText(function(el, index) {
    return `Элемент ${index + 1}: ${el.textContent}`;
});

Особенности:

  • el — текущий элемент.
  • i — индекс элемента в коллекции.
  • Callback возвращает значение, которое применяется к элементу.

Возврат значений и коллекций

Методы Umbrella JS обычно возвращают коллекцию (this) для поддержания цепочек. Иногда требуется возвращать конкретные значения. В этом случае возвращается не коллекция, а результат операции. Например, метод .firstText() возвращает текст первого элемента:

u.fn.extend({
    firstText: function() {
        return this.length ? this[0].textContent : null;
    }
});

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

let text = u('p').firstText();
console.log(text);

Работа с атрибутами и данными

Методы могут управлять атрибутами и dataset:

u.fn.extend({
    setData: function(key, value) {
        this.each(function(el) {
            el.dataset[key] = value;
        });
        return this;
    },
    getData: function(key) {
        return this.length ? this[0].dataset[key] : undefined;
    }
});

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

u('div').setData('id', '123');
console.log(u('div').getData('id')); // 123

Встроенные утилиты внутри методов

Внутри зарегистрированных методов доступны все стандартные методы Umbrella JS, например:

u.fn.extend({
    toggleVisibility: function() {
        this.each(function(el) {
            u(el).toggleClass('hidden');
        });
        return this;
    }
});

Преимущество:

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

Советы по проектированию методов

  1. Возврат this — обязательное условие для методов, которые изменяют элементы.
  2. Минимализация побочных эффектов — методы должны работать с текущей коллекцией без изменения глобального состояния.
  3. Универсальность аргументов — методы, принимающие функции обратного вызова или разные типы данных, становятся гибкими.
  4. Совместимость с цепочками — новые методы должны легко интегрироваться с существующими (.addClass(), .hide(), .each()).

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

Оглавление