Oleme seni organiseerimisel teinud päris head tööd. Meie HTML-i vormingus jaotamine oli suur samm. Mudastame enam nii-öelda vett. Meie erinevad funktsionaalselt JavaScripti bitid on jagatud varjatud osadeks, muutes asjad hõlpsamini mõistetavaks ja hooldatavaks. Ma tean, et oleme töötanud päris väikese demoga, kuid loodan, et võite ette kujutada, kuidas rakendus muutub keerukamaks ja rohkem koodiridu, uskumatult väärtuslik.
Javascriptil pole organisatsiooni kohta mingit arvamust. See on tõenäoline põhjus, miks mõned inimesed seda armastavad ja mõned inimesed tunnevad end selles kaotsi. Kuidas otsustate selle korraldada, on täiesti teie enda teha. See on ka tõenäoline, miks mõned inimesed haaravad tõepoolest raamistikke, mis arvamuslikult või mitte, pakuvad organisatsioonilist struktuuri. Näiteks selgroog. Aga see on teine sari!
Demo jaoks korraldame lihtsalt enda loodud objekti ümber.
var Movies = ( )Iga asi, mida me siin teeme, on seotud mõne filmi lehele saamisega, nii et me lisame selle ühe filmi nimega "Filmid". Pidage meeles, et teeme lihtsalt kõike, mis meie jaoks organisatsiooniliselt mõttekas on. Selle eeliseks on ainult ühe muutuja lisamine ka "globaalsesse ulatusse". Kui me teeksime kõike ülemaailmses plaanis, oleks see mujal deklareeritud kogemata ülekaalukate muutujate (ja funktsioonide ning mis iganes) segadus.
Selline objekt ei tee tegelikult midagi. Peame selle "käima lööma".
var Movies = ( init: function() ( ) ) Movies.init();Funktsiooni init omamine on natuke standard, mis võimaldab kõigil, kes seda koodi loevad, teada, et seal asuv kood töötab selle koodirühma käivitamisel. See peaks välja nägema natuke nagu sisukord sellest, mis selle koodirühmaga juhtub. Seejärel valmistame muud funktsioonid (objekti Filmid rohkem omadusi), mis teevad asju, mida peame tegema, diskreetsete tükkidena. Pidage meeles, et me võime asju nimetada ükskõik milleks, milleks iganes meie jaoks mõtet on.
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();Päris selge eh? Võite märgata, et appendMovesToPageseda ei helistata init. Seda seetõttu, et me ei saa sellele helistada enne, kui meil on andmeid nende saatmiseks. Need andmed pärinevad Ajaxi kõnest, mis tähendab, et vajame tagasihelistamist. Nii getDataet lõpuks helistatakse sellele.
Kõik muu, mis siin täidetakse, on lihtsalt koodibitti liigutamine, mille oleme juba õigesse kohta kirjutanud.
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 tehtud.
Vaatame nelja varem välja toodud muret ja vaatame, mida me nende vastu tegime.
- Andmete hankimine. Teisaldasime JSON-i faili, millega saaksime lüüa
$.getJSON, kuna tõenäoliselt peaksime seda tegema reaalses olukorras. Lisaks praktiseerimisele võimaldab see meil selle ümber teste kirjutada. - Kuva loogika. Nüüd on meil väga konkreetne funktsioon appendMoviesToPage, mida nimetatakse siis, kui oleme valmis oma filme lehele lisama. Üheotstarbelised funktsioonid sobivad (jällegi) korralduse, arusaadavuse ja hooldatavuse jaoks.
- Ürituste korraldamine. Kasutades sündmuste delegeerimist, ei sega me seda äriloogikat enam kuvaloogika või malliga. Me ei pea muretsema isegi lähtekorralduse täitmise pärast, sest lõpuks kinnitame sündmused
document. Meie funktsioonid töötavad olenemata sellest, millal / kuidas mall lehele lisatakse. - Mallimine. Kolis täielikult mallide jaoks mõeldud teekide kasutamiseks.
Ma nimetaksin seda võitu. Siia jõudsime:
Vaadake Chris Coyieri (@chriscoyier) Pen BwbhI-d CodePenis