Am făcut o treabă destul de bună până acum de a ne organiza. Obținerea codului nostru HTML într-un șablon a fost un pas important. Nu mai înnorăm apele ca să spunem așa. Diferitele noastre bucăți de funcționalitate din JavaScript sunt împărțite în secțiuni discrete, facilitând înțelegerea și întreținerea lucrurilor. Știu că am lucrat cu o demonstrație destul de mică, dar sper să vă puteți imagina cum o aplicație devine mai complicată și mai multe linii de cod, această organizație este incredibil de valoroasă.
JavaScript nu are nicio „opinie”, despre organizare. Probabil de aceea unii oameni îl iubesc și unii oameni se simt pierduți în el. Modul în care alegi să îl organizezi depinde în totalitate de tine. Acesta este, de asemenea, probabil de ce unii oameni se prind cu adevărat de cadre care, opiniate sau nu, oferă o structură organizațională. De exemplu, Backbone. Dar asta este o altă serie!
Pentru demonstrația noastră, ne vom organiza pur și simplu în jurul unui obiect pe care l-am creat pur și simplu.
var Movies = ( )Fiecare lucru pe care îl facem aici este legat de obținerea unor filme pe pagină, așa că îl vom conține într-un „lucru” numit Filme. Amintiți-vă că facem tot ceea ce are sens pentru noi din punct de vedere organizațional. Aceasta are avantajul de a pune doar o variabilă și în „domeniul de aplicare global”. Dacă am face totul la nivel global, ar fi o mizerie de variabile (și funcții și orice altceva) supranumite accidental declarate în altă parte.
Totuși, un astfel de obiect nu „face” nimic. Va trebui să „lăsăm”.
var Movies = ( init: function() ( ) ) Movies.init();A avea o funcție numită init este un pic un standard care permite oricui citește acest cod să știe că codul din interior este ceea ce rulează atunci când acest grup de cod este executat. Asta ar trebui să citească un fel de cuprins a ceea ce se întâmplă cu acest grup de cod. Apoi realizăm alte funcții (mai multe proprietăți ale obiectului Filme) care fac lucruri pe care trebuie să le facem, în bucăți discrete. Amintiți-vă că putem numi lucruri oricum dorim, orice are sens pentru noi.
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();Destul de clar nu? S-ar putea să observați că appendMovesToPagenu este apelat în init. Asta pentru că nu putem apela asta până nu avem date pentru a le trimite. Aceste date vor proveni dintr-un apel Ajax, ceea ce înseamnă că avem nevoie de un apel invers. Așa că getDatava ajunge să-l cheme pe acela.
Orice altceva care se va completa aici este doar mișcarea de biți de cod pe care deja le-am scris în locul potrivit.
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 gata.
Să ne uităm la cele patru preocupări pe care le-am subliniat anterior și să vedem ce am făcut despre ele.
- Obținerea datelor. Am mutat JSON într-un fișier cu care am putea accesa
$.getJSON, deoarece probabil că ar trebui să facem într-o situație reală. În afară de simpla practică, acest lucru ne va permite să scriem teste în jurul său. - Afișați logica. Acum avem o funcție foarte specifică appendMoviesToPage, care se numește atunci când suntem gata să ne atașăm filmele la pagină. Funcțiile cu un singur scop sunt excelente pentru (din nou) organizare, înțelegere și întreținere.
- Tratarea evenimentelor. Folosind delegarea de evenimente, nu mai amestecăm această „logică de afaceri” cu logica de afișare sau șablonul. Nici nu trebuie să ne facem griji cu privire la executarea comenzii sursă, pentru că atașăm evenimentele la
document. Funcționalitatea noastră va funcționa indiferent când / cum se adaugă șablonul la pagină. - Modelare. Mutat în totalitate pentru a utiliza biblioteci special concepute pentru șablonare.
Aș numi victoria asta. Iată unde am ajuns:
Vedeți Pen BwbhI de Chris Coyier (@chriscoyier) pe CodePen