4.4 KiB
Forbedr Routing
Instruktioner
Nu hvor du har bygget et grundlæggende routing-system, er det tid til at forbedre det med professionelle funktioner, der forbedrer brugeroplevelsen og giver bedre værktøjer til udviklere. Virkelige applikationer kræver mere end blot skift af skabeloner – de har brug for dynamiske sidetitler, livscyklus-hooks og udvidelige arkitekturer.
I denne opgave vil du udvide din routing-implementering med to essentielle funktioner, som ofte findes i produktionswebapplikationer. Disse forbedringer vil gøre din bankapp mere professionel og give et fundament for fremtidig funktionalitet.
Rute-deklarationen indeholder i øjeblikket kun skabelon-ID'et, der skal bruges. Men når en ny side vises, er der ofte behov for lidt mere. Lad os forbedre vores routing-implementering med to ekstra funktioner:
Funktion 1: Dynamiske sidetitler
Mål: Giv titler til hver skabelon og opdater vinduets titel med denne nye titel, når skabelonen ændres.
Hvorfor det er vigtigt:
- Forbedrer brugeroplevelsen ved at vise beskrivende browserfanetitler
- Øger tilgængeligheden for skærmlæsere og hjælpemidler
- Giver bedre bogmærkning og kontekst for browserhistorik
- Følger bedste praksis inden for professionel webudvikling
Implementeringsmetode:
- Udvid ruteobjektet til at inkludere titeloplysninger for hver rute
- Modificer funktionen
updateRoute()til dynamisk at opdateredocument.title - Test at titler ændres korrekt, når der navigeres mellem skærme
Funktion 2: Route Lifecycle Hooks
Mål: Tilføj en mulighed for at køre noget kode efter skabelonen ændres. Vi ønsker at udskrive 'Dashboard vises' i udviklerkonsollen hver gang dashboard-siden vises.
Hvorfor det er vigtigt:
- Muliggør udførelse af brugerdefineret logik, når specifikke ruter indlæses
- Giver hooks til analyse, logning eller initialiseringskode
- Skaber et fundament for mere komplekse ruteadfærd
- Demonstrerer observermønsteret i webudvikling
Implementeringsmetode:
- Tilføj en valgfri callback-funktion som egenskab til rute-konfigurationer
- Udfør callback-funktionen (hvis den er til stede) efter skabelonrendering er afsluttet
- Sørg for at funktionen virker for enhver rute med en defineret callback
- Test at konsolbeskeden vises, når dashboardet besøges
Bedømmelseskriterier
| Kriterier | Fremragende | Tilstrækkelig | Kræver forbedring |
|---|---|---|---|
De to funktioner er implementeret og fungerer. Titel og kodeudførelse fungerer også for en ny rute, der tilføjes i routes-deklarationen. |
De to funktioner fungerer, men adfærden er hårdkodet og ikke konfigurerbar via routes-deklarationen. Tilføjelse af en tredje rute med titel og kodeudførelse fungerer ikke eller kun delvist. |
En af funktionerne mangler eller fungerer ikke korrekt. |
Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.