Синтаксис создания экземпляра

Инициализация библиотеки Slim Select выполняется через создание нового экземпляра конструктора SlimSelect. Базовый синтаксис строится вокруг вызова функции-конструктора с объектом конфигурации, в котором указывается целевой элемент <select> и параметры поведения компонента.

Основная форма создания:

new SlimSelect({
  select: '#mySelect'
})

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

  • CSS-селектор по id (#id)
  • CSS-селектор по классу (.class)
  • прямое указание DOM-элемента
  • NodeList или коллекция элементов (в зависимости от версии и окружения)

Пример с разными вариантами:

// По id
new SlimSelect({
  select: '#countrySelect'
})

// По классу
new SlimSelect({
  select: '.select-element'
})

// Передача DOM-узла
const element = document.querySelector('#citySelect')

new SlimSelect({
  select: element
})

Временные условия и момент инициализации

Создание экземпляра требует наличия уже загруженного DOM-элемента. При попытке инициализации до построения дерева документа происходит ошибка или некорректное поведение. Поэтому вызов конструктора обычно размещается после загрузки DOM:

document.addEventListener('DOMContentLoaded', () => {
  new SlimSelect({
    select: '#mySelect'
  })
})

Альтернативный вариант — размещение скрипта в конце документа перед закрывающим тегом </body>, что обеспечивает доступность элементов без дополнительных обработчиков событий.

Объект конфигурации экземпляра

Помимо обязательного параметра select, Slim Select принимает объект настроек, влияющих на поведение, визуальное отображение и обработку данных.

Структура конфигурации:

new SlimSelect({
  select: '#mySelect',
  settings: {},
  data: [],
  events: {}
})

Каждый блок выполняет отдельную функцию:

  • settings — визуальные и поведенческие параметры
  • data — программное наполнение опциями
  • events — обработчики событий жизненного цикла

Использование параметра settings при создании

Блок settings позволяет управлять поведением экземпляра непосредственно при инициализации.

Пример базовой конфигурации:

new SlimSelect({
  select: '#mySelect',
  settings: {
    placeholderText: 'Выбор значения',
    allowDeselect: true
  }
})

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

Типичная структура:

settings: {
  placeholderText: string,
  allowDeselect: boolean,
  showSearch: boolean,
  searchPlaceholder: string,
  closeOnSelect: boolean
}

Значения интерпретируются библиотекой при построении внутреннего состояния экземпляра.

Инициализация с программными данными

Slim Select поддерживает создание экземпляра без предварительно заполненного <option> в HTML. В таком случае данные передаются через параметр data.

Синтаксис:

new SlimSelect({
  select: '#mySelect',
  data: [
    { value: '1', text: 'Первый элемент' },
    { value: '2', text: 'Второй элемент' }
  ]
})

Каждый объект массива описывает одну опцию:

  • value — значение, которое будет отправляться при отправке формы
  • text — отображаемый текст элемента
  • дополнительные поля могут использоваться для расширенных сценариев (например, disabled, selected)

Пример расширенной структуры:

data: [
  { value: 'ru', text: 'Россия', selected: true },
  { value: 'kz', text: 'Казахстан' },
  { value: 'de', text: 'Германия', disabled: true }
]

При использовании data библиотека полностью заменяет стандартный набор <option>.

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

На одной странице может существовать несколько независимых экземпляров Slim Select. Каждый из них создаётся отдельным вызовом конструктора.

new SlimSelect({
  select: '#selectA'
})

new SlimSelect({
  select: '#selectB'
})

new SlimSelect({
  select: '#selectC'
})

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

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

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

const slim = new SlimSelect({
  select: '#mySelect'
})

Сохранённый экземпляр позволяет выполнять операции управления состоянием (обновление, очистка, уничтожение). Без сохранения ссылки управление экземпляром ограничено DOM-уровнем.

Типичный паттерн:

let selectInstance = new SlimSelect({
  select: '#mySelect'
})

Инициализация с динамическими элементами

При создании элементов динамически через JavaScript необходимо учитывать момент их добавления в DOM. Slim Select не отслеживает появление новых элементов автоматически, поэтому инициализация выполняется строго после вставки элемента:

const select = document.createElement('select')
select.id = 'dynamicSelect'

document.body.appendChild(select)

new SlimSelect({
  select: '#dynamicSelect'
})

Если порядок нарушен, библиотека не сможет найти целевой элемент.

Особенности работы с селекторами

Передача селектора в параметре select подчиняется стандартным правилам querySelector. Это означает:

  • возвращается первый совпавший элемент при использовании класса
  • при необходимости обработки нескольких элементов требуется отдельная инициализация для каждого
  • сложные селекторы поддерживаются, но должны возвращать валидный <select>

Пример ограничения:

new SlimSelect({
  select: '.select' // применяется только к первому найденному элементу
})

Для обработки всех элементов коллекции используется явный обход:

document.querySelectorAll('.select').forEach(el => {
  new SlimSelect({
    select: el
  })
})

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

Каждый экземпляр Slim Select создаёт собственное внутреннее состояние, включая:

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

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

Стандартная модель предполагает однократную инициализацию для каждого <select>.

Ошибки при создании экземпляра

Наиболее частые ошибки при синтаксисе инициализации:

  1. Передача несуществующего селектора
new SlimSelect({
  select: '#missing'
})

  1. Попытка инициализации до загрузки DOM

  2. Повторное создание без уничтожения предыдущего экземпляра

  3. Передача неверного типа данных в data (например, строк вместо объектов)

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

Минимальная и расширенная формы записи

Минимальная форма:

new SlimSelect({
  select: '#mySelect'
})

Расширенная форма:

new SlimSelect({
  select: '#mySelect',
  settings: {
    placeholderText: 'Выберите значение',
    allowDeselect: true,
    showSearch: true
  },
  data: [
    { value: 'a', text: 'A' },
    { value: 'b', text: 'B' }
  ],
  events: {
    afterChange: () => {}
  }
})

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

Оглавление