Pēdējo videoklipu mēs pārtraucām ar mazliet juceklīgu jucekli. Vienā JavaScript blokā mēs sajaucām datu izguvi, attēlojuma un biznesa loģiku, kā arī veidnes. Šajā videoklipā mēs sāksim sadalīt šīs lietas, lai mūs virzītu uz organizētāku, uzturamāku un saprotamāku kodu. Liela daļa no tā ir veidnes.
Izvēlieties 1. vietu mūsu šablonu piedzīvojumā ar stūri. Stūrei ir gudra pieeja, jo veidnes HTML burtiski tiek ievietots HTML. Jūs izmantojat īpašu tagu. Tas padara jauku autoru izveidi, jo mēs varam izvairīties no virkņu savienošanas neveiklības (visi šie citāti un plusi) un iegūt jauku sintakses izcelšanu HTML redaktoram. Mūsu veidne galu galā izskatījās šādi:
((movieTitle))
((movieDirector))
Ievērojiet dīvaino typeatribūtu skripta tagā. Tas neļauj izpildīt šī taga saturu. Galu galā stūre vienkārši izvelk šī taga iekšus un pārvērš to par veidnes funkciju. Diezgan gudrs veids, kā to patiešām apstrādāt.
Šie biti, piemēram, ((movieTitle))ir svarīgas daļas. Galu galā mēs nododam objektu veidošanas funkcijai, kas tiek izveidota, un šī objekta īpašības atbilst šiem viettura bitiem. Stūre, iespējams, tiek saukta par stūri, jo šie viettura gabali ir iesaiņoti cirtainās bikšturos, kas no augšas nedaudz atgādina stūri.
Pēc vienkāršās apmācības vietnē Handlebars mēs izveidojam savu veidņu funkciju šādi:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Tad mūsu forlokā mēs izsaucam mūsu jauno veidņu funkciju ar objektu (kontekstu), kas satur vienu filmu. HTML tiks atgriezts, un mēs to pievienojam lapai.
var html = template(data.movies(i)); $("#movies").append(html);Mēs arī paņemam šī videoklipa veidni un filmējam to citā pildspalvā. Tas tikai norāda, kā jūs, iespējams, sadalītu savu kodu reālā projektā. Veidne gandrīz noteikti būs kaut kāda veida “iekļaušana”.
Lūk, kur mēs nonācām:
Skatiet Krāsa Koijera (@chriscoyier) Pen mdCjJ vietnē CodePen
Mēs šeit esam veikuši dažus labus panākumus, lai uzlabotu kodu, taču mums vēl ir jāpaveic, lai tas būtu pilnīgi tīrs.