BackboneJS - Aplikacje

BackboneJS nadaje aplikacjom internetowym strukturę, która pozwala oddzielić logikę biznesową od logiki interfejsu użytkownika. W tym rozdziale omówimy styl architektoniczny aplikacji BackboneJS do implementacji interfejsów użytkownika. Poniższy diagram przedstawia architekturę BackboneJS -

Architektura BackboneJS zawiera następujące moduły -

• Żądanie HTTP
• Router
• View
• Events
• Model
• Collection
• Źródło danych

Omówmy teraz szczegółowo wszystkie moduły.

Żądanie HTTP

Klient HTTP wysyła żądanie HTTP do serwera w postaci komunikatu żądania, w którym przeglądarki internetowe, wyszukiwarki itp. Działają jak klienci HTTP. Użytkownik żąda pliku takiego jak dokumenty, obrazy itp., Korzystając z protokołu żądania HTTP. Na powyższym diagramie można było zobaczyć, że klient HTTP używa routera do wysyłania żądania klienta.

Router

Służy do kierowania aplikacji po stronie klienta i łączy je z akcjami i zdarzeniami za pomocą adresów URL. Jest to reprezentacja adresów URL obiektów aplikacji. Ten adres URL jest zmieniany ręcznie przez użytkownika. Adres URL jest używany przez sieć szkieletową, dzięki czemu może zrozumieć, jaki stan aplikacji ma zostać wysłany lub przedstawiony użytkownikowi.

Router to mechanizm, który może kopiować adresy URL, aby dotrzeć do widoku. Router jest wymagany, gdy aplikacje internetowe udostępniają adresy URL, które można połączyć, zarezerwować i udostępnić dla ważnych lokalizacji w aplikacji.

W powyższej architekturze router wysyła żądanie HTTP do View. Jest to przydatna funkcja, gdy aplikacja wymaga możliwości routingu.

Widok

Widoki BackboneJS są odpowiedzialne za to, jak i co wyświetlać z naszej aplikacji i nie zawierają znaczników HTML dla aplikacji. Określa ideę prezentacji danych modelu użytkownikowi. Widoki służą do odzwierciedlenia „wyglądu modelu danych”.

Klasy widoku nie wiedzą nic o HTML i CSS, a każdy widok może być aktualizowany niezależnie, gdy model się zmienia, bez ponownego ładowania całej strony. Reprezentuje logiczną część interfejsu użytkownika w modelu DOM.

Jak pokazano na powyższej architekturze, Widok reprezentuje interfejs użytkownika, który jest odpowiedzialny za wyświetlanie odpowiedzi na żądanie użytkownika wykonane przez router.

Wydarzenia

Wydarzenia są głównymi częściami każdej aplikacji. Wiąże niestandardowe zdarzenia użytkownika z aplikacją. Można je wmieszać w dowolny obiekt i mogą wiązać i wyzwalać zdarzenia niestandardowe. Możesz powiązać zdarzenia niestandardowe, używając żądanej nazwy.

Zazwyczaj zdarzenia są obsługiwane synchronicznie z ich przepływem programu. W powyższej architekturze można zobaczyć, kiedy wystąpi zdarzenie, reprezentuje dane modelu przy użyciu metody View.

Model

Jest to serce aplikacji JavaScript, która pobiera i zapełnia dane. Modele zawierają dane aplikacji, logikę danych i reprezentują podstawowy obiekt danych we frameworku.

Modele reprezentują jednostki biznesowe z pewną logiką biznesową i weryfikacjami biznesowymi. Są używane głównie do przechowywania danych i logiki biznesowej. Modele można pobierać i zapisywać w pamięci danych. Model pobiera żądanie HTTP ze zdarzeń przekazanych przez widok przy użyciu routera i synchronizuje dane z bazy danych i wysyła odpowiedź z powrotem do klienta.

Kolekcja

Kolekcja to zestaw modeli, które wiążą zdarzenia, gdy model został zmodyfikowany w kolekcji. Kolekcja zawiera listę modeli, które mogą być przetwarzane w pętli i obsługuje sortowanie i filtrowanie. Podczas tworzenia kolekcji możemy zdefiniować, jaki typ modelu będzie miała ta kolekcja wraz z instancją właściwości. Każde zdarzenie wyzwolone w modelu będzie również wyzwalane w kolekcji w modelu.

Pobiera również żądanie z widoku, wiąże zdarzenia i synchronizuje dane z żądanymi danymi oraz wysyła odpowiedź z powrotem do klienta HTTP.

Źródło danych

Jest to połączenie nawiązane z bazą danych z serwera i zawiera informacje wymagane od klienta. Przepływ architektury BackboneJS można opisać w następujący sposób:

• Użytkownik żąda danych za pomocą routera, który kieruje aplikacje do zdarzeń za pomocą adresów URL.

• Widok przedstawia dane modelu użytkownikowi.

• Model i kolekcja pobiera i wypełnia dane z bazy danych przez powiązanie zdarzeń niestandardowych.

W następnym rozdziale zrozumiemy znaczenie zdarzeń w BackboneJS.