Get Cracking with Backbone

Od lat programiści wykorzystują frameworki PHP takie jak CakePHP, CodeIgniter, a nawet frameworki Ruby oparte na wzorcu MVC. Ale jeśli o tym pomyślisz, nie było zbyt wielu frameworków JavaScript, które pomogłyby nam w ten sam sposób.

Być może dzieje się tak dlatego, że JavaScript jest często postrzegany przez "prawdziwych" programistów, ale ramy JavaScript zawsze pozostawały w tyle. Kręgosłup zmienił to, a jak zobaczysz w tym wprowadzeniu, używa wzorca MVC do oddzielania kodu JavaScript i pomaga nam tworzyć zorganizowane aplikacje. W efekcie dostarcza wzór MVC do rozwoju front-end.

Co to jest kręgosłup?

Backbone to lekka biblioteka JavaScript z tego samego twórcy co CoffeeScript. Ale nie pozwól, aby fakt, że jest to biblioteka, sprawił, że mylisz ją z jQuery, Backbone jest w oddaleniu od jQuery, jeśli chodzi o funkcjonalność. Backbone nie obsługuje elementów DOM, dlatego wielu programistów używa go w połączeniu z jQuery; Struktura organizacyjna szkieletu i jQuery manipulujące DOM.

To, co Backbone naprawdę robi dobrze, to struktura podaży dla twoich aplikacji JavaScript, a ponieważ działa z JSON-em, można ją łatwo wprowadzić do niemal każdego front-endowego systemu szablonów.

Wzór MVC w kręgosłupie

MVC oznacza modele, widoki i kolekcje; i w kręgosłupie, z również routerami.

Modele

W Backbone model reprezentuje i encji, więc na przykład, jeśli mamy do czynienia z użytkownikami, każdy użytkownik byłby model; to jest jak wiersz w bazie danych.

Aby utworzyć prosty model za pomocą Backbone, wpiszemy:

var user = Backbone.Model.extend({});

Ten kod jest poprawny technicznie, ale Model nie miałby żadnej funkcjonalności, więc musimy dodać coś, co zrobi ten Model, gdy zostanie on utworzony, a do tego celu, użyjemy nieco bardziej złożonego kodu:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ");}, defaults: {nazwa:" John Doe ", wiek: 30,}}); var user = new User; 

W powyższym kodzie funkcja initialize będzie uruchamiana za każdym razem, gdy tworzymy nową instancję tego modelu, po zainicjowaniu wszystkiego, co zrobiliśmy, dodajemy pewne wartości domyślne na wypadek, gdyby żadne dane nie były przekazywane dla Modelu. Po wykonaniu tego, aby utworzyć instancję Modelu, użyjemy kodu takiego jak:

var dave = new User({name:'Dave Smith', age:25});

Aby pobrać atrybut określonej instancji, użylibyśmy:

var name = dave.get('name');

Aby zmienić atrybut, którego użyjemy:

dave.set({age:31});

To jest podstawa działania modeli w kręgosłupie, jest ich o wiele więcej, ale mam nadzieję, że już widzisz potencjał do strukturyzacji kodu.

Kolekcje

Czy pamiętam, że powiedziałem, że model był jak użytkownik? Po tej analogii kolekcja to wszyscy użytkownicy, których mamy. Kolekcje to w gruncie rzeczy zestawy modeli, a ponieważ mamy już nasz model użytkownika, stamtąd tworzymy kolekcję:

var Users = Backbone.Collection.extend({model: User});

Obecnie ta kolekcja jest pusta, ale łatwo jest utworzyć niektórych użytkowników i dodać ją do kolekcji:

var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);

Teraz, jeśli konsolujemy .log himym.models, otrzymamy wartości z barney, ted i lilii.

Widoki

Widoki są powiązane z częścią DOM, są one zaprojektowane tak, aby były powiązane z Modelami, które są zasadniczo danymi aplikacji i służą do prezentacji tych danych użytkownikowi końcowemu.

Tworzenie widoku jest proste:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});

Jest to podstawowa struktura widoku. TagName jest elementem, który będzie używany do zawijania widoku, klasa jest ustawiana za pomocą className, a na końcu dodajemy funkcję renderowania, chociaż w tym ostatnim przypadku funkcja była pusta. Jest to funkcja renderowania, którą dodajemy do sceny, na przykład:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});

Element el w funkcji renderowania odnosi się do utworzonej przez nas wrappera i za pomocą funkcji innerHTML umieściliśmy wiek użytkownika wewnątrz elementu div.

W tym przykładzie nie korzystano z żadnego systemu szablonów, ale jeśli chcesz, możesz skorzystać z narzędzia Underscore.js, które jest dostarczane z kręgosłupem.

Możemy również słuchać wydarzeń, dołączając do naszego widoku detektor zdarzeń, w tym przykładzie utworzymy prosty detektor kliknięć dla naszego div (ten kod będzie następował natychmiast po naszej funkcji renderowania):

events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}

Routery

Routery szkieletowe są używane do routingu adresów URL w aplikacji przy użyciu hashtagów (#). Aby zdefiniować router, należy zawsze dodać co najmniej jedną trasę i co najmniej funkcję, która będzie działać po osiągnięciu pożądanego adresu URL, jak na przykład:

var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();

Jest to bardzo prosty router, który wykona akcję po osiągnięciu skrótu / # użytkownika. Wywołanie metody Backbone.history.start () prosi Backbone o monitorowanie hashtagów, tak aby różne stany witryny były niezauważalne i można je przeglądać za pomocą przeglądarki.

Wniosek

Ten artykuł obejmuje tylko podstawy programu Backbone, które można wykorzystać do tworzenia aplikacji strukturalnych w języku JavaScript. Radzę ci sprawdzić system szablonów do użycia w połączeniu ze szkieletem, aby zobaczyć pełen potencjał tej biblioteki. Mam nadzieję, że te krótkie wstępy pokazały, jak przydatne może być MVC na front-endie.

Czy tworzyłeś aplikacje za pomocą Backbone? Jakie rodzaje aplikacji chciałbyś zbudować? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, obraz rusztowania przez Shutterstock.