Mallintaminen on tärkeä osa JavaScript-sovellusten kanssa työskentelyä. On melko yleistä, että tiedot ovat käytettävissäsi, mutta eivät muodossa, joka on valmis näytettäväksi näytöllä. Se on yleisesti (mutta ei aina) tietoja JSON-muodossa. Se on hieno muoto työskennellä JavaScriptissä, mutta meidän on silti muotoiltava se sellaiseen, mitä voimme käyttää.
Esimerkiksi tässä on joitain kuvitteellisia tietoja, joita meillä saattaa olla käsillä:
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 lopulta haluaisimme tehdä siitä:
Ender's Game
Gavin Hood
Saatat ajatella, että jQuery on siinä mahtava. jQuery on täynnä DOM-liikkumis- / manipulointityökaluja. Mutta sillä ei ole kovin vankkaa joukkoa DOM-luontityökaluja, joita voit sanoa. Uskon, että jQuery-tiimi harkitsi mallien lisäämistä jossain vaiheessa ja jopa leikkasi "virallisella" laajennuksella, mutta se ei lähtenyt.
Tässä videossa emme vain tee sitä, mitä nykyään perinteisesti pidetään mallina. Rakennamme uuden suoraan jQueryn kanssa ja käytämme merkkijonon ketjutusta tarvitsemasi HTML: n rakentamiseen ja viime kädessä injektoimme sen sivulle. Siinä ei ole mitään teknisesti virheellistä, mutta yritän ajaa kotiin, miten tämä lähestymistapa voi päästä nopeasti käsistä.
Tässä videossa kirjoitetussa pienessä JS: ssä sekoitetaan erilaisia huolenaiheita / töitä:
- Tietojen saaminen. Meillä on vain käsillä täällä, mutta todennäköisesti tämä on hieman monimutkaisempi. Ehkä asynkronoitu Ajax-pyyntö, jossa on virheenkäsittely ja välimuisti ja vastaavat.
- Näytä logiikka. Päätetään, mitä meidän on näytettävä. Kuinka monta? Mitkä osat? Minkä perusteella?
- Tapahtumien käsittely. Äskettäin injektoiduilla div-ryhmillämme oli tapahtumien käsittely lisätty niiden luomisen sijasta delegoimisen sijaan.
- Mallintaminen. HTML, jonka luomme suunnittelun toteuttamiseksi, tietojen rakentamiseksi ja mukauttamiseksi tai tarpeisiin.
Tämä on spagetti-ish-koodi, jonka olemme viimeistelleet:
Katso Chris Coyierin (@chriscoyier) kynä 31b07f30dce13b31904da36693b29b41 CodePenistä
Seuraava videolohko keskittyy joukko mallintamiseen, koska se on erittäin tärkeää, mutta lopulta erittelemme kaikki nämä huolenaiheet ja päätämme paljon järjestäytyneempään ja ylläpidettävään koodiin.