You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/da/7-bank-project/1-template-route/assignment.md

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 opdatere document.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.