Использование с vanilla JavaScript

Slim Sel ect представляет собой легковесную JavaScript-библиотеку, предназначенную для улучшения стандартных HTML-элементов <select> без зависимости от фреймворков. В контексте vanilla JavaScript она раскрывает свой основной потенциал: минимальный оверхед, прямой контроль над DOM и предсказуемое поведение без абстракций.

Работа со Slim Select в vanilla JS начинается с привязки к существующему <select> элементу. Библиотека не требует сборщиков или дополнительных runtime-зависимостей.

HTML-разметка:

<select id="country-select">
  <option value="kz">Kazakhstan</option>
  <option value="ru">Russia</option>
  <option value="de">Germany</option>
</select>

Инициализация:

const select = new SlimSelect({
  select: '#country-select'
});

В данном случае передаётся CSS-селектор, который указывает на DOM-элемент. Slim Select автоматически заменяет стандартное поведение <select> кастомным интерфейсом, сохраняя оригинальный элемент в DOM.

Работа с DOM-элементом напрямую

Вместо строки-селектора можно использовать прямую ссылку на элемент:

const element = document.getElementById('country-select');

const select = new SlimSelect({
  select: element
});

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

Динамическое создание select-элемента

Slim Select корректно работает с элементами, созданными во время выполнения скрипта:

const selectElement = document.createElement('select');

selectElement.innerHTML = `
  <option value="kz">Kazakhstan</option>
  <option value="tr">Turkey</option>
`;

document.body.appendChild(selectElement);

const select = new SlimSelect({
  select: selectElement
});

Ключевой момент заключается в том, что элемент должен быть добавлен в DOM до инициализации. Иначе библиотека не сможет корректно вычислить размеры и поведение списка.

Обновление данных через vanilla JS

Slim Select синхронизируется с DOM-структурой <select>. Это означает, что любые изменения option-элементов можно выполнять стандартными средствами JavaScript.

Добавление новых опций:

const select = document.getElementById('country-select');

const option = document.createElement('option');
option.value = 'fr';
option.textContent = 'France';

select.appendChild(option);

Однако после изменения структуры требуется обновление состояния Slim Select:

slimSelect.setData(
  Array.fr om(select.options).map(opt => ({
    text: opt.text,
    value: opt.value
  }))
);

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

Удаление и пересоздание инстанса

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

Удаление инстанса:

select.destroy();

После уничтожения Slim Select возвращает элемент в исходное состояние, удаляя кастомную обёртку и обработчики событий.

Повторная инициализация:

const select = new SlimSelect({
  select: '#country-select'
});

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

Программное управление значением

Vanilla JavaScript позволяет управлять значением через стандартные DOM API, однако Slim Select предоставляет дополнительный слой синхронизации.

Установка значения:

document.getElementById('country-select').value = 'de';

После этого необходимо синхронизировать интерфейс:

slimSelect.set('de');

Чтение текущего значения:

const value = document.getElementById('country-select').value;

или через API:

const value = slimSelect.getSelected();

Множественный выбор в чистом JavaScript

При использовании multiple поведение отличается, так как значение становится массивом.

HTML:

<select id="multi-select" multiple>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
</select>

Инициализация:

const multi = new SlimSelect({
  select: '#multi-select'
});

Установка значений:

multi.set(['js', 'py']);

Получение выбранных значений:

const selected = multi.getSelected();

Результатом будет массив строк, отражающий текущий выбор.

Обработка событий через addEventListener

Slim Select не заменяет стандартную модель событий DOM, что позволяет использовать привычный подход:

const select = document.getElementById('country-select');

select.addEventListener('change', (e) => {
  console.log(e.target.value);
});

Однако внутри Slim Select доступны дополнительные события:

const slim = new SlimSelect({
  select: '#country-select',
  events: {
    afterChange: (newVal) => {
      console.log(newVal);
    }
  }
});

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

Асинхронная подгрузка данных

В vanilla JavaScript часто требуется загрузка данных с сервера и последующее заполнение select.

fetch('/api/countries')
  .then(res => res.json())
  .then(data => {
    const select = document.getElementById('country-select');

    data.forEach(item => {
      const option = document.createElement('option');
      option.value = item.code;
      option.textContent = item.name;
      select.appendChild(option);
    });

    slimSelect.setData(
      data.map(item => ({
        text: item.name,
        value: item.code
      }))
    );
  });

Важно, что обновление Slim Select должно происходить после завершения манипуляций с DOM, иначе возможна потеря синхронизации.

Работа с disabled состоянием

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

document.getElementById('country-select').disabled = true;

Slim Select автоматически отражает это состояние в UI. При повторном включении:

document.getElementById('country-select').disabled = false;

перерисовка происходит без необходимости дополнительного вызова API.

Доступ к внутренним данным инстанса

Slim Select сохраняет состояние внутри объекта, доступного через переменную инстанса:

const slim = new SlimSelect({
  select: '#country-select'
});

console.log(slim.data);

Это позволяет анализировать текущие опции без обращения к DOM.

Особенности работы без фреймворков

При использовании vanilla JavaScript Slim Select не зависит от реактивных систем, поэтому:

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

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

Интеграция с чистой архитектурой приложения

Slim Select часто используется как UI-слой поверх собственных моделей данных. В vanilla JS это выражается в разделении логики:

  • данные управляются через массивы и объекты
  • DOM обновляется вручную
  • Slim Select синхронизируется через set и setData
const state = {
  countries: [
    { value: 'kz', text: 'Kazakhstan' },
    { value: 'ru', text: 'Russia' }
  ]
};

function renderSelect() {
  const select = document.getElementById('country-select');

  select.innerHTML = '';

  state.countries.forEach(item => {
    const option = document.createElement('option');
    option.value = item.value;
    option.textContent = item.text;
    select.appendChild(option);
  });

  slimSelect.setData(state.countries);
}

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

Оглавление