5.0 KiB
Améliorer le Routage
Instructions
Maintenant que vous avez construit un système de routage de base, il est temps de l'améliorer avec des fonctionnalités professionnelles qui améliorent l'expérience utilisateur et offrent de meilleurs outils pour les développeurs. Les applications réelles nécessitent plus que de simples changements de modèle – elles exigent des titres de page dynamiques, des hooks de cycle de vie, et des architectures extensibles.
Dans cet exercice, vous allez étendre votre implémentation de routage avec deux fonctionnalités essentielles que l'on retrouve couramment dans les applications web en production. Ces améliorations rendront votre application bancaire plus soignée et fourniront une base pour des fonctionnalités futures.
La déclaration des routes contient actuellement uniquement l'ID du template à utiliser. Mais lorsqu'on affiche une nouvelle page, un peu plus est parfois nécessaire. Améliorons notre implémentation de routage avec deux fonctionnalités additionnelles :
Fonctionnalité 1 : Titres de Pages Dynamiques
Objectif : Donner des titres à chaque template et mettre à jour le titre de la fenêtre avec ce nouveau titre lorsque le template change.
Pourquoi c'est important :
- Améliore l'expérience utilisateur en affichant des titres descriptifs dans les onglets du navigateur
- Renforce l'accessibilité pour les lecteurs d'écran et les technologies d'assistance
- Fournit un meilleur repérage dans les favoris et l'historique du navigateur
- Suit les meilleures pratiques professionnelles du développement web
Approche d'implémentation :
- Étendre l'objet routes pour inclure l'information du titre pour chaque route
- Modifier la fonction
updateRoute()pour mettre à jour dynamiquementdocument.title - Tester que les titres changent correctement lors de la navigation entre les écrans
Fonctionnalité 2 : Hooks de Cycle de Vie de Route
Objectif : Ajouter une option pour exécuter du code après que le template a changé. Nous voulons afficher 'Dashboard is shown' dans la console développeur à chaque fois que la page du tableau de bord est affichée.
Pourquoi c'est important :
- Permet l'exécution de logique personnalisée lors du chargement de routes spécifiques
- Offre des hooks pour l'analyse, la journalisation ou du code d'initialisation
- Crée une base pour des comportements de routes plus complexes
- Démontre le pattern observateur dans le développement web
Approche d'implémentation :
- Ajouter une propriété fonction callback optionnelle aux configurations de route
- Exécuter la fonction callback (si elle est présente) après que le rendu du template soit terminé
- S'assurer que la fonctionnalité fonctionne pour toute route avec un callback défini
- Tester que le message dans la console apparaît lors de la visite du tableau de bord
Grille d'Évaluation
| Critères | Exemplaire | Adéquat | À Améliorer |
|---|---|---|---|
Les deux fonctionnalités sont implémentées et fonctionnent. Le titre et l'ajout de code fonctionnent également pour une nouvelle route ajoutée dans la déclaration routes. |
Les deux fonctionnalités fonctionnent, mais le comportement est codé en dur et non configurable via la déclaration routes. L'ajout d'une troisième route avec titre et ajout de code ne fonctionne pas ou fonctionne partiellement. |
Une des fonctionnalités est manquante ou ne fonctionne pas correctement. |
Avertissement :
Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d’assurer la précision, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, il est recommandé de faire appel à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.