Проверка состояния экземпляра

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

Одним из косвенных индикаторов готовности выступает наличие внутреннего хранилища данных и привязанных DOM-элементов:

  • наличие passedElement — исходного элемента <select> или <input>;
  • наличие store — внутреннего состояния данных;
  • отсутствие флага уничтожения после вызова destroy().

При разрушении экземпляра (destroy()) дальнейшие обращения к методам становятся некорректными, а DOM-обвязка Choices удаляется.

Проверка типа экземпляра и режима работы

Choices.js поддерживает два основных режима:

  • одиночный выбор (isSelectOne);
  • множественный выбор (isSelectMultiple).

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

const isSingle = choices.isSelectOne;
const isMultiple = choices.isSelectMultiple;

Эти флаги определяют:

  • структуру возвращаемых значений;
  • допустимость множественных активных элементов;
  • поведение очистки и добавления значений.

Состояние активности и доступности

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

Основные проверки:

choices.isDisabled

и методы управления:

choices.disable();
choices.enable();

Состояние disabled синхронизируется с исходным DOM-элементом и отражается на UI-компоненте. При отключении:

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

Дополнительно может учитываться состояние фокуса:

choices._isFocussed

Хотя это внутреннее поле, оно отражает факт активности интерфейса в данный момент.

Проверка открытия и закрытия списка

Одно из ключевых состояний — раскрыт ли список выбора. Оно влияет на обработку клавиатурной навигации и отображение выпадающего меню.

choices.isOpen

При открытом состоянии:

  • активируется список вариантов;
  • включается обработка стрелочной навигации;
  • подсвечиваются элементы выбора.

При закрытии:

  • список скрывается;
  • очищается временное состояние подсветки.

Состояние выбранных значений

Одной из наиболее частых проверок является наличие выбранных элементов.

const value = choices.getValue();

Поведение зависит от режима:

  • для одиночного выбора возвращается объект или строка;
  • для множественного — массив объектов.

Проверка наличия значений:

const hasValue = Array.isArray(value)
  ? value.length > 0
  : value !== undefined && value !== null;

Внутренне Choices хранит активные элементы в структуре:

choices._store.activeItems

Эта коллекция отражает текущее состояние выбранных значений и синхронизируется с UI.

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

Состояние списка доступных опций определяется через внутреннее хранилище:

choices._store.choices

Пустой список может означать:

  • отсутствие данных после инициализации;
  • очистку через clearStore();
  • результат динамической фильтрации.

Метод очистки:

choices.clearStore();

После вызова список вариантов становится пустым, но экземпляр остаётся активным.

Проверка фильтрации и поискового состояния

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

Внутренние признаки:

  • активный input поиска;
  • отфильтрованный список choices._store.choices;
  • наличие подсвеченного элемента.

Подсветка управляется через:

choices._highlightChoice

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

Состояние выбора и активных элементов

В режиме множественного выбора важным индикатором является список активных элементов:

choices._store.activeItems

Проверки включают:

  • наличие выбранных элементов;
  • соответствие ограничениям (maxItems);
  • возможность добавления новых значений.

Пример проверки переполнения:

const isFull = choices.config.maxItemCount > 0 &&
               choices._store.activeItems.length >= choices.config.maxItemCount;

Проверка валидности и синхронизации с DOM

Состояние экземпляра должно быть синхронизировано с исходным элементом формы.

Ключевые признаки корректной синхронизации:

  • значение <select> совпадает с внутренним store;
  • DOM-элементы .choices__item соответствуют activeItems;
  • отсутствие рассинхронизации после программного изменения.

Для получения актуального значения из DOM:

choices.passedElement.element.value

Проверка жизненного цикла экземпляра

Choices.js не предоставляет прямого публичного флага initialized, однако состояние можно определить косвенно:

  • наличие store;
  • доступность методов API;
  • существование DOM-обвязки .choices контейнера.

После вызова:

choices.destroy();

экземпляр теряет внутренние ссылки, и любые проверки состояния должны учитывать факт уничтожения. Типичные признаки:

  • отсутствие passedElement;
  • удалённый контейнер .choices;
  • невозможность вызвать методы без ошибок.

Проверка через события

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

  • showDropdown — список открыт;
  • hideDropdown — список закрыт;
  • addItem — добавлено значение;
  • removeItem — удалено значение;
  • change — изменено состояние выбора;
  • search — активирован поиск.

Использование событий позволяет фиксировать переходы между состояниями без прямого доступа к внутренним полям:

element.addEventListener('change', (event) => {
  const currentValue = event.detail.value;
});

Комплексная проверка состояния экземпляра

В практических сценариях проверка состояния объединяет несколько аспектов:

  • активность (isDisabled);
  • раскрытие списка (isOpen);
  • наличие значений (getValue);
  • наличие вариантов (_store.choices);
  • режим работы (isSelectOne, isSelectMultiple);
  • жизнеспособность экземпляра после инициализации.

Такой подход позволяет определить текущее поведение компонента и корректно реагировать на изменения без прямого вмешательства во внутреннюю реализацию библиотеки.

Оглавление