Mallar är en viktig del av arbetet med JavaScript-applikationer. Det är ganska vanligt att data är tillgängliga för dig, men inte i ett format som är klart att visas på skärmen. Det är vanligt (men inte alltid) data i JSON-format. Det är ett bra format för att arbeta med JavaScript, men vi behöver fortfarande formatera det till något vi kan använda.
Här är till exempel några fiktiva data som vi kan ha till hands:
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" ),… ) )Och i slutändan vill vi göra det till:
Ender's Game
Gavin Hood
Du kanske tycker att jQuery är fantastisk på det. jQuery är fullt av DOM-korsnings- / manipulationsverktyg. Men det har inte en mycket robust uppsättning DOM-skapande verktyg kan du säga. Jag tror att jQuery-teamet övervägde att lägga till mallar någon gång och till och med lekte med ett "officiellt" plugin, men det tog inte fart.
I den här videon gör vi bara inte det som idag traditionellt betraktas som mall. Vi bygger bara rakt upp ett nytt med jQuery och använder strängkompatering för att bygga den HTML vi behöver och till sist injicera den på sidan. Det är inget tekniskt felaktigt med det, men jag försöker köra hem hur detta tillvägagångssätt kan gå snabbt ur hand.
I bara den lilla biten av JS som vi skriver i den här videon blandar vi en mängd olika problem / jobb:
- Få data. Vi har det bara till hands här, men troligtvis är det lite mer komplicerat. Kanske en asynk Ajax-begäran med felhantering och cachning och sådant.
- Visa logik. Att bestämma vad vi behöver visa. Hur många? Vilka delar? Baserat på vad?
- Händelsehantering. Våra nyinjicerade divs fick händelsehantering läggas till när vi skapade dem, snarare än att delegera.
- Mallar. HTML: n som vi skapar för att utföra designen, strukturera data och tillgodose eller behov.
Det här är den spaghetti-ish-kod vi slutade med:
Se pennan 31b07f30dce13b31904da36693b29b41 av Chris Coyier (@chriscoyier) på CodePen
Nästa block av videoklipp kommer att fokusera ett gäng på mallar eftersom det är väldigt viktigt, men i slutändan kommer vi att bryta isär alla dessa problem och sluta med mycket mer organiserad och underhållbar kod.