7.3 KiB
Покращення маршрутизації
Інструкції
Тепер, коли ви створили базову систему маршрутизації, настав час вдосконалити її професійними функціями, які покращують користувацький досвід і забезпечують кращі інструменти для розробників. Реальні додатки потребують більше, ніж просто перемикання шаблонів – вони вимагають динамічних заголовків сторінок, хуків життєвого циклу та розширюваних архітектур.
У цьому завданні ви розширите свою реалізацію маршрутизації двома важливими функціями, які часто зустрічаються у веб-додатках, що використовуються в реальному світі. Ці вдосконалення зроблять ваш банківський додаток більш професійним і створять основу для майбутніх функцій.
Декларація маршрутів наразі містить лише ID шаблону для використання. Але при відображенні нової сторінки іноді потрібна додаткова інформація. Давайте покращимо нашу реалізацію маршрутизації двома додатковими функціями:
Функція 1: Динамічні заголовки сторінок
Мета: Додати заголовки до кожного шаблону та оновлювати заголовок вікна з цим новим заголовком при зміні шаблону.
Чому це важливо:
- Покращує користувацький досвід, показуючи описові заголовки вкладок браузера
- Підвищує доступність для екранних читачів і допоміжних технологій
- Забезпечує кращий контекст для закладок і історії браузера
- Відповідає найкращим практикам професійної веб-розробки
Підхід до реалізації:
- Розширити об'єкт маршрутів, щоб включити інформацію про заголовок для кожного маршруту
- Модифікувати функцію
updateRoute(), щоб динамічно оновлюватиdocument.title - Перевірити, що заголовки змінюються правильно при навігації між екранами
Функція 2: Хуки життєвого циклу маршруту
Мета: Додати опцію для виконання певного коду після зміни шаблону. Ми хочемо, щоб у консолі розробника з'являлося повідомлення 'Dashboard is shown' кожного разу, коли відображається сторінка панелі управління.
Чому це важливо:
- Дозволяє виконувати користувацьку логіку при завантаженні певних маршрутів
- Забезпечує хуки для аналітики, логування або ініціалізаційного коду
- Створює основу для більш складної поведінки маршрутів
- Демонструє патерн спостерігача у веб-розробці
Підхід до реалізації:
- Додати необов'язкову властивість функції зворотного виклику до конфігурацій маршрутів
- Виконати функцію зворотного виклику (якщо вона є) після завершення рендерингу шаблону
- Переконатися, що функція працює для будь-якого маршруту з визначеним зворотним викликом
- Перевірити, що повідомлення в консолі з'являється при переході на панель управління
Критерії оцінювання
| Критерій | Відмінно | Задовільно | Потребує покращення |
|---|---|---|---|
Обидві функції реалізовані та працюють. Додавання заголовка і коду також працює для нового маршруту, доданого в декларацію routes. |
Обидві функції працюють, але поведінка жорстко закодована і не налаштовується через декларацію routes. Додавання третього маршруту із заголовком і кодом працює частково або не працює. |
Одна з функцій відсутня або працює некоректно. |
Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.