Šablonai yra svarbi darbo su „JavaScript“ programomis dalis. Gana įprasta, kad duomenys yra prieinami jums, bet ne tokiu formatu, kuris būtų paruoštas ekrane. Tai dažniausiai (bet ne visada) duomenys JSON formatu. Tai puikus formatas dirbant su „JavaScript“, tačiau vis tiek turime jį suformatuoti į tai, ką galime naudoti.
Pavyzdžiui, čia yra keletas išgalvotų duomenų, kuriuos galime turėti po ranka:
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" ),… ) )Galų gale norėtume tai padaryti:
Ender's Game
Gavin Hood
Galite pagalvoti, kad „jQuery“ yra nuostabus. „jQuery“ yra pilnas DOM perėjimo / manipuliavimo įrankių. Bet jame nėra labai tvirto DOM kūrimo įrankių rinkinio, kurį galite pasakyti. Manau, kad „jQuery“ komanda kažkuriuo metu svarstė galimybę pridėti šablonus ir netgi žaisdavo su „oficialiu“ papildiniu, tačiau tai nepasiimdavo.
Šiame vaizdo įraše mes tiesiog nedarome to, kas šiandien tradiciškai laikoma šablonu. Tiesiog sukursime naują su „jQuery“ ir naudosime eilučių sujungimą, kad sukurtume reikiamą HTML ir galų gale jį įterptume į puslapį. Tame nėra nieko techniškai neteisingo, bet aš stengiuosi važiuoti namo, kaip šis požiūris gali greitai išsisukti.
Tik šiek tiek JS, kurį rašome šiame vaizdo įraše, maišome įvairius rūpesčius / darbus:
- Duomenų gavimas. Mes tiesiog turime tai po ranka, bet tikriausiai tai yra šiek tiek sudėtingiau. Galbūt asinchroninis „Ajax“ prašymas su klaidų tvarkymu, talpykla ir pan.
- Rodyti logiką. Sprendimas, ką turime parodyti. Kiek? Kurios dalys? Pagal ką?
- Renginių tvarkymas. Mūsų naujai įšvirkštiems divams buvo pridėta įvykių tvarkymo, kai juos kūrėme, o ne delegavome.
- Šabloninis. HTML, kurį sukursime, kad galėtume sukurti dizainą, struktūrizuoti duomenis ir pritaikyti ar poreikius.
Tai spageti-ish kodas, kurį mes baigėme:
Žiūrėkite Chris Coyier (@chriscoyier) rašiklį 31b07f30dce13b31904da36693b29b41 „CodePen“
Kitas vaizdo įrašų blokas sutelks dėmesį į šablonus, nes tai yra labai svarbu, bet galų gale mes tarsi suskaidysime visus šiuos rūpesčius ir galų gale su daug labiau organizuotu ir prižiūrimu kodu.