Mallimine on JavaScripti rakendustega töötamise oluline osa. On üsna tavaline, et andmed on teile kättesaadavad, kuid mitte vormingus, mis on ekraanil kuvamiseks valmis. Need on tavaliselt (kuid mitte alati) andmed JSON-vormingus. See on suurepärane vorming JavaScripti kasutamiseks, kuid peame selle siiski vormindama millekski, mida saame kasutada.
Näiteks siin on mõned väljamõeldud andmed, mis võivad meil käepärast olla:
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" ),… ) )Ja lõpuks tahaksime sellest teha:
Ender's Game
Gavin Hood
Võib arvata, et jQuery on selles osas vinge. jQuery on täis DOM-i läbimise / manipuleerimise tööriistu. Kuid sellel pole väga tugevat DOM-i loomistööriistade komplekti, mida võite öelda. Usun, et jQuery meeskond kaalus mingil hetkel mallide lisamist ja mängis isegi "ametlikku" pistikprogrammi, kuid see ei läinud lahti.
Selles videos me lihtsalt ei tee seda, mida tänapäeval traditsiooniliselt mallina peetakse. Ehitame lihtsalt uue koos jQuery-ga ja kasutame stringide liitmist vajaliku HTML-i loomiseks ja lõpuks selle lehele sisestamiseks. Selles pole midagi tehniliselt valet, kuid proovin koju sõita, kuidas see lähenemine võib kiiresti käest ära minna.
Selles videos kirjutatud JS-i väikeses osas segame mitmesuguseid probleeme / töid:
- Andmete hankimine. Meil on see siin lihtsalt käepärast, kuid tõenäoliselt on see natuke keerulisem. Võib-olla asünkroonne Ajaxi taotlus koos tõrkeotsingu ja vahemällu salvestamise ja muu sellisega.
- Kuva loogika. Otsustamine, mida peame näitama. Kui palju? Millised osad? Mille põhjal?
- Ürituste korraldamine. Meie äsja süstitud dividele lisati sündmuste käsitlemine nende loomisel, mitte delegeerimisel.
- Mallimine. HTML, mille loome disaini teostamiseks, andmete struktureerimiseks ja mahutamiseks või vajaduste rahuldamiseks.
See on spagetis-ish kood, mille me lõpetasime:
Vaadake Chris Coyieri (@chriscoyier) CodePenilt Pen 31b07f30dce13b31904da36693b29b41
Järgmine videoblokk keskendub hulga mallidele, sest see on ülitähtis, kuid lõpuks jagame kõik need probleemid laiali ja jõuame palju korrastatud ja hooldatava koodiga.