Șablonarea este o parte importantă a lucrului cu aplicații JavaScript. Este destul de obișnuit ca datele să fie disponibile pentru dvs., dar nu într-un format care poate fi afișat pe ecran. Aceasta este frecvent (dar nu întotdeauna) date în format JSON. Acesta este un format excelent pentru a lucra cu JavaScript, dar trebuie totuși să-l formatăm în ceva pe care îl putem folosi.
De exemplu, iată câteva date fictive pe care le-am putea avea la îndemână:
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" ),… ) )Și, în cele din urmă, am dori să transformăm acest lucru în:
Ender's Game
Gavin Hood
S-ar putea să credeți că jQuery este minunat la asta. jQuery este plin de instrumente de traversare / manipulare DOM. Dar nu are un set foarte robust de instrumente de creare a DOM pe care le-ați putea spune. Cred că echipa jQuery a avut în vedere adăugarea de template-uri la un moment dat și chiar s-a jucat cu un plugin „oficial”, dar nu a decolat.
În acest videoclip pur și simplu nu facem ceea ce astăzi se consideră în mod tradițional ca modelare. Tocmai construim un nou cu jQuery și folosim concatenarea șirurilor pentru a construi codul HTML de care avem nevoie și, în cele din urmă, îl injectăm pe pagină. Nu există nimic incorect din punct de vedere tehnic în acest sens, dar încerc să conduc acasă cum această abordare poate scăpa rapid de sub control.
Doar puțin din JS pe care îl scriem în acest videoclip, amestecăm o varietate de preocupări / locuri de muncă:
- Obținerea datelor. O avem doar la îndemână aici, dar probabil că acest lucru este puțin mai complex. Poate o cerere Ajax asincronizată cu gestionarea erorilor și stocarea în cache și altele.
- Afișați logica. Decidând ce trebuie să arătăm. Cat de mult? Ce părți? Pe ce?
- Tratarea evenimentelor. Divizorii noștri nou injectați au avut adăugate gestionarea evenimentelor pe măsură ce le-am creat, în loc să delegăm.
- Modelare. Codul HTML pe care îl creăm pentru a realiza proiectarea, structurarea datelor și adaptarea sau nevoile acestora.
Acesta este codul spaghetti-ish cu care am terminat:
Vedeți Penul 31b07f30dce13b31904da36693b29b41 de Chris Coyier (@chriscoyier) pe CodePen
Următorul bloc de videoclipuri se va concentra o grămadă pe template-uri, deoarece este foarte important, dar în cele din urmă vom distruge toate aceste preocupări și vom termina cu un cod mult mai organizat și mai ușor de întreținut.