Mēs līdz šim esam paveikuši diezgan labu darbu, organizējoties. Mūsu HTML izveide veidnē bija liels solis. Mēs tā ilgāk dubļojam ūdeņus. Mūsu dažādi funkcionāli JavaScript biti ir sadalīti diskrētās sadaļās, padarot lietas vieglāk saprotamas un uzturamas. Es zinu, ka mēs esam strādājuši ar diezgan mazu demonstrāciju, taču es ceru, ka jūs varat iedomāties, kā lietotnei kļūstot sarežģītākai un vairāk koda rindiņu, šī organizācija ir neticami vērtīga.
JavaScript nav neviena viedokļa, it kā tas būtu par organizāciju. Tieši tāpēc daži cilvēki to mīl un daži cilvēki jūtas pazuduši tajā. Tas, kā jūs izvēlaties to organizēt, ir pilnībā atkarīgs no jums. Tas ir arī iespējams, kāpēc daži cilvēki patiešām piesaista ietvarus, kuri, domājot vai nē, nodrošina organizatorisko struktūru. Piemēram, mugurkauls. Bet tā ir cita sērija!
Demonstrācijai mēs vienkārši sakārtosim objektu, kuru vienkārši izveidosim.
var Movies = ( )Katra lieta, ko mēs šeit darām, ir saistīta ar filmu nokļūšanu lapā, tāpēc to iekļausim vienā “filmā”. Atcerieties, ka mēs vienkārši darām visu, kas mums organizatoriski ir jēga. Tā priekšrocība ir tikai viena mainīgā iekļaušana “globālajā tvērumā”. Ja mēs darītu visu globālā mērogā, tas būtu haoss ar nejauši svarīgākiem mainīgajiem (un funkcijām un visiem citiem) deklarētiem mainīgajiem.
Tomēr tāds objekts faktiski neko nedara. Mums tas būs jāsāk.
var Movies = ( init: function() ( ) ) Movies.init();Funkcijas ar nosaukumu init ir mazliet standarts, kas ikvienam, kurš lasa šo kodu, zina, ka tur esošais kods darbojas, kad tiek izpildīta šī koda grupa. Tam vajadzētu būt mazliet līdzīgam satura rādītājam par to, kas notiek ar šo kodu grupu. Pēc tam mēs veicam citas funkcijas (vairāk objektu Movies īpašības), kas veic lietas, kas mums jādara, atsevišķos gabalos. Atcerieties, ka mēs varam nosaukt lietas, kā vien mēs vēlamies, kā vien mums ir jēga.
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();Diezgan skaidrs eh? Jūs, iespējams, pamanīsit, ka appendMovesToPagetas nav izsaukts init. Tas ir tāpēc, ka mēs to nevaram piezvanīt, kamēr mums nav datu, lai tos nosūtītu. Šie dati tiks iegūti no Ajax zvana, kas nozīmē, ka mums ir nepieciešams atzvanīšana. Tātad getDatagalu galā to piezvanīsit.
Viss pārējais, kas šeit tiks aizpildīts, ir tikai koda bitu pārvietošana, kurus mēs jau esam ierakstījuši pareizajā 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();
Un darīts.
Apskatīsim četras iepriekš izklāstītās problēmas un redzēsim, ko mēs ar tām darījām.
- Datu iegūšana. Mēs pārvietojām JSON failā, ar kuru mēs varētu trāpīt
$.getJSON, jo tas, visticamāk, mums būtu jādara reālā situācijā. Izņemot tikai to, ka tas ļaus mums rakstīt testus ap to. - Parādīt loģiku. Tagad mums ir ļoti specifiska funkcija appendMoviesToPage, kas tiek izsaukta, kad esam gatavi pievienot savas filmas lapai. Viena mērķa funkcijas ir lieliskas (atkal) organizēšanai, saprotamībai un uzturēšanai.
- Pasākumu apstrāde. Izmantojot notikumu deleģēšanu, mēs vairs nesajaucam šo “biznesa loģiku” ar attēlojuma loģiku vai veidni. Mums pat nav jāuztraucas par avota pasūtījuma izpildi, jo mēs galu galā pievienojam notikumus
document. Mūsu funkcionalitāte darbosies neatkarīgi no tā, kad / kā veidne tiek pievienota lapai. - Veidošana. Pilnībā pārcēlās uz bibliotēku izmantošanu, kas domāta tieši veidnēm.
Es to sauktu par uzvaru. Lūk, kur mēs nonācām:
Skatiet Kriss Koijers (@chriscoyier) Pen BwbhI vietnē CodePen