2.2 Lage og gjenbruke komponenter

Når vi skriver inn en adresse i nettleserens adressefelt, for eksempel nrk.no eller youtube.com, får vi opp en nettside som inneholder masse tekst og flere videoer og bilder. Skulle vi ha kodet en av disse sidene selv, hadde sluttresultatet sikkert inneholdt tusenvis av linjer dersom vi skrev nettsiden i én og samme fil.

Når vi lager en stor nettside, har vi så å si aldri bare én fil på datamaskinen. Nesten alle nettsider er bygd opp av flere, gjenbrukbare filer som kalles komponenter. Komponentene settes til slutt sammen til en nettside.

Komponenter

En komponent er en liten bit av en nettside som brukes til å bygge opp en større nettside. En komponent kan brukes i flere filer. Den kan også brukes gjentatte ganger på samme side.

En av de mest åpenbare fordelene med komponenter er at det er lettere å redigere mange små filer enn én gigantisk fil. En annen fordel minner om fordelene vi får ved å dele JavaScript-kode opp i mindre biter: Vi kan gjenbruke en komponent på flere nettsider. De fleste nettsider har for eksempel en navigasjonslinje som går igjen på hele nettstedet. Da er det naturlig å gjøre koden for navigasjonslinjen til en komponent.

Ved å trekke ut navigasjonslinjen som en komponent, kan vi importere den til flere ulike nettsider. Ved å gjenbruke en komponent flere ganger på den samme nettsiden slipper vi å repetere kode. Nettsider inneholder mange elementer som stort sett er like, bortsett fra noen små detaljer. I skjermdumpen fra youtube.com nedenfor er for eksempel videolenkene veldig like utenom teksten og bildeinnholdet.

Her har programmererne hos YouTube sannsynligvis laget en komponent som henter inn videonavnet, miniatyrbildet og litt annen informasjon. Komponenten i koden på neste side heter Videolenke. For å bruke komponenter skriver vi navnet på komponenten som en tagg. Inni taggen kan vi også ha egenskaper som ligner på attributtene til HTML-elementer.

Navigasjonslinjen øverst er synlig på nesten alle nettsidene under nrk.no.

Koden skisserer hvordan YouTube kan ha brukt komponenter med egenskaper. Koden for komponentene er lagret i andre filer.

1 <div> 2 <Videolenke 3 tittel="The Glitch That Kept Sending The FBI To A Tiny Kansas Farm" 4 url=" https://www.youtube.com/watch?v=vh6zanS_epw " 5 /> 6 <Videolenke 7 tittel="Ten years of coding in 13 minutes" 8 url=" https://www.youtube.com/watch?v=1fPWr0d5zBE " 9 /> 10 <!-- ... og så videre --> 11 </div>

Slik ser src/routes ut når vi starter.

IMPORTERE EN SVELTE-FIL SOM EN KOMPONENT

La oss si at vi har begynt å lage vår egen hjemmeside. På hjemmesiden har vi tenkt å ha tre nettsider som folk kan navigere til: index.svelte, filmer.svelte og om-meg.svelte.

Vi starter med et tomt SvelteKit-prosjekt. I mappen src/routes oppretter vi følgende filer:

• • • index.svelte, som dukker opp hvis folk ikke skriver noen ting etter nettadressen filmer.svelte, som dukker opp hvis folk skriver «/filmer» etter nettadressen om-meg.svelte, som dukker opp hvis folk skriver «/om-meg» etter nettadressen

Når vi oppretter prosjektet, ser filene slik ut:

1 <!-- index.svelte --> 2 <nav> 3 <!-4 nav-elementet endrer ikke utseendet, 5 men sier til nettleseren at innholdet brukes til navigasjon. 6 Dette er nyttig for folk som bruker skjermlesere. 7 --> 8 <ul> 9 <!--

10 Verdien i href viser til nettadressen

11 12 som filene blir gjort om til, ikke hvor siden er plassert i filsystemet.

13 --> 14 <li><a href="/">Hjem</a></li> 15 <li><a href="/filmer">Filmer</a></li> 16 <li><a href="/om-meg">Om meg</a></li> 17 </ul> 18 </nav>

19 20 <h1>Velkommen!</h1>

21 22 <p>Dette er hjemmesiden min.</p>

23 24 <p>Mer innhold kommer.</p>

1 <!-- filmer.svelte --> 2 <h1>Mine favorittfilmer</h1>

3 4 <ol> 5 <li><a href="https://www.imdb.com/title/tt0068646">Gudfaren</a></li> 6 <li><a href="https://www.imdb.com/title/tt0050083">12 edsvorne menn</a></li> 7 <li><a href="https://www.imdb.com/title/tt1392190">Mad Max: Fury Road</a></li> 8 </ol>

Slik ser src/routes ut når vi har opprettet alle filene vi trenger.

1 <!-- om-meg.svelte --> 2 <h1>Om meg</h1>

3 4 <p>Jeg er en elev på videregående som for øyeblikket velger å være anonym.</p>

Vi har lyst til å legge navigasjonsmenyen i index.svelte inn på toppen av alle sidene, slik at de som besøker hjemmesiden, lettere kan hoppe mellom dem. Vi kunne ha kopiert <nav>...</nav>-delen av index.svelte og limt linjene inn i filmer.svelte og om-meg.svelte, men da hadde det blitt tungvint å gjøre endringer senere. Hvis vi for eksempel la til en linje, måtte vi ha kopiert og limt alt inn på nytt i de to andre filene også.

For å slippe å gjøre endringer i mer enn én fil lager vi en komponent av navigasjonslinjen. Inni routes lager vi en mappe som vi kaller _komponenter. Siden SvelteKit vanligvis gjør filer som slutter på .svelte, om til nettsider, starter vi mappenavnet med understrekingstegn. På den måten sier vi fra til SvelteKit om at ingen av filene i denne mappen eller i eventuelle undermapper skal gjøres om til nettsider. Inni mappen _komponenter lager vi en fil som vi kaller Navigasjonsmeny.svelte.

I Navigasjonsmeny.svelte limer vi inn det som skal være i navigasjonsmenyen.

1 <!-- Navigasjonsmeny.svelte --> 2 <nav> 3 <ul> 4 <li><a href="/">Hjem</a></li> 5 <li><a href="/filmer">Filmer</a></li> 6 <li><a href="/om-meg">Om meg</a></li> 7 </ul> 8 </nav>

Vi trenger faktisk ikke å gjøre noe som helst for å eksportere denne Svelte-filen som en komponent. Alle Svelte-filer vi skriver og lagrer i mappen _komponenter, eksporterer automatisk seg selv som komponenter, og det eneste vi må gjøre, er å importere dem riktig.

Når vi skal importere navigasjonsmenyen som en komponent til de tre nettsidene, legger vi til en script-del i starten av de tre nettsidene. Script-delen inneholder en import-setning som henter standardeksporten fra filen der navigasjonsmenyen ligger. I index.svelte sletter vi den eksisterende navigasjonsmenyen. Deretter skriver vi <Navigasjonsmeny /> i starten av HTML-delen av hver av filene. Da ser starten av hver fil slik ut:

1 <!-- index.svelte --> 2 <script> 3 // Fordi det er en standardeksport, bruker vi ikke krøllparenteser. 4 import Navigasjonsmeny from "./_komponenter/Navigasjonsmeny.svelte" 5 </script>

6 7 <Navigasjonsmeny /> 8 <h1>Velkommen!</h1> 9 <!-- Resten er likt som før. -->

1 <!-- filmer.svelte --> 2 <script> 3 import Navigasjonsmeny from "./_komponenter/Navigasjonsmeny.svelte" 4 </script>

5 6 <Navigasjonsmeny /> 7 <h1>Mine favorittfilmer</h1> 8 <!-- Resten er likt som før. -->

1 <!-- om-meg.svelte --> 2 <script> 3 import Navigasjonsmeny from "./_komponenter/Navigasjonsmeny.svelte" 4 </script>

5 6 <Navigasjonsmeny /> 7 <h1>Om meg</h1> 8 <!-- Resten er likt som før. -->

Grunnen til at vi skriver from "./_komponenter/Navigasjonsmeny.svelte", er at det som står mellom fnuttene, beskriver hvor filen vi skal importere fra, ligger i forhold til filen vi importerer til. Punktumet sier at datamaskinen skal begynne i mappen vi står i, og hver skråstrek forteller hva det neste steget er. Her skal den først gå inn i mappen _komponenter og deretter til filen Navigasjonsmeny.svelte.

Eksportere og importere komponenter

Alle Svelte-filer eksporterer automatisk seg selv som komponenter. Vi importerer en Svelte-fil som en komponent med koden

import Komponentnavn from "./mappe/Fil.svelte". Når vi skal bruke komponenter, setter vi vinkelparenteser rundt navnet vi ga komponenten da vi importerte den: <Komponentnavn />.

STARTE MAPPE- OG FILNAVN MED UNDERSTREKINGSTEGN FOR Å FÅ SVELTEKIT TIL Å OVERSE DEM

Når vi starter SvelteKit, prøver SvelteKit å gjøre alle filer som ligger i mappen src/ routes og eventuelle undermapper, om til nettsider. Svelte-filene som ligger i første nivå av src/routes, for eksempel src/routes/filnavn1.svelte og src/routes/filnavn2. svelte, vises som nettsider hvis vi skriver /filnavn1 og /filnavn2 i adressefeltet i nettleseren. Legger vi filene i én eller flere undermapper, legges navnet på disse undermappene til før filnavnet. Hvis vi har en mappe som heter ole, som inneholder en mappe som heter dole, som i sin tur inneholder filen doffen.svelte, vil nettadressen ende med /ole/dole/doffen.

Hvis vi starter navnet på en mappe eller en fil med et understrekingstegn, for eksempel _komponenter eller _Hemmelig.svelte, sier vi «Denne mappen/filen er kode vi bare skal bruke til å bygge opp andre nettsider med; ikke lag nettsider av den». Vi kan importere fra disse mappene og filene, men brukerne kan ikke navigere til /_komponenter/Navigasjonsmeny ved å redigere adressen i nettleseren og se navigasjonsmenyen som en frittstående nettside.

Det er ikke farlig om du skulle glemme understrekingstegnene. Det gjør jo ingenting om brukerne kan navigere til en nettside og se navigasjonsmenyen, men vær klar over at visningen av komponenter kan bli feil når de vises enkeltvis, og ikke på nettsiden de er ment å bli brukt.

Vi bruker understrekingstegn foran navnet til mapper og filer som inneholder komponenter, for eksempel _mappenavn og _Komponent.svelte, for å skille dem fra mapper og filer som skal gjøres om til nettsider.