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

Dom7 — это компактная библиотека для работы с DOM в JavaScript, используемая в основном вместе с фреймворком Framework7, но также полезная как самостоятельный инструмент. Она предоставляет удобные методы для манипуляции элементами, обработки событий и работы с атрибутами. Встроенные методы Dom7 покрывают большинство типичных задач, но часто возникает необходимость расширить функциональность собственными методами.

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

Dom7 построена как обертка вокруг массива DOM-элементов. Любой объект, возвращаемый вызовом Dom7(), фактически является массивоподобным объектом, к которому применяются методы библиотеки. Для добавления новых методов используется статический метод Dom7.fn или свойство Dom7.prototype, которое позволяет определять функции, доступные для всех экземпляров Dom7.

Простейший синтаксис добавления пользовательского метода выглядит так:

Dom7.fn.myCustomMethod = function(param) {
    return this.each((el, index) => {
        // Действия с каждым элементом
        el.textContent = `Элемент ${index}: ${param}`;
    });
};
  • this внутри метода ссылается на текущую коллекцию элементов Dom7.
  • Метод each позволяет перебирать все элементы коллекции, передавая каждый элемент и его индекс в функцию обратного вызова.
  • return this в конце метода обеспечивает цепочку вызовов, что является ключевой практикой в Dom7.

Использование пользовательских методов

После добавления метода можно вызвать его как любой встроенный метод Dom7:

const $items = Dom7('.item');
$items.myCustomMethod('Пример');

Каждый элемент с классом .item получит текст Элемент 0: Пример, Элемент 1: Пример и так далее. Цепочка вызовов сохраняется:

$items
    .myCustomMethod('Тест')
    .addClass('highlight')
    .css('color', 'red');

Это делает пользовательские методы полностью совместимыми с остальными функциями библиотеки.

Методы с возвратом данных

Не всегда требуется изменять элементы. Иногда нужно получить информацию из коллекции. В таких случаях метод может возвращать значения, а не this.

Dom7.fn.getTextArray = function() {
    const result = [];
    this.each(el => {
        result.push(el.textContent);
    });
    return result;
};

const texts = Dom7('.item').getTextArray();
console.log(texts); // ["Элемент 0", "Элемент 1", ...]

Важно: методы, возвращающие данные, разрывают цепочку вызовов, поэтому их стоит использовать в конце цепочки.

Пример расширения с параметрами и условной логикой

Пользовательский метод может включать сложную логику и дополнительные параметры:

Dom7.fn.toggleClassByCondition = function(className, conditionFn) {
    return this.each((el, index) => {
        if (conditionFn(el, index)) {
            el.classList.add(className);
        } else {
            el.classList.remove(className);
        }
    });
};

// Применение
Dom7('.item').toggleClassByCondition('active', (el, i) => i % 2 === 0);

В этом примере метод добавляет или удаляет класс active в зависимости от результата функции conditionFn.

Создание универсальных плагинов

Пользовательские методы Dom7 могут быть организованы в виде небольших плагинов:

(function($) {
    $.fn.colorize = function(options) {
        const settings = Object.assign({color: 'blue', fontSize: '16px'}, options);
        return this.each(el => {
            el.style.color = settings.color;
            el.style.fontSize = settings.fontSize;
        });
    };
})(Dom7);

// Использование
Dom7('.item').colorize({color: 'green', fontSize: '20px'});

Такой подход позволяет создавать переиспользуемые расширения, которые легко подключать в разных проектах.

Советы по разработке пользовательских методов

  1. Соблюдать цепочку вызовов — если метод изменяет элементы, всегда возвращать this.
  2. Не изменять коллекцию без необходимости — методы должны быть предсказуемыми.
  3. Использовать each или стандартные циклы — это гарантирует обработку всех элементов коллекции.
  4. Проверять входные данные — предотвращает ошибки при использовании метода на пустых или неожиданных коллекциях.
  5. Документировать методы — особенно важно при создании плагинов для команды или повторного использования.

Работа с событиями через пользовательские методы

Dom7 позволяет создавать методы, которые интегрируются с обработкой событий:

Dom7.fn.onClick Log = function(message) {
    return this.each(el => {
        el.addEventListener('click', () => {
            console.log(message, el);
        });
    });
};

Dom7('.button').onClickLog('Нажата кнопка');

Метод становится полностью совместим с остальными инструментами Dom7, сохраняя удобство работы с коллекциями элементов.

Итоговые возможности

Добавление пользовательских методов в Dom7 превращает библиотеку в гибкий инструмент, который можно адаптировать под любые задачи. Пользовательские методы могут:

  • изменять DOM-элементы,
  • возвращать данные,
  • работать с событиями,
  • поддерживать цепочку вызовов,
  • быть объединены в плагины.

Этот механизм расширения обеспечивает легкость масштабирования функционала без модификации исходного кода Dom7.

Оглавление