AutoNumeric работает на основе системы конфигураций, где каждый экземпляр получает набор параметров форматирования чисел. Эти параметры управляют отображением десятичных разделителей, группировкой разрядов, ограничениями ввода, поведением при фокусе и потерях фокуса, а также правилами округления и обработки пустых значений. При масштабировании приложения становится критически важным централизованное управление этими настройками, чтобы исключить дублирование конфигураций и обеспечить единое поведение числовых полей.
В AutoNumeric используется многоуровневая модель применения настроек:
При создании нового экземпляра происходит слияние конфигураций: базовый набор параметров берётся из глобальных значений, после чего поверх накладываются пользовательские настройки. Это позволяет задавать корпоративные или проектные стандарты форматирования и изменять их точечно там, где требуется исключение.
Приоритет всегда определяется следующим образом:
параметры экземпляра > глобальные настройки > встроенные дефолты библиотеки
Центральный механизм задания значений по умолчанию основан на методе:
AutoNumeric.setDefaultOptions({
digitGroupSeparator: ' ',
decimalCharacter: ',',
decimalPlaces: 2,
minimumValue: '0',
modifyValueOnWheel: false
});
После выполнения этого кода каждый новый экземпляр AutoNumeric будет автоматически использовать указанные параметры, если они не были переопределены локально.
Глобальные настройки особенно полезны в следующих случаях:
Важно учитывать, что глобальные настройки применяются только к экземплярам, созданным после их установки. Уже существующие объекты не пересчитывают конфигурацию автоматически.
При инициализации нового поля происходит глубокое объединение объектов настроек. Это означает, что вложенные параметры не заменяются целиком, а дополняются.
Пример:
AutoNumeric.setDefaultOptions({
decimalCharacter: '.',
digitGroupSeparator: ',',
decimalPlaces: 2
});
new AutoNumeric('#price', {
decimalPlaces: 4
});
В этом случае итоговая конфигурация для #price
будет:
decimalCharacter → .digitGroupSeparator → ,decimalPlaces → 4Локальное значение перезаписывает глобальное, остальные параметры наследуются.
AutoNumeric предоставляет набор предопределённых конфигураций, которые можно использовать как базу для глобальных настроек. Эти профили содержат готовые комбинации параметров для типовых сценариев:
Пример применения предустановки как базы:
AutoNumeric.setDefaultOptions(AutoNumeric.getPredefinedOptions().numericPos);
После этого вся система начинает работать в режиме выбранного профиля, если он доступен в сборке библиотеки.
В реальных приложениях глобальные настройки обычно выносятся в отдельный модуль конфигурации. Это позволяет контролировать поведение числового ввода в одном месте.
// numeric-config.js
export const numericDefaults = {
digitGroupSeparator: ' ',
decimalCharacter: '.',
decimalPlaces: 2,
emptyInputBehavior: 'zero',
unformatOnSubmit: true
};
// init.js
import { numericDefaults } from './numeric-config.js';
AutoNumeric.setDefaultOptions(numericDefaults);
Такая структура снижает вероятность расхождений в форматировании между различными частями интерфейса.
В сложных интерфейсах часто требуется разделение правил форматирования по областям. Например, финансовые поля могут использовать одну конфигурацию, а технические параметры — другую.
Для этого используется временное переопределение глобальных значений:
const financeDefaults = {
digitGroupSeparator: ' ',
decimalCharacter: '.',
decimalPlaces: 2
};
const techDefaults = {
digitGroupSeparator: '',
decimalCharacter: '.',
decimalPlaces: 6
};
AutoNumeric.setDefaultOptions(financeDefaults);
const priceField = new AutoNumeric('#price');
AutoNumeric.setDefaultOptions(techDefaults);
const precisionField = new AutoNumeric('#precision');
После создания экземпляров глобальные настройки можно вернуть к исходному состоянию или заменить на другие.
Экземпляр AutoNumeric не является полностью изолированным от глобальной конфигурации в момент создания. Однако после инициализации он сохраняет собственный набор параметров. Это означает:
Такое поведение предотвращает неожиданные изменения UI в процессе работы приложения.
При динамической смене конфигурации важно учитывать текущие активные экземпляры. Типичный подход включает сохранение ссылок на объекты:
const instances = [];
AutoNumeric.setDefaultOptions({
decimalCharacter: ',',
digitGroupSeparator: ' '
});
instances.push(new AutoNumeric('#a'));
instances.push(new AutoNumeric('#b'));
// изменение глобальных настроек
AutoNumeric.setDefaultOptions({
decimalCharacter: '.',
digitGroupSeparator: ','
});
// новые экземпляры используют новую конфигурацию
instances.push(new AutoNumeric('#c'));
Таким образом обеспечивается предсказуемость поведения без побочных эффектов.
Глобальные настройки в AutoNumeric выполняют роль абстрактного слоя над отдельными полями ввода. Они позволяют отделить бизнес-логику от деталей отображения чисел. Вместо повторения одинаковых параметров в каждом компоненте система опирается на единый источник правил, который может быть изменён централизованно.
Такой подход особенно эффективен в приложениях с большим количеством финансовых или аналитических форм, где требуется строгая консистентность форматирования и поведения числовых данных.