Глава 13. JavaScript-модули, DOM и локальное состояние

Модуль — это граница имён

script type=module включает строгий режим, отдельную область видимости и явные import/export. Зависимости перестают зависеть от порядка множества script-тегов. Относительные URL модулей разрешаются от файла, поэтому приложение нужно проверять через HTTP-сервер, а не file://.

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

Событие превращается в намерение

Обработчик DOM извлекает минимальные данные и вызывает функцию сценария интерфейса. Не передавайте Event через все слои. Используйте event delegation для повторяющихся элементов, но проверяйте ближайшую допустимую цель через closest и границу контейнера.

Кнопка должна оставаться button, а ссылка — link. JavaScript не исправляет неверную семантику исходного документа.

Три вида состояния

Чистое обновление

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

Не сериализуйте в localStorage пароль, session id или данные, которым нужна серверная авторизация. LocalStorage подходит для несекретных предпочтений и черновиков, если пользователь понимает срок жизни и может их очистить.

Ошибки и отмена

Асинхронное действие имеет состояния idle, pending, success и error. Повторный запрос поиска отменяйте через AbortController или маркируйте последовательностью, чтобы старый ответ не перезаписал новый. Кнопка блокируется только на время конкретной команды и возвращается в доступное состояние в finally.

Ошибка сети не равна HTTP 500: fetch отклоняется при сетевом сбое, но ответ 404 или 500 нужно проверить через response.ok.

Нужен ли React

Компонентный фреймворк оправдан, когда интерфейс содержит много взаимозависимого состояния, повторяемые компоненты и отдельную команду фронтенда. Для серверного каталога с несколькими фильтрами native modules и progressive enhancement часто уменьшают сборку и поверхность обновлений.

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

Практика главы

Разделите фильтр задач на state.js, api.js и view.js. Реализуйте обычную HTML-форму, затем перехват submit, отмену прошлого запроса и восстановление URL через history.replaceState.

Перелинковка со справочником