Do sada smo prilično dobro odradili posao organiziranja. Izrada našeg HTML-a u predlošku bio je velik korak. Takoreći više blatimo vode. Naši različiti dijelovi funkcionalnosti u JavaScriptu podijeljeni su u diskretne odjeljke, što olakšava razumijevanje i održavanje. Znam da smo radili s prilično malim demonstracijama, ali nadam se da možete zamisliti kako je, kako aplikacija postaje kompliciranija i više linija koda, ova organizacija nevjerojatno vrijedna.
JavaScript nema nikakvo "mišljenje" kao o organizaciji. To je vjerojatno razlog zašto neki ljudi to vole, a neki se osjećaju izgubljeno u njemu. Način na koji ćete to organizirati ovisi o vama. To je također vjerojatno zašto se neki ljudi zaista prikvače za okvire koji, uvjereni ili ne, pružaju organizacijsku strukturu. Na primjer, okosnica. Ali to je druga serija!
Za naš demo jednostavno ćemo se organizirati oko objekta koji jednostavno stvorimo.
var Movies = ( )Sve što ovdje radimo povezano je s prikazivanjem nekih filmova na stranici, pa ćemo ih sadržavati u jednoj "stvari" koja se zove Filmovi. Zapamtite da samo radimo sve što za nas organizacijski ima smisla. To ima prednost što samo jednu varijablu stavljamo i u "globalni opseg". Kad bismo sve radili na globalnom opsegu, to bi bio nered slučajno nadjačavanja varijabli (i funkcija i bilo čega drugog) deklariranih negdje drugdje.
Takav objekt zapravo zapravo "ne radi" ništa. Morat ćemo to "pokrenuti".
var Movies = ( init: function() ( ) ) Movies.init();Imati funkciju nazvanu init pomalo je standard koji omogućuje svakome tko čita ovaj kôd da zna da kod unutar postoji ono što se pokreće kada se izvrši ova grupa koda. To bi trebalo sličiti poput sadržaja onoga što se događa s ovom skupinom koda. Zatim izrađujemo druge funkcije (više svojstava objekta Movies) koje rade stvari koje trebamo raditi, diskretnim dijelovima. Zapamtite da stvari možemo nazivati kako god želimo, što god za nas ima smisla.
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();Prilično jasno, a? Možda ćete primijetiti da appendMovesToPagese ne zove u init. To je zato što ga ne možemo nazvati dok nemamo podatke za slanje. Ti će podaci doći iz poziva Ajaxa, što znači da nam treba povratni poziv. Pa getDataće na kraju nazvati i onu.
Sve ostalo što će se ovdje popuniti je samo premještanje dijelova koda koji smo već napisali na pravo mjesto.
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();
I gotovo.
Pogledajmo četiri zabrinutosti koje smo prethodno istakli i vidjeti što smo učinili s njima.
- Dobivanje podataka. Premjestili smo JSON u datoteku koju bismo mogli pogoditi
$.getJSONjer je to vjerojatno potrebno u stvarnoj situaciji. Osim što ćemo samo vježbati, ovo će nam omogućiti da oko toga napišemo testove. - Logika prikaza. Sada imamo vrlo specifičnu funkciju appendMoviesToPage koja se poziva kada smo spremni dodati svoje filmove na stranicu. Jednonamjenske funkcije izvrsne su za (opet) organizaciju, razumljivost i održivost.
- Rukovanje događajima. Korištenjem delegiranja događaja više ne miješamo ovu "poslovnu logiku" s logikom prikaza ili predloškom. Ne moramo se brinuti ni o izvršenju izvorne narudžbe, jer u konačnici događaje pridružujemo
document. Naša funkcionalnost funkcionirat će bez obzira kada / kako je predložak dodan stranici. - Predlošci. Potpuno premješten u upotrebu knjižnica namijenjenih posebno za izradu predložaka.
Ja bih to nazvao pobjedom. Evo gdje smo završili:
Pogledajte olovku BwbhI Chrisa Coyiera (@chriscoyier) na CodePenu