Jak dotąd wykonaliśmy całkiem dobrą robotę, jeśli chodzi o organizację. Rozbicie naszego kodu HTML w szablonie było dużym krokiem. Można by powiedzieć, że już błotnimy wody. Nasze różne funkcjonalne fragmenty JavaScript są podzielone na dyskretne sekcje, co ułatwia zrozumienie i konserwację. Wiem, że pracowaliśmy nad dość małą wersją demonstracyjną, ale mam nadzieję, że możesz sobie wyobrazić, że w miarę jak aplikacja staje się bardziej skomplikowana i zawiera więcej linii kodu, ta organizacja jest niezwykle cenna.
JavaScript nie ma żadnej „opinii” na temat organizacji. Prawdopodobnie dlatego niektórzy ludzie to uwielbiają, a niektórzy czują się w tym zagubieni. To, jak zdecydujesz się to zorganizować, zależy wyłącznie od Ciebie. Prawdopodobnie dlatego niektórzy ludzie naprawdę przywiązują się do ram, które - uparte lub nie - zapewniają strukturę organizacyjną. Na przykład Backbone. Ale to już inna seria!
Na potrzeby naszej demonstracji po prostu zorganizujemy wokół obiektu, który po prostu tworzymy.
var Movies = ( )Wszystko, co tutaj robimy, jest związane z umieszczaniem na stronie filmów, więc zawrzemy to w jednej „rzeczy” zwanej Filmami. Pamiętaj, że robimy wszystko, co ma dla nas sens organizacyjnie. Ma to tę zaletę, że obejmuje również tylko jedną zmienną „zakres globalny”. Gdybyśmy zrobili wszystko w zakresie globalnym, byłby to bałagan w postaci przypadkowych nadpisań zmiennych (i funkcji itp.) Zadeklarowanych gdzie indziej.
Jednak taki obiekt w rzeczywistości niczego nie „robi”. Będziemy musieli „zacząć to robić”.
var Movies = ( init: function() ( ) ) Movies.init();Posiadanie funkcji o nazwie init jest trochę standardem, który pozwala każdemu czytającemu ten kod wiedzieć, że kod w nim jest uruchamiany, gdy ta grupa kodu jest wykonywana. To powinno trochę przypominać spis treści tego, co dzieje się z tą grupą kodu. Następnie tworzymy inne funkcje (więcej właściwości obiektu Movies), które wykonują rzeczy, które musimy zrobić, w oddzielnych fragmentach. Pamiętaj, że możemy nazywać rzeczy, jak tylko chcemy, cokolwiek ma dla nas sens.
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();Całkiem jasne, co? Możesz zauważyć, że appendMovesToPagenie jest wywoływany w init. Dzieje się tak, ponieważ nie możemy tego wywołać, dopóki nie mamy danych do wysłania. Te dane będą pochodzić z wywołania Ajax, co oznacza, że potrzebujemy wywołania zwrotnego. Więc w getDatakońcu zadzwonię do tego.
Wszystko inne, co tutaj wypełni, to po prostu przeniesienie fragmentów kodu, które już napisaliśmy, we właściwe miejsce.
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 zrobione.
Przyjrzyjmy się czterem obawom, które nakreśliliśmy wcześniej, i zobaczmy, co z nimi zrobiliśmy.
- Pobieranie danych. Przenieśliśmy JSON do pliku, w który mogliśmy trafić
$.getJSON, ponieważ prawdopodobnie musielibyśmy to zrobić w prawdziwej sytuacji. Poza ćwiczeniem tego, pozwoli nam to napisać testy na ten temat. - Logika wyświetlania. Mamy teraz bardzo specyficzną funkcję appendMoviesToPage, która jest wywoływana, gdy jesteśmy gotowi do dołączenia naszych filmów do strony. Funkcje jednocelowe świetnie nadają się do (znowu) organizacji, zrozumiałości i łatwości konserwacji.
- Obsługa zdarzeń. Korzystając z delegowania zdarzeń, nie mieszamy już tej „logiki biznesowej” z logiką wyświetlania lub szablonem. Nie musimy się nawet martwić o wykonanie zlecenia źródłowego, ponieważ ostatecznie dołączamy zdarzenia do pliku
document. Nasza funkcjonalność będzie działać bez względu na to, kiedy / jak szablon zostanie dołączony do strony. - Szablony. Całkowicie przeniósł się do korzystania z bibliotek przeznaczonych specjalnie do tworzenia szablonów.
Nazwałbym to wygraną. Oto, gdzie skończyliśmy:
Zobacz Pen BwbhI autorstwa Chrisa Coyiera (@chriscoyier) na CodePen