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

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

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

Dom7 реализует элементы как объект, в основе которого лежит массив элементов DOM. Каждый объект Dom7 наследует методы через прототип. Для добавления новых методов используется объект Dom7.prototype. Любой метод, добавленный в прототип, становится доступным для всех объектов Dom7:

Dom7.prototype.myCustomMethod = function() {
    return this.each(function(el) {
        console.log(el.tagName);
    });
};

В этом примере создаётся метод myCustomMethod, который выводит в консоль имена тегов всех элементов, содержащихся в объекте Dom7. Метод использует this.each, что позволяет перебрать каждый элемент, сохраняя цепочку вызовов.

Метод extend

Для массового добавления нескольких методов используется метод Dom7.extend. Он принимает объект с методами и добавляет их в прототип:

Dom7.extend({
    highlight: function(color) {
        return this.each(function(el) {
            el.style.backgroundColor = color || 'yellow';
        });
    },
    toggleVisibility: function() {
        return this.each(function(el) {
            el.style.display = el.style.display === 'none' ? '' : 'none';
        });
    }
});

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

$$('p').highlight('lightblue').toggleVisibility();

Использование цепочек вызовов

Все методы, добавляемые в прототип, должны возвращать объект this, если требуется поддержка цепочек. Это основной принцип работы Dom7, позволяющий писать компактный и читаемый код:

Dom7.prototype.addClassAndLog = function(className) {
    this.addClass(className);
    console.log('Class added:', className);
    return this;
};

$$('div').addClassAndLog('active').css('color', 'red');

Метод добавляет класс, выводит сообщение в консоль и передаёт управление следующему методу.

Методы с параметрами и условиями

Методы, расширяющие прототип, могут принимать любые аргументы и использовать условия для изменения поведения:

Dom7.prototype.setData = function(key, value) {
    return this.each(function(el) {
        if (value !== undefined) {
            el.dataset[key] = value;
        } else {
            console.log(el.dataset[key]);
        }
    });
};

$$('li').setData('id', 'item1');
$$('li').setData('id'); // выводит текущие значения data-id

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

Интеграция с событиями

Расширение прототипа удобно совмещать с системой событий Dom7. Можно создавать методы, автоматически привязывающие обработчики:

Dom7.prototype.onClickAl ert = function(message) {
    return this.on('click', function() {
        alert(message || 'Clicked!');
    });
};

$$('.button').onClickAlert('Button pressed');

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

Лучшие практики при расширении

  • Возврат this: все методы должны возвращать объект Dom7 для сохранения цепочек.
  • Использование each: безопасный перебор элементов предотвращает ошибки при пустых выборках.
  • Изоляция логики: методы должны быть максимально независимыми от внешнего контекста.
  • Проверка аргументов: важно проверять типы и наличие аргументов для предотвращения ошибок.

Расширение с использованием замыканий

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

Dom7.prototype.counterClick = function() {
    let count = 0;
    return this.on('click', function() {
        count += 1;
        console.log('Clicked', count, 'times');
    });
};

$$('.counter-btn').counterClick();

Каждый объект Dom7, вызвавший метод, сохраняет своё локальное состояние, что повышает гибкость разработки.

Взаимодействие с существующими методами

Новые методы могут комбинироваться с встроенными функциями Dom7:

Dom7.prototype.fadeToggle = function(duration = 400) {
    return this.each(function(el) {
        if (el.style.opacity == 0 || el.style.display === 'none') {
            el.style.display = '';
            el.style.transition = `opacity ${duration}ms`;
            el.style.opacity = 1;
        } else {
            el.style.transition = `opacity ${duration}ms`;
            el.style.opacity = 0;
            setTimeout(() => el.style.display = 'none', duration);
        }
    });
};

$$('.box').fadeToggle(600);

Метод сочетает манипуляции с CSS и встроенные методы, создавая удобный инструмент для анимаций.

Закрепление расширений

Для крупных проектов рекомендуется хранить все расширения в отдельном модуле или файле, подключаемом после Dom7:

// dom7-extensions.js
Dom7.extend({
    shake: function() { /* анимация тряски */ },
    blink: function() { /* мигание */ }
});

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

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

Оглавление