> Как реализовать функцию, принимающую селектор и возвращающую объект с методами для добавления классов и навешивания событий (JavaScript)

Короткий ответ

Функция принимает CSS-селектор, находит элемент в DOM и возвращает объект с методами addClass и on. addClass добавляет класс к элементу, on навешивает обработчик события. Реализация использует document.querySelector для поиска, classList.add для классов и addEventListener для событий. Методы возвращают this для chaining.

Подробное объяснение

Функция-фабрика создаёт объект, который инкапсулирует DOM-элемент, найденный по селектору. Основная идея - предоставить удобный fluent-интерфейс для типовых операций без прямого обращения к DOM API. Внутри функция проверяет существование элемента (если селектор не найден, можно выбросить ошибку или вернуть заглушку). Методы addClass и on модифицируют элемент и возвращают сам объект, что позволяет выстраивать цепочки вызовов. Это упрощает код и делает его более читаемым.

На практике

Такой подход часто используется в небольших утилитах или микро-библиотеках, когда не хочется подключать jQuery, но нужен удобный синтаксис. Важно помнить, что document.querySelector возвращает первый подходящий элемент - если нужно работать с коллекцией, потребуется другая реализация. Для production-кода стоит добавить валидацию селектора и обработку ошибок (например, если элемент не найден). Методы можно расширить: removeClass, toggleClass, off для удаления обработчиков.

Пример кода

JAVASCRIPT
function $(selector) {
  const element = document.querySelector(selector);
  if (!element) {
    throw new Error(`Element not found: ${selector}`);
  }

  return {
    addClass(className) {
      element.classList.add(className);
      return this;
    },
    on(event, handler) {
      element.addEventListener(event, handler);
      return this;
    }
  };
}

// Использование:
$('.my-button')
  .addClass('active')
  .on('click', () => console.log('Clicked!'));

Как отвечать на собеседовании

Начни с краткого описания задачи, затем объясни внутреннюю механику: поиск элемента, возврат объекта с методами, chaining через return this. Упомяни обработку граничных случаев (null-элемент, несколько селекторов). Если спросят про альтернативы - сравни с jQuery или нативным API. Покажи понимание, что это паттерн "фабрика" с fluent interface.

Что проверяет интервьюер

• Понимание DOM API (querySelector, classList, addEventListener)
• Умение проектировать простой API с chaining
• Навыки обработки ошибок и краевых случаев
• Знание паттерна "фабрика" и fluent interface
• Способность писать лаконичный и читаемый код

Типичные ошибки

• Забывают вернуть this из методов, ломая chaining
• Не проверяют существование элемента перед работой с ним
• Используют className вместо classList (перезаписывает все классы)
• Путают addEventListener с устаревшим onclick
• Возвращают сам элемент вместо объекта с методами