Обертки и хелперы

Cleave.js предоставляет мощные возможности по форматированию вводимых данных, а обертки и хелперы позволяют строить более гибкую и модульную архитектуру работы с полями ввода. Эти инструменты особенно полезны при интеграции Cleave.js в крупные приложения, где необходимо обеспечить повторное использование и унификацию логики форматирования.

Обертки (Wrappers)

Обертка — это функция или класс, который инкапсулирует создание экземпляра Cleave.js и позволяет управлять конфигурацией и событиями централизованно. Основные преимущества использования оберток:

  • Повторное использование настроек. Вместо того чтобы многократно инициализировать Cleave с одинаковыми параметрами, обертка позволяет создавать преднастроенные экземпляры.
  • Централизованное управление событиями. Любые события, такие как onValueChanged, можно обрабатывать внутри обертки, упрощая поддержку кода.
  • Расширяемость. В обертку легко добавить дополнительные функции, например, валидацию или адаптацию формата под определённые условия.

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

class NumericInput {
    constructor(selector, options = {}) {
        this.input = document.querySelector(selector);
        this.cleave = new Cleave(this.input, {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand',
            numeralDecimalScale: 2,
            ...options
        });
    }

    getValue() {
        return this.cleave.getRawValue();
    }

    setValue(value) {
        this.cleave.setRawValue(value);
    }

    onChange(callback) {
        this.input.addEventListener('input', () => {
            callback(this.getValue());
        });
    }
}

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

const priceInput = new NumericInput('#price', { numeralDecimalScale: 0 });
priceInput.onChange((value) => console.log('Текущее значение:', value));

В данном примере класс NumericInput служит оберткой над Cleave.js, предоставляя удобные методы для получения, установки значения и обработки событий.

Хелперы (Helpers)

Хелперы представляют собой утилитарные функции, которые упрощают конфигурацию и обработку данных Cleave.js. Они не создают экземпляр Cleave, но помогают динамически формировать опции и обрабатывать ввод.

Основные категории хелперов:

  1. Генерация масок Позволяет динамически создавать маску ввода на основе параметров, например, длины номера телефона или типа документа.

    function phoneMask(countryCode = '+7') {
    return {
        phone: true,
        phoneRegionCode: countryCode.replace('+', '')
    };
}

const phoneInput = new Cleave('#phone', phoneMask('+1'));

  2. Форматирование значений вручную Иногда необходимо отформатировать значение вне контекста события ввода, например, при загрузке данных с сервера:

    function formatCurrency(value) {
    const cleave = new Cleave('', { numeral: true, numeralThousandsGroupStyle: 'thousand' });
    cleave.setRawValue(value);
    return cleave.getFormattedValue();
}

console.log(formatCurrency(1234567)); // "1,234,567"

  3. Проверка соответствия формата Хелперы могут выполнять проверку, соответствует ли текущее значение заданному формату:

    function isValidCreditCard(value) {
    const cleave = new Cleave('', { creditCard: true });
    cleave.setRawValue(value);
    return cleave.getFormattedValue().replace(/\s+/g, '').length === 16;
}

Интеграция оберток и хелперов

Эффективное использование Cleave.js подразумевает сочетание оберток и хелперов. Обертки обеспечивают единый интерфейс для работы с элементами, а хелперы предоставляют гибкие инструменты для динамических операций.

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

class FormattedInput {
    constructor(selector, type, options = {}) {
        this.input = document.querySelector(selector);
        this.type = type;
        this.cleave = new Cleave(this.input, {
            ...FormattedInput.getOptions(type),
            ...options
        });
    }

    static getOptions(type) {
        const masks = {
            phone: () => ({ phone: true, phoneRegionCode: 'RU' }),
            creditCard: () => ({ creditCard: true }),
            currency: () => ({ numeral: true, numeralThousandsGroupStyle: 'thousand' })
        };
        return masks[type] ? masks[type]() : {};
    }

    getValue() {
        return this.cleave.getRawValue();
    }

    setValue(value) {
        this.cleave.setRawValue(value);
    }

    onChange(callback) {
        this.input.addEventListener('input', () => callback(this.getValue()));
    }
}

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

const phoneField = new FormattedInput('#phone', 'phone');
const cardField = new FormattedInput('#card', 'creditCard');
const priceField = new FormattedInput('#price', 'currency');

Такой подход упрощает масштабирование формы и позволяет централизованно управлять всеми форматами, минимизируя дублирование кода.

Рекомендации по проектированию

  • Единый источник настроек. Создавать объект или класс, который хранит все стандартные конфигурации масок.
  • Минимизация побочных эффектов. Обертки должны управлять только форматированием и событиями, избегая лишней логики.
  • Лёгкая заменяемость. Хелперы должны быть независимыми и использоваться как в обертках, так и для разового форматирования.

Использование оберток и хелперов делает Cleave.js более мощным и предсказуемым инструментом, позволяя создавать масштабируемые формы с единым стилем ввода и управлением форматами.

Оглавление