Zaenkrat smo se dobro organizirali. Velik korak je bil razčlenitev naše HTML v predlogi. Tako rekoč več blatimo vode. Naši različni deli funkcionalnosti v JavaScript so razdeljeni na diskretne odseke, kar olajša razumevanje in vzdrževanje. Vem, da smo delali s precej majhno predstavitvijo, vendar upam, da si lahko predstavljate, kako je aplikacija bolj zapletena in ima več vrstic kode neverjetno dragocena.
JavaScript nima nobenega "mnenja", tako kot o organizaciji. Verjetno ga imajo zato nekateri radi in nekateri se v njem počutijo izgubljene. Kako se boste odločili za organizacijo, je povsem odvisno od vas. To je tudi verjetno, zakaj se nekateri resnično zataknejo za okvire, ki, dvomljivi ali ne, zagotavljajo organizacijsko strukturo. Na primer Backbone. Ampak to je druga serija!
Za našo predstavitev bomo preprosto organizirali okoli predmeta, ki ga preprosto ustvarimo.
var Movies = ( )Vsaka stvar, ki jo počnemo tukaj, je povezana s tem, da na stran pripeljemo nekaj filmov, zato jih bomo vsebovali v eni stvari, imenovani Filmi. Ne pozabite, da organizacijsko delamo samo tisto, kar se nam zdi smiselno. To ima prednost, da v "globalno področje uporabe" vključimo le eno spremenljivko. Če bi naredili vse v globalnem obsegu, bi šlo za nenamerno preglasitev spremenljivk (in funkcij in karkoli), prijavljenih drugje.
Takšen predmet pa dejansko ničesar ne "naredi". Morali ga bomo "sprožiti".
var Movies = ( init: function() ( ) ) Movies.init();Imeti funkcijo z imenom init je nekoliko standard, ki omogoča vsakomur, ki bere to kodo, da ve, da koda v njej deluje, ko se izvede ta skupina kode. To bi moralo biti podobno vsebini, kaj se zgodi s to skupino kode. Nato naredimo druge funkcije (več lastnosti predmeta Movies), ki naredijo stvari, ki jih moramo narediti, v ločenih delih. Ne pozabite, da lahko stvari imenujemo, kakor hočemo, kar se nam zdi smiselno.
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();Precej jasno, kaj? Morda boste opazili appendMovesToPage, da ni poklican v init. To je zato, ker tega ne moremo poklicati, dokler ne dobimo podatkov za pošiljanje. Ti podatki bodo prišli iz klica Ajaxa, kar pomeni, da potrebujemo povratni klic. Tako getDatabomo na koncu poklicali tega.
Vse ostalo, kar se bo tu zapolnilo, so samo premiki bitov kode, ki smo jih že zapisali na pravo mesto.
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();
In končano.
Poglejmo si štiri pomisleke, ki smo jih omenili prej, in poglejmo, kaj smo storili z njimi.
- Pridobivanje podatkov. JSON smo premaknili v datoteko, s katero bi lahko zadeli
$.getJSON, saj bi to verjetno morali storiti v resnični situaciji. Razen tega, da samo to vadimo, nam bo to omogočilo pisanje testov. - Logika prikaza. Zdaj imamo zelo specifično funkcijo appendMoviesToPage, ki se pokliče, ko smo pripravljeni dodati svoje filme na stran. Enonamenske funkcije so odlične za (spet) organizacijo, razumljivost in vzdrževanje.
- Vodenje dogodkov. Z uporabo prenosa dogodkov te »poslovne logike« ne mešamo več z logiko zaslona ali predlogo. Za izvedbo naročila vira nam sploh ni treba skrbeti, ker na koncu dogodke pripisujemo
document. Naša funkcionalnost bo delovala ne glede na to, kdaj / kako je predloga dodana na stran. - Predloge. Popolnoma se preselil v uporabo knjižnic, namenjenih posebej za predloge.
Temu bi rekel zmaga. Tu smo končali:
Oglejte si Pen BwbhI Chrisa Coyierja (@chriscoyier) na CodePen