Predloge so pomemben del dela z aplikacijami JavaScript. Precej pogosto je, da so vam podatki na voljo, vendar ne v obliki, ki je pripravljena za prikaz na zaslonu. To so pogosto (vendar ne vedno) podatki v obliki JSON. To je odlična oblika za delo z JavaScriptom, vendar jo moramo vseeno oblikovati v nekaj, kar lahko uporabimo.
Tu je na primer nekaj izmišljenih podatkov, ki bi jih lahko imeli na voljo:
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" ),… ) )In navsezadnje bi radi to naredili v:
Ender's Game
Gavin Hood
Morda se vam zdi jQuery super. jQuery je poln orodij za prehod / manipulacijo DOM. Ampak nima zelo robustnega nabora orodij za ustvarjanje DOM, ki bi jih lahko rekli. Verjamem, da je ekipa jQuery v določenem trenutku razmišljala o dodajanju predlog in se celo poigrala z "uradnim" vtičnikom, vendar ni vzletela.
V tem videu preprosto ne počnemo tega, kar danes tradicionalno velja za predloge. Z JQueryjem preprosto ustvarimo novo in s pomočjo združevanja nizov sestavimo HTML, ki ga potrebujemo, in ga na koncu vbrizgamo na stran. V tem ni nič tehnično nepravilnega, vendar se trudim in se odpeljem domov, kako lahko ta pristop hitro uide izpod nadzora.
V samo malo JS, ki ga pišemo v tem videu, mešamo različne pomisleke / delovna mesta:
- Pridobivanje podatkov. Tu imamo samo pri roki, verjetno pa je to nekoliko bolj zapleteno. Morda async zahteva Ajax z obdelavo napak in predpomnjenjem in podobno.
- Logika prikaza. Odločanje, kaj moramo pokazati. Koliko? Kateri deli? Na podlagi česa?
- Vodenje dogodkov. Našim novo vbrizganim div-jem je bilo namesto delegiranja dodano obdelavo dogodkov, ko smo jih ustvarili.
- Predloge. HTML, ki ga ustvarimo za oblikovanje, strukturiranje podatkov in prilagajanje potrebam.
To je koda za špagete, ki smo jo končali:
Oglejte si Pen 31b07f30dce13b31904da36693b29b41 Chrisa Coyierja (@chriscoyier) na CodePen
Naslednji blok videoposnetkov se bo kup osredotočil na predloge, ker je to zelo pomembno, vendar bomo na koncu nekako razbili vse te pomisleke in na koncu dobili veliko bolj organizirano in vzdržno kodo.