В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.
За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.
Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.
Требования
Начнем с требований нашего виджета.
Отображение заданного количества звезд из конфига.
Пользователи могут выбрать рейтинг.
Поддержка режима только для чтения, для отображения рейтингов других пользователей без редактирования.
Кастомизация текста для виджета.
Кастомизация цвета для выбранного и невыбранного состояний.
Расширить события выбора рейтинга и наведения на него.
Кастомизация размера звезд.
Макет
Архитектура компонентов
Код компонентов
Начнем с пропсов нашего компонента. С помощью этих проспов мы можем конфигурировать наш слайдер.
В компоненте Star Rating нам нужно реализовать следующее:
Расширение методов выбора и наведения на рейтинг для кастомизации пользователем.
Прокинуть всю конфигурацию виджета в контекст.
Рендеринг компонентов Label и StarsList.
Текущий рейтинг и значения наведения будем хранить в локальном состоянии компонента. Чтобы избежать большого количества прокидывания пропсов, предлагаю использовать Context для прокидывания конфигурации и текущего состояния виджета.
setRatingFn и setHoverFn расширяют события пользовательскими функциями и предоставляют текущие состояния виджета. В режиме только для чтения эти методы отключены.
Для текста виджета у нас есть метод по умолчанию с дефолтным текстом. Если пользователь хочет использовать другой текст, мы разрешаем ему переопределить этот метод. Этот метод используется в компоненте StarRatingLabel при рендеринге.
Компонент StarsList отображает заданное в конфиге количество звезд. Значение по умолчанию - пять.
Каждый компонент Star знает свое собственное значение, и мы можем использовать это значение для сохранения состояния рейтинга или отображения изменений при наведении. Использование SVG позволяет управлять цветом, размером и формой иконок. Если вы хотите предоставить возможность использовать другие иконки, пользователь может установить собственный SVG в конфигурации. Также SVG позволяет изменять размер без потери качества изображения.
Другой подход может заключаться в использовании пользовательских шрифтов, если вы предоставляете разные иконки для виджета.
Оптимизация
Как вы можете видеть в компоненте Star, каждый раз создается анонимная функция, мы можем этого избежать.
Давайте изменим код компонента Star. Необходимо добавить data атрибут со значением для звезды и вызывать методы onClick, onMouseEnter и onMouseLeave без анонимных функций.
В компоненте Star Rating изменены два метода: setRatingFn и setHoverFn. Здесь мы можем получить значение из data-атрибута и использовать его.
При событии onMouseLeave нам нужно установить состояние наведения в значение null. Мы можем понять это, добавив проверку на тип события или создать отдельный метод и вызвать его.
Еще один подход может заключаться в использовании radio-button и получении текущего значения из него.
Заключение
Теперь вы знаете, как создать собственный виджет звездного рейтинга и какие требования вы можете уточнить у интервьюера.
Весь код вы можете найти на GitHub.
Другие статьи, которые вы можете прочитать:
Более подробно о процессе поиска работы в США на позицию Front-End в моем Telegram-канале.
Удачи на собеседованиях!
