Paskutiniame vaizdo įraše mes palikome šiek tiek susivėlusią netvarką. Viskas viename „JavaScript“ bloke maišėme duomenų paiešką, pateikimo ir verslo logiką bei šablonus. Šiame vaizdo įraše mes pradėsime suskaidyti tuos dalykus, kad galėtume patekti į labiau organizuotą, prižiūrimą ir suprantamą kodą. Didelė to dalis yra šablonai.
Paimkite 1 vietą mūsų šablonų nuotykiuose su vairu. Vairas turi protingą požiūrį, nes šablono HTML pažodžiui įdedamas į HTML. Jūs naudojate specialią žymą. Tai sukuria gražų autorių kūrimą, nes mes galime atsikratyti styginių sujungimo nerangumo (visų tų citatų ir pliusų) ir gauti gražų HTML sintaksės paryškinimą, kurį suteikia redaktorius. Mūsų šablonas galų gale atrodė taip:
((movieTitle))
((movieDirector))
Atkreipkite dėmesį į keistą typeatributą scenarijaus žymoje. Tai neleidžia vykdyti šios žymos turinio. Galų gale vairas tiesiog ištraukia šios žymos žarnas ir paverčia ją šablono funkcija. Gana protingas būdas tai tvarkyti iš tikrųjų.
Tie bitai kaip ((movieTitle))yra svarbios dalys. Galų gale mes perduodame objektą šablonų funkcijai, kuri sukuriama, ir to objekto savybės atitinka šiuos vietos rezervavimo ženklus. Manoma, kad vairas yra vadinamas vairu, nes tie vietos žymekliai yra suvynioti į garbanotas petnešas, kurios iš viršaus šiek tiek primena vairą.
Laikydamiesi paprastos „Handlebars“ svetainės pamokos, mes sukuriame savo šablonų funkciją taip:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Tada savo forciklo metu mes iškviečiame naują šablono funkciją su objektu (kontekstu), kuriame yra vienas filmas. HTML bus grąžintas ir mes jį pridėsime prie puslapio.
var html = template(data.movies(i)); $("#movies").append(html);Mes taip pat paimame šio vaizdo įrašo šabloną ir filmuojame jį į kitą rašiklį. Tai tik reiškia, kaip jūs tikriausiai suskaidytumėte savo kodą realiame projekte. Šablonas beveik neabejotinai būtų kažkoks „įtraukimas“.
Štai kur mes atsidūrėme:
Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen mdCjJ“ „CodePen“
Čia padarėme gerų žingsnių link geresnio kodo, tačiau turime dar daug nuveikti, kad jis būtų visiškai švarus.