Конструктор AutoNumeric

Базовая форма создания экземпляра

Создание экземпляра AutoNumeric осуществляется через конструктор, принимающий DOM-элемент и объект конфигурации. Внутренне инициализация связывает поле ввода с системой форматирования чисел, обеспечивая преобразование отображаемого значения и его «сырого» представления.

Основной синтаксис:

new AutoNumeric(element, options);

Параметр element представляет HTML-элемент ввода, обычно <input>, либо ссылку на DOM-ноду. Параметр options задаёт поведение форматирования, включая разделители, точность, правила округления и ограничения диапазона.

Структура конструктора и процесс инициализации

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

  1. Проверка переданного DOM-элемента
  2. Нормализация входных параметров
  3. Слияние пользовательских настроек с дефолтными
  4. Привязка внутренних обработчиков событий
  5. Первичное форматирование текущего значения поля
  6. Сохранение экземпляра в внутреннем реестре AutoNumeric

На уровне реализации создаётся объект состояния, содержащий как исходное значение, так и его форматированное представление.

Передача DOM-элемента

Конструктор принимает как уже существующий DOM-элемент, так и селектор, который предварительно резолвится в элемент.

Пример передачи элемента:

const input = document.querySelector("#price");
new AutoNumeric(input, { decimalPlaces: 2 });

При использовании некорректного или отсутствующего элемента инициализация завершается без создания экземпляра, поскольку отсутствует точка привязки для управления вводом.

Объект конфигурации

Конфигурация передаётся вторым аргументом и определяет поведение форматирования. Внутри конструктора происходит глубокое объединение с предустановленным набором параметров.

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

Форматирование чисел

  • количество знаков после запятой
  • символы разделителей
  • правила группировки разрядов

Ограничения

  • минимальное значение
  • максимальное значение
  • блокировка выхода за диапазон

Поведение ввода

  • автоматическая корректировка
  • обработка отрицательных чисел
  • очистка некорректного ввода

Пример конфигурации:

new AutoNumeric(input, {
  decimalPlaces: 3,
  digitGroupSeparator: " ",
  decimalCharacter: ",",
  minimumValue: "0",
  maximumValue: "100000"
});

Внутреннее состояние экземпляра

После инициализации создаётся объект экземпляра, содержащий:

  • ссылку на DOM-элемент
  • текущие настройки
  • текущее числовое значение в «сыром» виде
  • форматированное строковое значение
  • флаги состояния (валидность, фокус, режим очистки)

Это состояние обновляется при каждом событии ввода.

Обработка начального значения

При создании экземпляра значение, уже находящееся в поле ввода, проходит парсинг. В зависимости от настроек выполняются операции:

  • удаление символов группировки
  • замена десятичного разделителя
  • приведение строки к числовому формату
  • проверка на соответствие диапазону

После этого значение перезаписывается в отформатированном виде.

Поддержка нескольких экземпляров

Конструктор допускает создание множества независимых экземпляров AutoNumeric на одной странице. Каждый экземпляр изолирует своё состояние и не влияет на другие поля.

new AutoNumeric(document.querySelector("#price"), { decimalPlaces: 2 });
new AutoNumeric(document.querySelector("#tax"), { decimalPlaces: 4 });

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

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

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

Механизм защиты предотвращает:

  • утечку обработчиков событий
  • конфликт форматов
  • дублирование состояния

Интеграция с жизненным циклом DOM

Конструктор автоматически привязывает обработчики событий:

  • input
  • keydown
  • focus
  • blur
  • paste

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

Особенности работы с типами данных

Внутри конструктора происходит различие между:

  • строковым представлением (отображение в input)
  • числовым значением (логическая модель)

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

Использование настроек по умолчанию

При отсутствии конфигурации используется набор стандартных параметров AutoNumeric. Эти параметры определяют базовое поведение:

  • фиксированная точность
  • стандартные разделители
  • мягкая обработка некорректного ввода

Переопределение происходит только для явно указанных опций, остальные остаются неизменными благодаря механизму глубокого слияния объектов.

Поведение при нечисловых значениях

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

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

Результат всегда приводится к внутреннему числовому состоянию.

Связь конструктора с API экземпляра

Созданный через конструктор объект предоставляет доступ к методам управления:

  • изменение значения
  • обновление конфигурации
  • уничтожение экземпляра
  • получение сырого значения

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

Инициализация через альтернативные формы

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

Внутренние оптимизации конструктора

В процессе создания экземпляра применяются оптимизации:

  • кеширование настроек
  • минимизация повторных вычислений форматирования
  • переиспользование обработчиков событий
  • ускоренный парсинг строковых значений

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

Оглавление