cervelo-russia.rucervelo-russia.ru

Как организовать небольшой JavaScript-проект без лишних зависимостей

Полезные материалы
Структура небольшого проекта JavaScript на экране рядом с блокнотом

Небольшому JavaScript-проекту не всегда нужны сборщик и десятки зависимостей. Для одной страницы можно начать с нативных модулей: отдельно хранить данные и вычисления, отдельно связывать их с DOM. Покажем мини-проект, который считает общую длительность тренировок и запускается через локальный HTTP-сервер.

Три файла с понятными границами

index.html

<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>План тренировок</title>
<h1>Длительность плана</h1><p id="result"></p>
<script type="module" src="./main.js"></script></html>

plan.js

export function totalMinutes(items) {
  return items.reduce((sum, item) => {
    if (!Number.isFinite(item.minutes) || item.minutes < 0) {
      throw new TypeError('Некорректная длительность');
    }
    return sum + item.minutes;
  }, 0);
}

main.js

import { totalMinutes } from './plan.js';
const plan = [{ minutes: 25 }, { minutes: 40 }];
document.querySelector('#result').textContent =
  `Всего: ${totalMinutes(plan)} минут`;

Сохраните файлы рядом. В терминале этой папки выполните python -m http.server 8000 и откройте http://localhost:8000 в браузере. Локальный сервер нужен для штатной загрузки модулей: MDN отдельно предупреждает о проблемах при открытии таких примеров через file://. Вывод должен показать 65 минут. Сервер остановите после работы сочетанием Ctrl+C.

Разделение ответственности
Что сравнить На что смотреть Что сделать
plan.js Вычисление без браузера Удобно проверить пустой список и ошибки
main.js Связь данных с разметкой Здесь искать проблему отсутствующего элемента
index.html Семантика и точка входа Подключить модуль один раз

Не дробите проект ради числа файлов

Выносить функцию полезно, если у неё ясная задача и входные данные. Для двух строк одноразовой настройки отдельный архитектурный слой может только затруднить чтение. Не добавляйте библиотеку, пока не можете назвать её конкретную пользу и цену сопровождения. При появлении реальной необходимости решение можно пересмотреть.

  • Проверить, что пустой массив даёт ноль.
  • Проверить, что отрицательная длительность отклоняется.
  • Посмотреть Network при ошибке загрузки файла.
  • Записать команду запуска в README.

Вопросы и ответы

Почему не открыть HTML двойным щелчком?

Модули загружаются по правилам браузера, для локального примера используйте HTTP-сервер.

Нужен ли package.json?

Для этого браузерного примера нет. Он понадобится при других инструментах или требованиях окружения.

Что делать при пустом выводе?

Проверьте Console, пути import и наличие элемента result в загруженной странице.

Когда добавлять сборку?

Когда появилась проверяемая задача: обработка ресурсов, нужная совместимость или организация поставки. Размер будущего проекта сам по себе не повод усложнять текущий.

Источники: developer.mozilla.org.

Похожие записи