Olemme tehneet toistaiseksi melko hyvää työtä järjestäytyneemme. HTML: n saaminen mallina hajotettuna oli iso askel. Olemme enää mutaa vesillä niin sanotusti. Eri bittiämme toiminnallisesti JavaScriptissä on jaettu huomaamattomiin osioihin, mikä helpottaa asioiden ymmärtämistä ja ylläpitoa. Tiedän, että olemme työskennelleet melko pienen esittelyn kanssa, mutta toivon, että voit kuvitella, kuinka tämä sovellus on uskomattoman arvokas sovelluksen monimutkaisemmaksi ja koodiriveiksi.
JavaScriptillä ei ole mitään mielipidettä organisaatiosta. Siksi jotkut ihmiset rakastavat sitä ja jotkut ihmiset tuntevat kadonneen siihen. Kuinka päätät järjestää sen, on täysin sinun tehtäväsi. Se on myös todennäköistä, miksi jotkut ihmiset todella tarttuvat kehyksiin, jotka mielipiteinä tai eivät, tarjoavat organisaatiorakenteen. Esimerkiksi selkäranka. Mutta se on toinen sarja!
Esittelymme varten järjestämme yksinkertaisesti luomamme objektin ympärille.
var Movies = ( )Jokainen asia, jonka teemme täällä, liittyy elokuvien saamiseen sivulle, joten sisällytämme sen yhteen elokuviin nimeltä "elokuvat". Muista, että teemme vain mitä on järkevää meille organisatorisesti. Tämän etuna on, että vain yksi muuttuja laitetaan myös "globaaliin soveltamisalaan". Jos teemme kaiken maailmanlaajuisesti, se olisi sotku vahingossa ohittavista muuttujista (ja toiminnoista ja muista), jotka on ilmoitettu muualla.
Tällainen esine ei tosiasiallisesti "tee" mitään. Meidän on aloitettava se.
var Movies = ( init: function() ( ) ) Movies.init();Funktion nimellä init on vähän standardia, jonka avulla jokainen tätä koodia lukeva tietää, että siellä oleva koodi toimii, kun tämä koodiryhmä suoritetaan. Sen pitäisi olla vähän kuin sisällysluettelo siitä, mitä tämän koodiryhmän kanssa tapahtuu. Sitten teemme muita toimintoja (enemmän Elokuvat-objektin ominaisuuksia), jotka tekevät asioita, jotka meidän on tehtävä, erillisinä paloina. Muista, että voimme kutsua tavaraa mihin vain haluamme, mikä on meille järkevää.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Melko selvä? Saatat huomata, appendMovesToPageettei sitä kutsuta init. Tämä johtuu siitä, että emme voi soittaa sille ennen kuin meillä on tietoja sen lähettämiseen. Nämä tiedot tulevat Ajax-puhelusta, mikä tarkoittaa, että tarvitsemme soittopyynnön. Joten getDatalopulta kutsuu sitä.
Kaikki muu, joka täyttää täällä, on vain koodipalojen siirtämistä, jotka olemme jo kirjoittaneet oikeaan paikkaan.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Ja tehty.
Katsotaanpa neljä aikaisemmin hahmoteltua huolta ja katsotaan, mitä teimme niiden suhteen.
- Tietojen saaminen. Siirsimme JSON-tiedoston tiedostoon, johon voisimme lyödä
$.getJSON, koska todennäköisesti meidän on tehtävä se todellisessa tilanteessa. Sen lisäksi, että harjoittelemme sitä, tämä antaa meille mahdollisuuden kirjoittaa testejä sen ympärille. - Näytä logiikka. Meillä on nyt hyvin erityinen toiminto appendMoviesToPage, jota kutsutaan, kun olemme valmiita liittämään elokuvamme sivulle. Yhden käyttötarkoituksen toiminnot ovat (uudelleen) organisoitavia, ymmärrettäviä ja ylläpidettäviä.
- Tapahtumien käsittely. Käyttämällä tapahtuman delegointia emme enää sekoita tätä "liiketoimintalogiikkaa" näyttölogiikkaan tai malliin. Meidän ei tarvitse edes huolehtia lähdetilausten toteuttamisesta, koska lopulta liitämme tapahtumat tapahtumaan
document. Toimintomme toimii riippumatta siitä, milloin / miten malli liitetään sivuun. - Mallintaminen. Siirtyi kokonaan käyttämään kirjastoja, jotka oli tarkoitettu erityisesti mallintamiseen.
Kutsuisin sitä voittoa. Tässä päädyimme:
Katso Chris Coyierin (@chriscoyier) kynä Pen BwbhI CodePenistä