Перерисовка отформатированного значения в AutoNumeric опирается на синхронизацию внутреннего числового состояния и отображаемого строкового представления в input-элементе. Внутри библиотеки всегда существует два слоя данных: сырое значение (unformatted, числовое) и отформатированное значение (formatted, строка с разделителями, валютными символами и правилами локали).
При любом изменении значения библиотека выполняет последовательность операций:
value DOM-элемента;Ключевой момент заключается в том, что обновление DOM не является простым присваиванием строки — это контролируемая перерисовка с учётом правил локализации и ограничений ввода.
При установке значения программно через методы экземпляра происходит принудительная перерисовка отображаемого значения.
Типовой сценарий:
set(value) или аналогичные методыВ AutoNumeric это сопровождается полной синхронизацией состояния экземпляра с DOM, что исключает рассинхронизацию между моделью и представлением.
Особенность заключается в том, что даже если новое значение эквивалентно текущему, библиотека может пропустить или оптимизировать перерисовку, чтобы избежать лишних операций над DOM.
Изменение конфигурации (например, разделителей, валютного символа, количества знаков после запятой) требует полной переработки отображаемого значения.
При вызове обновления опций:
Это особенно важно при динамическом переключении локали или валютного режима. В таких случаях библиотека не только перерисовывает текущее значение, но и пересчитывает правила интерпретации ввода для последующих операций.
Перерисовка происходит не только при программных изменениях, но и при каждом пользовательском вводе.
При событии ввода выполняется цепочка:
Особенность AutoNumeric заключается в том, что ввод не хранится в «сыром виде» в поле, а постоянно преобразуется в форматированную строку, что создаёт эффект мгновенной перерисовки после каждого нажатия клавиши.
Одной из сложных задач является корректное восстановление позиции каретки после обновления значения.
При каждой перерисовке библиотека:
Без этой механики любое форматирование приводило бы к «скачкам» курсора, особенно при работе с большими числами или валютами.
В ряде случаев требуется не инкрементальное обновление, а полная перерисовка текущего значения. Это происходит при:
Внутри AutoNumeric это приводит к пересборке отображаемой строки на основе текущего числового состояния без доверия к существующему DOM-значению.
Основной принцип работы перерисовки заключается в строгом разделении модели и представления:
При любом изменении выполняется двусторонняя синхронизация:
Такой подход исключает накопление ошибок округления и расхождения между тем, что видит пользователь, и тем, что хранится внутри экземпляра.
Частая перерисовка может приводить к нагрузке на DOM, особенно при быстром вводе. Поэтому в AutoNumeric применяются оптимизации:
input.value;В высоконагруженных интерфейсах это особенно важно, поскольку каждый рефлоу DOM может влиять на производительность формы.
Если значение input изменяется вне библиотеки (например, через прямое
присваивание element.value), внутреннее состояние может
потерять синхронизацию.
В таких случаях требуется принудительное обновление, которое:
Это восстанавливает целостность между представлением и моделью.
При неполном вводе (например, «-», «.» или пустая строка) перерисовка ведёт себя особым образом:
Такой подход предотвращает «дёргание» интерфейса при вводе и обеспечивает стабильную работу поля даже при некорректных промежуточных значениях.
Каждая перерисовка сопровождается цепочкой событий, позволяющих интегрироваться с внешней логикой:
Эти события позволяют отслеживать момент перерисовки и синхронизировать её с другими компонентами интерфейса, например, с валидацией формы или вычислением зависимых полей.
Перерисовка отформатированного значения в AutoNumeric представляет собой детерминированный процесс преобразования числового состояния в визуальное представление с учётом: