Mal er en viktig del av arbeidet med JavaScript-applikasjoner. Det er ganske vanlig at data er tilgjengelig for deg, men ikke i et format som er klart til visning på skjermen. Det er ofte (men ikke alltid) data i JSON-format. Det er et flott format for å jobbe med JavaScript, men vi trenger fortsatt å formatere det til noe vi kan bruke.
For eksempel, her er noen fiktive data vi kan ha tilgjengelig:
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 til slutt vil vi gjøre det til:
Ender's Game
Gavin Hood
Du tror kanskje jQuery er fantastisk på det. jQuery er full av verktøy for DOM-traversering / manipulering. Men det har ikke et veldig robust sett med DOM-skapelsesverktøy kan du si. Jeg tror jQuery-teamet vurderte å legge til mal på et tidspunkt, og til og med lekte med et "offisielt" plugin, men det tok ikke av.
I denne videoen gjør vi bare ikke det som i dag tradisjonelt er tenkt som mal. Vi bygger rett og slett en ny med jQuery og bruker streng sammenkobling for å bygge HTML vi trenger og til slutt injisere den på siden. Det er ikke noe teknisk feil ved det, men jeg prøver å kjøre hjem hvordan denne tilnærmingen kan komme raskt ut av hånden.
Bare i den lille biten av JS vi skriver i denne videoen, blander vi en rekke bekymringer / jobber:
- Få dataene. Vi har det bare for hånden her, men sannsynligvis er dette litt mer komplekst. Kanskje en asynkronisert Ajax-forespørsel med feilhåndtering og caching og slikt.
- Vis logikk. Bestemme hva vi trenger å vise. Hvor mange? Hvilke deler? Basert på hva?
- Hendelsesbehandling. Våre nylig injiserte divs hadde håndteringshendelser lagt til da vi opprettet dem, i stedet for å delegere.
- Mal. HTML-en som vi lager for å oppnå design, strukturere data og imøtekomme eller behov.
Dette er spaghetti-ish-koden vi avsluttet med:
Se pennen 31b07f30dce13b31904da36693b29b41 av Chris Coyier (@chriscoyier) på CodePen
Den neste blokken av videoer kommer til å fokusere en hel del på mal fordi det er veldig viktig, men til slutt vil vi slags bryte fra hverandre disse bekymringene og ende opp med mye mer organisert og vedlikeholdbar kode.