Share
Spre deosebire de colegii săi de dezvoltare web, JavaScript nu a avut niciodată prea mult în calea cadrelor pentru a oferi structură. Din fericire, în ultimii ani, asta începe să se schimbe.
Astăzi, aș vrea să vă prezint pe Backbone.JS, o bibliotecă dulce, care face mult mai ușor procesul de creare a aplicațiilor complexe, interactive și bazate pe date. Acesta oferă o modalitate curată de a vă separa datele din prezentare.
Creat de Jeremy Ashkenas, ninja JS care a construit CoffeeScript, Backbone este o bibliotecă super-ușoară care vă permite să creați ușor ca să vă mențineți front-end-urile. Este un program agnostic și funcționează bine cu oricare dintre bibliotecile JavaScript moderne pe care le utilizați deja.
Spinele este o colecție de obiecte coezive, cântărind într-o umbră sub 4KB, care dau structura codului dvs. și vă ajută în principal să construiți o aplicație MVC corespunzătoare în browser. Site-ul oficial descrie scopul său astfel:
Backbone furnizează structura pentru aplicațiile JavaScript grele, oferind modele cu legare la cheie și evenimente personalizate, colecții cu un API bogat de funcții enumerate, vizualizări cu manipulare declarativă a evenimentelor și le conectează la aplicația dvs. existentă printr-o interfață RESTful JSON.
Să facem față: cele de mai sus sunt puțin greu de analizat și de înțeles. Deci, să mergem mai departe și să deconstruăm jargonul puțin, cu ajutorul lui Jeremy.
Când se modifică conținutul sau starea modelului, alte obiecte care au subscris modelul sunt notificate, astfel încât să poată proceda corespunzător. Aici, vizualizările ascultă modificările din model și se actualizează în mod corespunzător, în loc de modelul care trebuie să trateze manual opiniile.
Backbone navele cu o serie de funcții foarte utile pentru manipularea și lucrul cu datele dvs. Spre deosebire de alte aplicații, matricele din JavaScript sunt destul de sterilizate, ceea ce reprezintă într-adevăr o problemă dificilă când trebuie să rezolvați datele.
Zilele tale de scriere a legăturilor cu spaghetele se termină. Puteți declara programabil care callback trebuie asociat cu elemente specifice.
Chiar dacă metoda implicită este de a utiliza un apel AJAX standard atunci când doriți să discutați cu serverul, puteți să îl dezactivați cu ușurință la tot ce aveți nevoie. Au apărut o serie de adaptoare care acoperă majoritatea preferatelor, inclusiv Websockets și stocarea locală.
Pentru ao descompune în termeni și mai simpli:
Backbone oferă o modalitate curată de a vă separa datele din prezentarea dvs. chirurgical. Modelul care funcționează cu datele se referă numai la sincronizarea cu un server în timp ce datoria primară a vizualizării ascultă modificările modelului abonat și redarea codului HTML.
Cred că ești probabil puțin cam fazed în acest moment, deci hai să clarificăm câteva lucruri:
Nu. Ele sunt destul de complementare în domeniile lor, cu aproape nici o suprapunere în funcționalitate. Backbone se ocupă de toate abstracțiile de nivel superior, în timp ce jQuery - sau alte biblioteci similare - lucrează cu DOM, normalizează evenimente și așa mai departe.
Domeniile lor de aplicare și de utilizare sunt destul de diferite și pentru că știți că nu înseamnă că nu ar trebui să înveți pe celălalt. Ca dezvoltator JavaScript, trebuie să știți cum să lucrați eficient cu ambele.
Deoarece, de cele mai multe ori, codul frontal devine într-o grămadă murdară de apelări imbricate, manipulări DOM, HTML pentru prezentare, în mijlocul altor acțiuni nesalvate.
Backbone oferă o modalitate foarte curată și elegantă de a gestiona acest haos.
Backbone-ul este ideal pentru crearea de aplicații grele, bazate pe date. Gândiți-vă la interfața GMail, Twitter nou sau la orice altă revelație din ultimii ani. Ea face să fie complexă aplicaţii Mai ușor.
În timp ce îl puteți trage de pantofi pentru mai multe site-uri Web mainstream pagini, aceasta este într-adevăr o bibliotecă care este adaptată pentru aplicațiile web.
da și nu.
Da, deoarece, ca și cadrele menționate mai sus, acest lucru este destinat în primul rând pentru crearea de fronturi complexe pentru aplicațiile web.
Este diferit în faptul că Backbone-ul este destul de slab, și navele cu nici unul dintre widget-ul pe care ceilalți îl transportă.
Spine este greutate incredibil de mică, la sub 4kb.
Există, de asemenea, faptul că Cappuccino vă obligă să vă scrieți codul în Obiectiv-J, în timp ce opiniile lui Sproutcore trebuie declarate programabil în JS. În timp ce nici una dintre aceste abordări nu este greșită, cu Backbone, JavaScript normal este valorificat de rularea HTML și CSS pentru a face lucrurile, ceea ce duce la o curbă mai ușoară de învățare.
Absolut. Nu numai accesul tipic la DOM, tipul de împachetare AJAX, dar și restul tipului de încărcare templating și script. Este foarte, foarte slab cuplat, ceea ce înseamnă că puteți folosi aproape toate uneltele dvs. împreună cu Backbone.
Nu, mă scuzați. Dar iată ceva să te înveselească.
Ok, acum, cu asta, să ne aruncăm!
MVC în Backbone era inițial pentru Modele, Vizionări și Colecții, deoarece nu existau controale în cadrul. Acest lucru sa schimbat de atunci.
Miezul backbone-ului este alcătuit din patru clase principale:
Din moment ce suntem puțin legați de timp, să aruncăm o privire la doar clasele de bază de astăzi. Vom face o urmărire a tutorilor cu o aplicație foarte simplă pentru a demonstra conceptele învățate aici, deoarece ar fi prea mult pentru a pune totul într-un singur articol și așteptați ca cititorul să analizeze totul.
Ține-ți ochii descuiați în următoarele două săptămâni!
Modelele pot însemna lucruri diferite în diferite implementări ale MVC. În Backbone, un model reprezintă o entitate singulară - o înregistrare într-o bază de date dacă doriți. Dar nu există reguli dure și rapide aici. De pe site-ul Backbone:
Modelele sunt inima oricărei aplicații JavaScript care conține datele interactive, precum și o mare parte a logicii care o înconjoară: conversii, validări, proprietăți calculate și control acces.
Modelul vă oferă doar o modalitate de a citi și scrie proprietăți sau atribute arbitrare pe un set de date. Având în vedere acest lucru, linia unică de mai jos este complet funcțională:
var Joc = Backbone.Model.extend ();
Să construim puțin.
Accentsconagua
var Joc = Backbone.Model.extend (initialize: function () alert ("Oh hey!");, implicit: name: 'Default title', releaseDate: 2011,); inițializa va fi concediat atunci când un obiect este instanțiat. Aici, alerg doar la inanități - în aplicația dvs. ar trebui probabil să vă bootstrapați datele sau să efectuați alte activități de menaj. De asemenea, definesc o mulțime de valori implicite, în cazul în care nu sunt transmise date.
Să aruncăm o privire asupra modului de citire și scriere a atributelor. Dar mai întâi, să creăm un nou exemplu.
// Creați un nou joc var portal = nou joc (name: "Portal 2", releaseDate: 2011); // release va deține valoarea releaseDate - 2011 aici var release = portal.get ('releaseDate'); // Schimbă atributul name portal.set (name: "Portal 2 by Valve"); Dacă ați observat mutații primiți / setați, aveți un cookie! Atributele unui model nu pot fi citite prin formatul tipic object.attribute. Va trebui să treci prin getter / setter, deoarece există șanse mai mici să schimbați datele din greșeală.
În acest moment, toate modificările sunt păstrate doar în memorie. Să facem aceste schimbări permanente vorbind cu serverul.
portal.save ();
Asta e. Ați așteptat mai mult? Linia unică de mai sus va trimite acum o cerere la serverul dvs. Rețineți că tipul de solicitare se va schimba inteligent. Deoarece acesta este un obiect proaspăt, POST va fi folosit. În caz contrar, se utilizează PUT.
Există mult mai multe caracteristici, modelele Backbone vă oferă în mod prestabilit, dar acest lucru ar trebui cu siguranță să începeți. Apăsați documentația pentru mai multe informații.
Colecțiile din Backbone sunt în esență doar o colecție de modele. Folosind analogia bazei noastre de date de mai devreme, colecțiile sunt rezultatele unei interogări în care rezultatele constau dintr-un număr de înregistrări [modele]. Puteți defini o colecție ca aceasta:
var JocuriCollecție = Backbone.Collection.extend (model: Game,);
Primul lucru pe care trebuie să-l notăm este că definim ce model este o colecție de. Extinzând exemplul nostru mai devreme, fac această colecție o colecție de jocuri.
Acum poți să mergi și să te joci cu datele tale în conținutul inimii tale. De exemplu, să extindem colecția pentru a adăuga o metodă care returnează numai anumite jocuri.
var JocuriCollection = Backbone.Collection.extend (model: Game, old: function () returneaza acest filtru (functie (joc) return game.get ('releaseDate') < 2009; ); ); A fost ușor, nu-i așa? Ne verificăm dacă un joc a fost lansat înainte de 2009 și, dacă da, returnați jocul.
De asemenea, puteți manipula direct conținutul unei colecții, cum ar fi:
Jocuri var = Jocuri noiCollection games.get (0);
Fragmentul de mai sus generează o nouă colecție și apoi preia modelul cu un ID de 0. Puteți găsi un element la o anumită poziție prin referirea indexului la la astfel: games.at (0);
Și, în cele din urmă, puteți popula dinamic colecția dvs., astfel:
var JocuriCollecție = Backbone.Collection.extend (model: Game, url: '/ games'); var jocuri = noi JocuriCollection games.fetch ();
Pur și simplu lăsăm Backbone unde să obțină datele de la URL-ul proprietate. Cu asta, noi doar creăm un obiect nou și sunăm aduce care declanșează un apel asincron către server și stochează colecția cu rezultatele.
Aceasta ar trebui să acopere elementele de bază ale colecțiilor cu Backbone. După cum am menționat, există tone de bunătăți aici, ceea ce cu Backbone aliasing o mulțime de utilități minunate din biblioteca Underscore. O citire rapidă a documentației oficiale ar trebui să vă facă să începeți.
Vizionările în coloana vertebrală pot fi puțin confuze la prima vedere. Pentru puristii MVC, ele seamana mai degraba cu un controler decat cu o vizualizare in sine.
O viziune are două sarcini fundamentale:
Să mergem mai departe și să creăm o viziune foarte simplă.
GameView = Backbone.View.extend (tagName: "div", className: "joc", render: function () // cod pentru redarea HTML pentru vizualizare);
Destul de simplu dacă ați urmat acest tutorial până acum. Doresc doar să precizez ce element HTML să fie folosit pentru a împacheta vederea prin nume eticheta atributul, precum și ID-ul pentru aceasta prin intermediul numele clasei.
Să mergem mai departe la porțiunea de randare.
render: funcția () this.el.innerHTML = this.model.get ('name'); // Sau metoda jQuery $ (this.el) .html (this.model.get ('name')); el se referă la elementul DOM referit de vizualizare. Pur și simplu accesăm numele jocului la elementul lui innerHTML proprietate. Pentru a spune pur și simplu, div Elementul conține acum numele jocului nostru. Evident, calea jQuery este mai simplă dacă ați folosit biblioteca înainte.
Cu aspecte mai complicate, manipularea codului HTML în cadrul JavaScript nu este doar obositoare, ci și prost. În aceste scenarii, modelarea este calea de parcurs.
Backbone nave cu o soluție minimă templating courtesy of Underscore.JS, dar sunteți mai mult decât bineveniți să utilizați oricare dintre soluțiile excelente templating disponibile.
În cele din urmă, să aruncăm o privire la modul în care vederile ascultă evenimentele. Evenimente DOM primul.
evenimente: 'click .name': 'handleClick', handleClick: function () alert ('În numele științei, tu monstru'); // Alte acțiuni necesare Ar trebui să fie suficient de simplu dacă ați mai colaborat cu evenimente. În principiu, definim și strângem evenimente prin obiectul evenimentelor. După cum puteți vedea mai sus, prima parte se referă la eveniment, următorul indică elementele de declanșare, în timp ce ultima parte se referă la funcția care ar trebui să fie concediată.
Și acum pe legarea la modele și colecții. Voi lega modelele de aici.
GameView = Backbone.View.extend (initialize: function (args) _.bindAll (aceasta, 'changeName'); this.model.bind ('change: name', this.changeName);,); Primul lucru pe care trebuie să îl observăm este modul în care plasăm codul obligatoriu în inițializa funcții. Firește, este mai bine să faci asta de la plecare.
bindAll este un utilitar oferit de Underscore care persistă valoarea unei funcții acest valoare. Acest lucru este deosebit de util, deoarece noi trecem o mulțime de funcții în jurul și funcțiile specificate ca callbacks au această valoare șters.
Acum, ori de câte ori este un model Nume atributul este schimbat, schimba numele se numește funcția. De asemenea, puteți folosi adăuga și elimina verbe pentru a efectua sondaje pentru schimbări.
Ascultarea schimbărilor într-o colecție este la fel de simplă ca înlocuirea model cu Colectie în timp ce legarea handler la apel invers.
Controlerele din Backbone vă permit, în esență, să creați aplicații scumpe, statale, utilizând hashbang-uri.
var Hashbangs = Backbone.Controller.extend :! / ":" root ","! / games ":" games ", root: , games: function () // Re-render vizualizări pentru a afișa o colecție de cărți,);
Acest lucru este foarte familiar cu rutarea în cadrul tradițional de servere MVC. De exemplu, !/ jocuri va harta la jocuri funcția în timp ce URL-ul în browser-ul în sine va fi Domeniul / #! / jocuri.
Prin utilizarea inteligentă a hashbang-urilor, puteți crea aplicații bazate pe JS, dar și cărți de vizitat.
Dacă sunteți îngrijorat de ruperea butonului din spate, Backbone ați acoperit prea.
// Inițiți controlerul ca so var ApplicationController = controller nou; Backbone.history.start ();
Cu fragmentul de mai sus, Backbone poate monitoriza hashbang-urile tale și, coroborat cu rutele pe care le-ai specificat mai devreme, îți faci aplicația rezervabilă.
În ansamblu, iată câteva lecții pe care le-am învățat din modul Backbone de creare de aplicații:
Este suficient să spunem că Backbone a cauzat o schimbare de paradigmă în ceea ce privește modul în care trebuie să fie construite front-end-urile, cel puțin pentru mine. Având în vedere domeniul foarte larg al articolului de astăzi, sunt sigur că aveți o mulțime de întrebări. Activați secțiunea de comentarii de mai jos pentru a vă îndemna. Vă mulțumesc foarte mult pentru că ați citit și așteptați o tona mai multe tutoriale din backbone în viitor!
