Доступ к внутреннему состоянию

Библиотека Inputmask при инициализации создает экземпляр маски, который привязывается к DOM-элементу и становится доступным через свойство элемента. Центральной точкой доступа к внутреннему состоянию выступает объект inputmask, закрепленный за элементом формы.

После применения маски структура выглядит следующим образом:

  • DOM-элемент содержит ссылку на экземпляр Inputmask
  • экземпляр хранит конфигурацию, текущее состояние ввода и служебные структуры
  • внутренние данные разделены на слой отображения и слой логики

Ключевая особенность архитектуры заключается в разделении:

  • визуального буфера (то, что отображается в поле)
  • логической модели маски (шаблон, тесты, правила)
  • состояния валидации (валиден/невалиден/частично заполнен)

Основные точки доступа к состоянию

Доступ к внутреннему состоянию Inputmask осуществляется через несколько стабильно используемых точек:

  • element.inputmask — основной публичный доступ к экземпляру
  • im.opts — конфигурационные параметры
  • im.maskset — структура маски и тестов
  • im.value — текущее значение с учетом маски
  • im.unmaskedvalue() — значение без маски
  • im.isValid() — проверка валидности текущего состояния

Дополнительно существуют внутренние методы и поля, которые не документируются как публичные API, но активно используются внутри библиотеки:

  • _valueGet
  • _valueSet
  • _buffer
  • _lastValidPosition
  • _cursormode
  • skipOptionalPartCharacter

Эти элементы формируют низкоуровневое состояние маски.

maskset: структура и роль

maskset представляет собой ядро логической модели Inputmask. Это объект, описывающий правила маскирования и все возможные состояния ввода.

Внутренняя структура maskset включает:

  • mask — строковое описание маски
  • tests — массив тестов для каждого символа маски
  • buffer — начальное состояние заполнения
  • lastValidPosition — последняя валидная позиция ввода
  • p (positioning) — данные позиционирования символов
  • metadata — дополнительные сведения о маске

Особую роль играет массив tests. Он содержит объекты, описывающие поведение каждого символа:

  • тип символа (цифра, буква, пользовательское правило)
  • регулярное выражение проверки
  • флаги обязательности
  • альтернативные ветки маски

Каждый ввод пользователя проходит через сопоставление с tests, что делает maskset центральным механизмом валидации.

buffer: текущее визуальное состояние

buffer представляет собой массив или строковую структуру, отражающую текущее отображаемое значение в input-поле.

Особенности buffer:

  • содержит как введенные символы, так и placeholder-значения
  • синхронизируется с DOM при каждом событии ввода
  • формируется на основе maskset.tests
  • может содержать служебные символы (например, разделители)

В отличие от unmaskedvalue, buffer всегда отражает визуальное состояние, включая маску.

Пример концептуального различия:

  • buffer: +7 (7__) ___ __ __
  • unmasked value: 77

opts: конфигурация как источник состояния

opts хранит все параметры и настройки, определяющие поведение маски.

Ключевые группы параметров:

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

  • placeholder
  • showMaskOnHover
  • showMaskOnFocus
  • clearMaskOnLostFocus

Валидация

  • greedy
  • skipOptionalPartCharacter
  • jitMasking

Пользовательские определения

  • definitions
  • rules
  • aliases

Обработка событий

  • oncomplete
  • onincomplete
  • oncleared
  • onBeforeMask
  • onBeforeWrite

opts влияет на формирование maskset и пересборку buffer. При изменении параметров часто происходит пересоздание внутренних структур.

Методы получения состояния

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

value

im.value возвращает значение с учетом маски. Это синтетическое состояние, формируемое из buffer.

unmaskedvalue

Метод im.unmaskedvalue() возвращает «чистое» значение без форматирования.

Особенность заключается в том, что результат формируется из:

  • текущего buffer
  • правил maskset
  • определения необязательных сегментов

isValid

Метод im.isValid() проверяет текущее состояние на соответствие маске.

Он опирается на:

  • заполненность обязательных сегментов
  • соответствие tests
  • состояние cursor-based validation

Возвращаемое значение может отражать не только boolean, но и более сложные состояния в зависимости от конфигурации.

Валидация и производные флаги

Состояние валидности внутри Inputmask не является бинарным в классическом смысле. Оно формируется через комбинацию внутренних флагов.

Основные индикаторы состояния:

  • isComplete — маска полностью заполнена
  • isValid — текущее значение соответствует правилам
  • isOptional — заполнение необязательно
  • isDirty — поле было изменено пользователем

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

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

Валидация выполняется инкрементально, при каждом изменении input.

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

Для повышения производительности Inputmask использует ряд оптимизационных механизмов, напрямую влияющих на состояние.

jitMasking

Just-in-time masking означает создание части маски только при необходимости. Это влияет на:

  • buffer
  • tests
  • динамическое расширение maskset

skipOptionalPartCharacter

Определяет символ, который используется для пропуска необязательных частей. Влияет на:

  • заполнение buffer
  • расчёт isComplete
  • поведение cursor

greedy режим

greedy определяет, насколько агрессивно маска заполняет доступные позиции. При включении:

  • buffer становится более «плотным»
  • optional сегменты сокращаются
  • изменяется логика tests traversal

Доступ через DOM-элемент

После инициализации Inputmask связывает состояние с DOM-элементом:

element.inputmask

Через этот объект доступно:

  • element.inputmask.opts
  • element.inputmask.maskset
  • element.inputmask._valueGet()
  • element.inputmask._valueSet()
  • element.inputmask.isValid()

Дополнительно Inputmask использует скрытые поля данных:

  • data-inputmask
  • data-inputmask-mask
  • data-inputmask-placeholder

Эти атрибуты участвуют в восстановлении состояния при повторной инициализации.

Внутренние методы доступа к состоянию

Слой внутренних методов обеспечивает прямую работу с состоянием без участия событий DOM.

_valueGet

Извлекает текущее значение поля с учетом buffer и maskset. Используется внутри библиотеки для синхронизации состояния.

_valueSet

Устанавливает новое значение, проходя через:

  • нормализацию входных данных
  • применение maskset
  • обновление buffer
  • перерасчет позиции курсора

_updateMask

Пересобирает внутреннюю структуру маски при изменении конфигурации.

_revalidate

Запускает повторную проверку всех тестов maskset относительно текущего buffer.

Синхронизация состояния и событийная модель

Состояние Inputmask тесно связано с системой событий. Каждое изменение buffer инициирует цепочку обновлений:

  1. обработка input-события
  2. обновление buffer
  3. пересчет maskset позиции
  4. проверка tests
  5. обновление DOM
  6. вызов callback-ов

События влияют на доступ к состоянию:

  • onBeforeMask — изменение входных данных до обработки
  • onBeforeWrite — контроль финального buffer
  • oncomplete — достижение полного состояния
  • onincomplete — неполное состояние

Структурная модель состояния

Внутреннее состояние Inputmask можно представить как трехслойную систему:

  • слой ввода (DOM input)
  • слой отображения (buffer)
  • слой логики (maskset + opts + tests)

Связь между слоями является двунаправленной:

  • ввод изменяет buffer
  • buffer обновляет DOM
  • maskset определяет допустимость buffer
  • opts регулирует правила преобразования

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

Оглавление