Skabeloner er en vigtig del af arbejdet med JavaScript-applikationer. Det er ret almindeligt, at data er tilgængelige for dig, men ikke i et format, der er klar til visning på skærmen. Det er almindeligt (men ikke altid) data i JSON-format. Det er et godt format til at arbejde med i JavaScript, men vi skal stadig formatere det til noget, vi kan bruge.
For eksempel er her nogle fiktive data, vi måske har til rådighed:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Og i sidste ende vil vi gerne gøre det til:
Ender's Game
Gavin Hood
Du synes måske jQuery er fantastisk til det. jQuery er fuld af DOM-traverserings- / manipulationsværktøjer. Men det har ikke et meget robust sæt DOM-oprettelsesværktøjer, siger du måske. Jeg tror, at jQuery-teamet overvejede at tilføje skabeloner på et tidspunkt og endda leget med et "officielt" plugin, men det tog ikke fart.
I denne video gør vi bare ikke det, der i dag traditionelt betragtes som skabeloner. Vi bygger lige op med et nyt med jQuery og bruger streng sammenkædning til at opbygge den HTML, vi har brug for, og i sidste ende injicere den på siden. Der er intet teknisk forkert ved det, men jeg prøver at køre hjem, hvordan denne tilgang hurtigt kan komme ud af hånden.
I bare den lille smule JS, vi skriver i denne video, blander vi en række bekymringer / job:
- Få dataene. Vi har det lige ved hånden her, men sandsynligvis er dette lidt mere komplekst. Måske en asynkron Ajax-anmodning med fejlhåndtering og caching og sådan.
- Vis logik. Beslutter hvad vi har brug for at vise. Hvor mange? Hvilke dele? Baseret på hvad?
- Begivenhedshåndtering. Vores nyinjicerede divs fik håndteringen af begivenheder tilføjet, da vi oprettede dem, snarere end at delegere.
- Skabeloner. HTML'en, som vi opretter for at udføre designet, strukturere dataene og imødekomme eller behov.
Dette er den spaghetti-ish-kode, vi afsluttede med:
Se pennen 31b07f30dce13b31904da36693b29b41 af Chris Coyier (@chriscoyier) på CodePen
Den næste blok af videoer vil fokusere en masse på skabeloner, fordi det er super vigtigt, men i sidste ende vil vi slags bryde fra hinanden alle disse bekymringer og ende med meget mere organiseret og vedligeholdelig kode.