Тестовое задание с созданием секундомеров, сделанное на Vue 3.
yarn— первоначальная установка зависимостейyarn dev— запуск dev-сервераyarn build— сборка для productionyarn preview— превью локальной production-сборки
Как и требуется в ТЗ, тестовое задание сделано на Vue 3 и чистом JavaScript (хотя я был бы не против использовать TypeScript). Стили написаны с использованием препроцессора Sass. Сборщик — Vite, менеджер пакетов — Yarn, сборка автоматически деплоится на GitHub Pages с помощью AppVeyor.
В качестве архитектурной методологии я выбрал Feature Sliced Design. Прежде всего это касается декомпозиции приложения по слоям (pages, shared и т. д.), но разделение на сегменты типа ui или model отсутствует, по сути каждый компонент является Single File Component.
Для большего удобства импортов (в рамках FSD) присутствует большое количество бойлерплейтных файлов index.js, но использованние сниппетов облегчило их создание.
Я решил не использовать стейт-менеджер, поскольку в рамках данной задачи вполне можно обойтись локальным состоянием в виде reactive-массива, который используется дочерними элементами компонента StopwatchesPage.
Главная составляющая логики — секундомеры — реализованы при помощи функции setInterval, которая каждые 20 мс (можно и чаще/реже) проверяет разницу между timestamp секундомера и текущим временем и меняет значение time (количество прошедших секунд после старта), если после предыдущего обновления успела пройти секунда. Реализовал именно так, потому что сами по себе setTimeout и setInterval имеют погрешность, которая со временем сильно испортит точность.
По ТЗ и макету не предполагается кнопка для удаления секундомера, но я её добавил, т. к. она напрашивалась.