В AutoNumeric расширяемость строится вокруг набора точек интеграции,
позволяющих вмешиваться в процесс форматирования, парсинга и обновления
значения инпута без модификации ядра библиотеки. Под «плагинами» в
контексте AutoNumeric обычно понимаются внешние модули и
пользовательские расширения, которые используют публичный API: хуки,
кастомные форматы, обработчики событий и обёртки над экземпляром
AutoNumeric.
Ключевая идея архитектуры заключается в разделении
ответственности:
- ядро отвечает за математическую и форматную корректность
значения;
- расширения управляют поведением ввода, интеграцией и бизнес-логикой
отображения;
- события связывают изменения состояния с внешними системами.
Такой подход позволяет строить надстройки для валют, масок ввода,
синхронизации с фреймворками и сложных финансовых интерфейсов.
Механизм
расширения через конфигурации как основа «плагинности»
AutoNumeric не имеет классической системы плагинов с регистрацией
модулей. Вместо этого используется конфигурационный слой, который
фактически выполняет ту же роль.
Каждый экземпляр создаётся с набором опций:
- форматирование (decimalPlaces, digitGroupSeparator)
- правила ввода (allowDecimalPadding, modifyValueOnWheel)
- ограничения (minimumValue, maximumValue)
- поведение отображения (currencySymbol, suffixText)
Комбинации этих параметров формируют поведение, эквивалентное
отдельным плагинам.
Пример логики расширения:
- конфигурация «валютного плагина» = символ валюты + группировка
разрядов + фиксированные знаки после запятой
- конфигурация «процентного плагина» = suffix “%” + масштабирование
значения при вводе
Таким образом, плагин в AutoNumeric часто является не кодом, а
преднастройкой поведения.
Хуки
жизненного цикла как точка внедрения расширений
Одним из ключевых механизмов расширения являются события и хуки,
которые позволяют перехватывать изменения значения.
Основные точки интеграции:
- beforeFormat — перед форматированием значения
- afterFormat — после форматирования
- beforeSet — перед установкой значения
- afterSet — после установки значения
- onInvalidPaste — при вставке некорректного значения
Эти хуки позволяют реализовывать сложные расширения без изменения
ядра.
Пример логики плагина
валидации
Расширение может блокировать определённые диапазоны значений:
- перехват afterSet
- проверка бизнес-правил
- откат значения при нарушении условий
Таким образом реализуется «валидационный плагин», который работает
поверх стандартных ограничений minimumValue и maximumValue.
Кастомные
форматтеры как форма плагинов отображения
Форматирование чисел — центральная часть AutoNumeric. Хотя библиотека
предоставляет встроенные правила, возможно внедрение кастомных стратегий
через конфигурации и перехват значений.
Расширения такого типа используются для:
- нестандартных валютных форматов (например, криптовалюты)
- инженерной нотации (1.2e6 → 1.2M)
- локализованных форматов с нестандартными разделителями
Типичная схема работы:
- перехват сырого значения
- преобразование в промежуточный формат
- возврат строки для отображения
Кастомный форматтер фактически заменяет стандартный слой отображения,
сохраняя внутреннюю числовую модель неизменной.
Плагины
бизнес-логики поверх числовых инпутов
AutoNumeric часто используется в финансовых и расчётных интерфейсах,
где требуется связывать вводимые значения с внешними системами
расчёта.
Типовые расширения:
Связанные вычисления
- изменение одного поля вызывает пересчёт других
- синхронизация нескольких AutoNumeric-инстансов
- каскадное обновление значений
Реализуется через обработчики событий:
- onChange
- onInput
- afterSet
Плагин «формульных полей»
Расширение может интерпретировать значение как часть выражения:
- ввод суммы
- автоматический расчёт налогов
- динамическое округление
AutoNumeric в этом случае используется как слой ввода, а плагин — как
вычислительный движок.
Интеграционные плагины с
фреймворками
Одним из наиболее распространённых типов расширений являются обёртки
для UI-фреймворков.
React-интеграция
Плагин для React обычно реализует:
- синхронизацию состояния через props
- управление uncontrolled input
- пересоздание экземпляра AutoNumeric при изменении конфигурации
Ключевая задача — избежать рассинхронизации между виртуальным DOM и
внутренним состоянием AutoNumeric.
Vue-интеграция
Во Vue-окружении расширение чаще использует:
- директивы (v-autonumeric)
- реактивные watchers
- автоматическую инициализацию при mounted
Особенность — необходимость аккуратно управлять жизненным циклом
DOM-элемента.
Angular-интеграция
Angular-плагины строятся вокруг:
- ControlValueAccessor
- реактивных форм
- двустороннего биндинга
AutoNumeric выступает как адаптер между DOM и моделью формы.
Плагины для
масок и специальных форматов ввода
Хотя AutoNumeric не является масочной библиотекой, его расширения
часто добавляют поведение масок:
- фиксированные префиксы (например, валюты)
- строгие шаблоны отображения
- ограничение допустимых символов
Такие плагины реализуются через:
- перехват ввода символов
- фильтрацию значения до передачи в ядро
- модификацию отображаемой строки после форматирования
Пример логики:
- пользователь вводит «1234»
- плагин добавляет маску «USD 1,234.00»
- внутреннее значение остаётся числом
Расширения поведения
при вставке и вводе
Особый класс плагинов связан с обработкой paste-событий.
Возможности:
- очистка входных данных от символов валют
- нормализация десятичного разделителя
- блокировка вставки научной нотации
- преобразование локализованных чисел
Такие расширения критичны в системах, где данные поступают из внешних
источников (Excel, API, буферы обмена).
Плагины сериализации и
экспорта значений
AutoNumeric хранит значение в числовом виде, но часто требуется
экспорт в различные форматы.
Расширения этого типа обеспечивают:
- экспорт в JSON-структуры
- преобразование в строки бухгалтерского формата
- генерацию отчётных значений с округлением по правилам
Типовая схема:
- getNumericValue → получение чистого числа
- apply transformation → применение правил плагина
- return formatted export value
Плагины
синхронизации состояния между инстансами
В сложных интерфейсах несколько AutoNumeric-полей могут быть
связаны.
Механизмы синхронизации:
- общий event bus
- подписка на изменения значений
- централизованный store (Redux-подобные системы)
Пример сценария:
- поле A = сумма без НДС
- поле B = сумма с НДС
- поле C = налог
Плагин обеспечивает автоматическое перераспределение значений при
изменении любого из полей.
Безопасность и
устойчивость расширений
Расширения AutoNumeric должны учитывать строгую числовую модель
библиотеки.
Ключевые принципы:
- недопустимо изменять DOM напрямую без синхронизации с
состоянием
- любые преобразования должны сохранять валидное числовое
значение
- перехваты событий не должны нарушать цикл форматирования
Ошибки в плагинах часто приводят к:
- десинхронизации отображения и значения
- накоплению округлительных погрешностей
- конфликтам между обработчиками событий
Комбинирование
нескольких расширений в одной системе
Практическая архитектура часто включает сразу несколько слоёв:
- конфигурационный «плагин валюты»
- плагин бизнес-логики расчётов
- интеграционный слой фреймворка
- слой экспорта данных
Критически важен порядок применения:
- обработка ввода
- нормализация значения
- бизнес-логика
- форматирование отображения
- экспорт/синхронизация
Нарушение этой последовательности приводит к неконсистентному
поведению интерфейса.