Mes iki šiol atlikome gana gerą darbą, kad susitvarkytume. Mūsų HTML suskaidymas šablone buvo didelis žingsnis. Mes taip ilgai purviname vandenis. Skirtingi funkciškai „JavaScript“ bitai yra suskirstyti į diskretiškas dalis, kad tai būtų lengviau suprasti ir prižiūrėti. Aš žinau, kad mes dirbome su gana mažu demonstraciniu variantu, bet tikiuosi, kad galite įsivaizduoti, kaip programai tapus sudėtingesnei ir daugiau kodo eilučių, ši organizacija yra nepaprastai vertinga.
„JavaScript“ neturi jokios nuomonės apie organizaciją. Tikėtina, kad kai kam tai patinka, o kai kurie jaučiasi pasimetę. Kaip jūs pasirenkate tai organizuoti, priklauso tik nuo jūsų. Tai taip pat tikėtina, kodėl kai kurie žmonės tikrai prilimpa prie struktūrų, kurios, vertindamos ar ne, teikia organizacinę struktūrą. Pavyzdžiui, „stuburas“. Bet tai dar viena serija!
Norėdami demonstruoti, mes tiesiog sutvarkysime objektą, kurį paprasčiausiai sukursime.
var Movies = ( )Kiekvienas dalykas, kurį mes čia darome, yra susijęs su tam tikrų filmų pateikimu puslapyje, todėl juos talpinsime viename „filme“, pavadintame „Filmai“. Atminkite, kad mes darome viską, kas mums prasminga organizaciniu požiūriu. Tai naudinga tik tuo, kad į „pasaulinę sritį“ įtraukiamas tik vienas kintamasis. Jei viską darytume pasauliniu mastu, tai būtų netyčia viršijančių kintamųjų (ir funkcijų, ir bet kokių), deklaruotų kitur, netvarka.
Toks daiktas iš tikrųjų nieko „nedaro“. Turėsime „paleisti“.
var Movies = ( init: function() ( ) ) Movies.init();Funkcijos, pavadintos init, turėjimas yra šiek tiek standartas, leidžiantis visiems, skaitantiems šį kodą, žinoti, kad joje esantis kodas yra tas, kuris veikia, kai vykdoma ši kodo grupė. Tai turėtų būti šiek tiek panašus į turinio lentelę, kas vyksta su šia kodų grupe. Tada mes darome kitas funkcijas (daugiau objekto „Filmai“ savybių), kurios daro dalykus, kuriuos turime atlikti, atskirais gabalais. Atminkite, kad daiktus galime vadinti kuo tik norime, kas mums prasminga.
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();Gana aišku? Galite pastebėti appendMovesToPage, kad nėra iškviestas į init. Taip yra todėl, kad negalime to paskambinti, kol neturime duomenų jiems siųsti. Šie duomenys bus gaunami iš „Ajax“ skambučio, o tai reiškia, kad mums reikia atgalinio ryšio. Taigi getDatagalų gale paskambinsite tam.
Visa kita, kas čia užpildys, yra tik judantys kodo bitai, kuriuos jau įrašėme į reikiamą vietą.
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();
Ir padaryta.
Pažvelkime į keturis anksčiau apibūdintus rūpesčius ir pažiūrėkime, ką padarėme dėl jų.
- Duomenų gavimas. Perkėlėme JSON į failą, kurį galėjome pasiekti
$.getJSON, nes tikėtina, kad mums tai reikės padaryti realioje situacijoje. Išskyrus tik praktiką, tai leis mums apie tai rašyti testus. - Rodyti logiką. Dabar turime labai specifinę funkciją „appendMoviesToPage“, kuri yra iškviečiama, kai esame pasirengę pridėti savo filmus prie puslapio. Vienos paskirties funkcijos puikiai tinka (vėl) organizavimui, suprantamumui ir palaikomumui.
- Renginių tvarkymas. Naudodami įvykių delegavimą, mes nebemaišome šios „verslo logikos“ su rodymo logika ar šablonu. Mums net nereikia jaudintis dėl šaltinio užsakymo vykdymo, nes galiausiai įvykius pridedame prie
document. Mūsų funkcionalumas veiks, nesvarbu, kada / kaip šablonas bus pridėtas prie puslapio. - Šabloninis. Visiškai perėjo naudoti bibliotekas, skirtas šablonams.
Aš pavadinčiau tą laimėjimą. Štai kur mes atsidūrėme:
Žr. Chriso Coyierio (@chriscoyier) „Pen BwbhI“ svetainėje „CodePen“