Массовые операции с данными

Choices.js оперирует внутренним хранилищем, в котором опции представлены унифицированными объектами. Каждая запись содержит минимум: value, label, selected, disabled, а также дополнительные поля при группировке или кастомных конфигурациях.

Массовые операции в библиотеке строятся вокруг двух подходов:

  • полная замена набора данных
  • инкрементальное обновление коллекции

Ключевой особенностью является то, что большинство методов не просто изменяют DOM, а синхронизируют внутренний стор и представление компонента.

Массовое добавление данных через setChoices

Основной механизм загрузки большого объёма данных реализован через setChoices. Метод предназначен для полной или частичной замены текущего набора опций.

const choices = new Choices('#sel ect', {
  removeItemButton: true
});

choices.setChoices([
  { value: '1', label: 'JavaScript' },
  { value: '2', label: 'TypeScript' },
  { value: '3', label: 'Python' }
], 'value', 'label', false);

Параметры метода:

  • массив объектов данных
  • ключ для значения (value)
  • ключ для отображаемого текста (label)
  • флаг очистки текущих данных

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

  • true — текущие данные полностью заменяются
  • false — новые данные добавляются к существующим

Форматы входных данных при массовой загрузке

Choices.js допускает несколько структур входных данных:

Плоский массив

[
  { value: 'a', label: 'Option A' },
  { value: 'b', label: 'Option B' }
]

Группированные данные

[
  {
    label: 'Frontend',
    choices: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' }
    ]
  }
]

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

Инкрементальное добавление через addChoices

Метод addChoices используется для добавления новых элементов без пересборки всего списка.

choices.addChoices([
  { value: '4', label: 'Go' },
  { value: '5', label: 'Rust' }
], 'value', 'label', false);

Особенности массового добавления:

  • не очищает существующие данные
  • поддерживает батчевую вставку
  • быстрее при частичном обновлении

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

Массовое обновление данных и переинициализация

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

Полная перезагрузка набора

choices.clearStore();
choices.setChoices(newData, 'value', 'label', true);

clearStore очищает:

  • список опций
  • выбранные значения
  • внутренние индексы

Такой подход используется при:

  • смене источника данных
  • переключении контекста (например, язык, категория)
  • загрузке новой выборки с сервера

Массовое удаление элементов

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

Удаление по значению

['1', '2', '3'].forEach(value => {
  choices.removeActiveItems(value);
});

Фильтрация и пересборка

Более эффективный подход — пересборка коллекции:

const filtered = currentData.filter(item => !toRemove.includes(item.value));

choices.clearStore();
choices.setChoices(filtered, 'value', 'label', true);

Этот метод предпочтителен при больших наборах данных, так как снижает количество DOM-операций.

Массовая работа с выбранными значениями

Для установки множества выбранных элементов используется setValue.

choices.setValue([
  { value: '1', label: 'JavaScript' },
  { value: '3', label: 'Python' }
]);

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

  • заменяет текущее состояние выбора
  • синхронизирует UI и внутренний стор
  • поддерживает множественный режим

Для получения состояния используется:

const selected = choices.getValue(true);

Оптимизация при больших объёмах данных

При работе с тысячами элементов критичны следующие факторы:

1. Пакетные операции вместо циклов

Неправильно:

data.forEach(item => choices.addChoice(item));

Правильно:

choices.setChoices(data, 'value', 'label', true);

2. Отключение лишних перерисовок

При массовых обновлениях важно минимизировать количество рендеров. Внутренние механизмы Choices.js частично оптимизируют это, но архитектурно правильнее избегать множественных вызовов API.

3. Использование ленивой подгрузки

При больших наборах данных используется стратегия частичной загрузки:

fetch('/api/options?page=1')
  .then(res => res.json())
  .then(data => {
    choices.setChoices(data, 'id', 'name', true);
  });

Дальнейшие страницы добавляются через addChoices.

Асинхронные массовые обновления

Choices.js часто используется вместе с API, где данные приходят частями.

Типичный сценарий:

async function loadAll() {
  const response = await fetch('/api/all-options');
  const data = await response.json();

  choices.clearStore();
  choices.setChoices(data, 'id', 'title', true);
}

При потоковой загрузке:

async function loadChunks() {
  const chunks = await fetch('/api/chunks').then(r => r.json());

  chunks.forEach(chunk => {
    choices.addChoices(chunk, 'id', 'title', false);
  });
}

Синхронизация состояния при массовых изменениях

При изменении большого объёма данных возникает задача согласования:

  • выбранных элементов
  • доступных опций
  • фильтров и поиска

Choices.js автоматически удаляет выбранные значения, если они отсутствуют в новом наборе данных после setChoices(true).

Однако при инкрементальных обновлениях разработчик должен контролировать консистентность:

const validValues = new Set(newData.map(i => i.value));

const current = choices.getValue(true);
const filtered = current.filter(v => validValues.has(v.value));

choices.setValue(filtered);

Массовые операции с группами данных

При работе с группами (optgroup-аналогами) массовые операции требуют соблюдения структуры:

choices.setChoices([
  {
    label: 'Languages',
    choices: [
      { value: 'js', label: 'JavaScript' },
      { value: 'py', label: 'Python' }
    ]
  },
  {
    label: 'Databases',
    choices: [
      { value: 'pg', label: 'PostgreSQL' },
      { value: 'mongo', label: 'MongoDB' }
    ]
  }
], 'value', 'label', true);

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

Поведение при конфликте данных

При массовой загрузке возможны конфликты:

  • дубли значений
  • несоответствие типов value
  • повторные ключи в группах

Choices.js при дубликатах обычно:

  • игнорирует повторяющиеся значения
  • сохраняет первое найденное совпадение

Для строгого контроля применяется предварительная нормализация:

const unique = Array.fr om(
  new Map(data.map(item => [item.value, item])).values()
);

Массовые операции и производительность DOM

Choices.js минимизирует прямую работу с DOM, однако при больших массивах ключевое влияние оказывают:

  • количество узлов списка
  • частота пересборки
  • повторные вызовы setChoices

Рекомендуемая стратегия:

  • один setChoices для полной загрузки
  • addChoices только для дозагрузки
  • clearStore только при смене контекста

Управление жизненным циклом данных

Массовые операции тесно связаны с жизненным циклом состояния:

  • инициализация → setChoices
  • расширение → addChoices
  • очистка → clearStore
  • синхронизация → setValue

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

Оглавление