Метод multiple

Назначение метода multiple

Метод multiple в библиотеке AutoNumeric предназначен для массовой инициализации числового форматирования сразу для нескольких DOM-элементов. Его основная задача — упростить работу с формами, таблицами и любыми интерфейсами, где присутствует большое количество однотипных числовых полей, требующих одинаковой или частично различающейся конфигурации форматирования.

Вместо последовательного создания экземпляров AutoNumeric для каждого элемента вручную, метод multiple позволяет выполнить инициализацию за один вызов, обеспечивая единообразие поведения и сокращение объёма кода.

Ключевая особенность заключается в том, что метод работает как над коллекциями DOM-элементов, так и над селекторами, возвращая набор управляемых экземпляров AutoNumeric.

Общая сигнатура и варианты вызова

В зависимости от версии библиотеки и способа подключения, метод multiple может использоваться в нескольких формах:

AutoNumeric.multiple(domElements, options);
AutoNumeric.multiple(selector, options);
AutoNumeric.multiple(nodeList, options);

Где:

  • domElements — массив или HTMLCollection элементов <input>, <div> или других поддерживаемых контейнеров;
  • selector — CSS-селектор строки;
  • nodeList — результат document.querySelectorAll;
  • options — объект конфигурации AutoNumeric.

Метод возвращает массив экземпляров AutoNumeric, соответствующих каждому обработанному элементу.

Принцип работы метода

Внутри метод multiple выполняет последовательность операций:

  1. Определение набора элементов

    • Если передан селектор — выполняется querySelectorAll.
    • Если передан NodeList или массив — используется напрямую.
    • Выполняется фильтрация неподдерживаемых элементов.

  2. Инициализация экземпляров

    • Для каждого элемента создаётся новый экземпляр AutoNumeric.
    • Применяется переданная конфигурация options.

  3. Сбор результатов

    • Все созданные экземпляры сохраняются в массив.
    • Массив возвращается как результат вызова.

Таким образом, метод выступает как фабрика экземпляров с массовым применением конфигурации.

Базовое использование

Наиболее простой сценарий — инициализация всех полей ввода с одинаковыми настройками:

AutoNumeric.multiple('.price-field', {
    decimalPlaces: 2,
    digitGroupSeparator: ' ',
    decimalCharacter: '.'
});

В этом примере все элементы с классом price-field получают одинаковую конфигурацию форматирования.

Работа с NodeList и HTMLCollection

Метод корректно обрабатывает стандартные коллекции DOM:

const inputs = document.querySelectorAll('.amount-input');

AutoNumeric.multiple(inputs, {
    currencySymbol: '₸',
    currencySymbolPlacement: 's',
    minimumValue: '0'
});

Также допустимо использование getElementsByClassName:

const elements = document.getElementsByClassName('numeric');

AutoNumeric.multiple(elements, {
    decimalPlaces: 0
});

В обоих случаях библиотека приводит коллекции к единому внутреннему формату обработки.

Индивидуальные настройки для каждого элемента

Хотя основная идея метода — массовое применение одинаковой конфигурации, возможен сценарий передачи массива настроек.

Пример:

AutoNumeric.multiple([
    { element: '#price1', options: { decimalPlaces: 2 } },
    { element: '#price2', options: { decimalPlaces: 0 } },
    { element: '#price3', options: { decimalPlaces: 4 } }
]);

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

Возвращаемое значение

Метод multiple возвращает массив экземпляров:

const instances = AutoNumeric.multiple('.field', {
    decimalPlaces: 2
});

console.log(instances);

Каждый элемент массива — это полноценный экземпляр AutoNumeric, поддерживающий все стандартные методы:

  • set(value)
  • get()
  • clear()
  • format()
  • unformat()
  • remove()

Это позволяет в дальнейшем управлять всеми полями централизованно.

Централизованное управление экземплярами

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

const instances = AutoNumeric.multiple('.salary', {
    decimalPlaces: 2
});

instances.forEach(instance => {
    instance.set(1000);
});

Или получение значений:

const values = instances.map(instance => instance.get());

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

Поведение при повторной инициализации

При повторном вызове multiple на тех же элементах возможны два сценария:

  • если элементы уже инициализированы, библиотека может либо игнорировать повторную инициализацию, либо переинициализировать экземпляры в зависимости от настроек;
  • при строгой конфигурации может быть вызвано исключение или предупреждение.

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

AutoNumeric.isManagedByAutoNumeric(element);

Совместимость с динамическим DOM

Метод multiple часто используется в интерфейсах, где элементы добавляются динамически:

function initNewRow() {
    const row = document.createElement('div');
    row.innerHTML = `
        <input class="sum-field" />
        <input class="tax-field" />
    `;
    document.body.appendChild(row);

    AutoNumeric.multiple(row.querySelectorAll('input'), {
        decimalPlaces: 2
    });
}

Это позволяет инициализировать новые элементы без пересборки всей формы.

Производительность при массовой инициализации

При работе с большим количеством элементов (сотни или тысячи полей) метод multiple имеет важные особенности:

  • инициализация выполняется последовательно, без внутреннего параллелизма;
  • DOM-операции минимизируются за счёт пакетной обработки;
  • накладные расходы связаны исключительно с созданием экземпляров.

Для оптимизации рекомендуется:

  • избегать повторных вызовов на одном и том же наборе элементов;
  • использовать делегирование и группировку элементов до инициализации;
  • применять одинаковые настройки для максимального ускорения обработки.

Взаимодействие с событиями

Каждый экземпляр, созданный через multiple, сохраняет стандартное поведение AutoNumeric:

  • обработка input;
  • синхронизация значений;
  • форматирование при потере фокуса;
  • реакция на программные изменения через set().

Пример обработки:

const instances = AutoNumeric.multiple('.field', {
    decimalPlaces: 2
});

instances.forEach(instance => {
    instance.node.addEventListener('autoNumeric:formatted', (e) => {
        console.log('Форматировано значение:', e.detail.newValue);
    });
});

Использование в таблицах

Типичный сценарий — финансовые таблицы:

AutoNumeric.multiple('table .cell-input', {
    decimalPlaces: 2,
    digitGroupSeparator: ','
});

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

Типичные ошибки при использовании

Частые проблемы связаны не с самим методом, а с контекстом применения:

1. Повторная инициализация

AutoNumeric.multiple('.field', options);
AutoNumeric.multiple('.field', options); // потенциальный конфликт

2. Передача невалидного набора элементов

AutoNumeric.multiple(null, options);

3. Смешивание DOM-типов

Передача объектов, не являющихся элементами DOM, приводит к игнорированию или ошибкам обработки.

Ограничения метода

Метод multiple не предназначен для:

  • частичного обновления конфигурации отдельных экземпляров;
  • динамического пересчёта значений без обращения к экземплярам;
  • управления логикой ввода на уровне бизнес-правил.

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

Роль в архитектуре AutoNumeric

Метод multiple выполняет важную роль в масштабируемых интерфейсах:

  • снижает количество ручного кода инициализации;
  • обеспечивает единообразие конфигураций;
  • ускоряет внедрение библиотеки в крупные формы;
  • упрощает поддержку финансовых и аналитических интерфейсов.

Его использование особенно эффективно в сочетании с динамическими интерфейсами, где количество полей заранее неизвестно и может изменяться в процессе работы приложения.

Оглавление