Utilitzeu Backbone.js per accelerar les interaccions

Autora: Monica Porter

Data De La Creació: 13 Març 2021

Data D’Actualització: 15 Ser Possible 2024

Vídeo: Miško Hevery: Qwik, PartyTown, and Lessons from Angular [Swyx Mixtape]

Content

Comencem llavors
El nostre primer model
Una col·lecció d’imatges
La imatge FlickrBomb
La capa de visualització
El FlickrBombImageView
The Home Stretch
Funciona molt bé amb grans aplicacions web
Recursos addicionals

Si voleu crear ràpidament una petita eina JavaScript, probablement no estigueu pensant a utilitzar un framework. És més fàcil piratejar jQuery en lloc d’instal·lar i aprendre un nou marc, oi? Malament, Backbone.js és un marc de cola molt lleuger que s'assembla a l'antic JavaScript habitual que esteu acostumat a escriure.

Aquí fem un munt de prototips estàtics a ZURB, perquè ens agrada poder fer clic a les pàgines sense haver d’escriure cap codi de fons. Sovint, deixàvem imatges de marcador de posició de gris gris o, de vegades, anàvem a buscar imatges de mostra a Flickr per ajudar-nos a visualitzar el que podria aparèixer a l'esborrany final. Això és fins a un divendres màgic, quan vam decidir que seria fantàstic escriure una mica de JavaScript per resoldre els nostres problemes. Volíem poder cercar i seleccionar fotos a Flickr, directament des de les imatges dels espais reservats. L’anomenaríem FlickrBomb, i aquesta és la història de com la vam construir amb Backbone.js.

És molt recomanable que feu una ullada ràpida a FlickrBomb abans de llegir. És un d'aquests tipus d'ofertes "un clic val més que mil paraules". Endavant, esperarem.

Actualment, hi ha molts marcs JavaScript al bloc, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Però ens ha agradat Backbone.js per a aquest projecte en particular per diversos motius:

1. És lleuger (de fet, 100% lliure de greixos)

de pes, amb la darrera versió empaquetada d’uns 4,6 kb
en codi, ja que són poc més de 1.000 línies de codi, no és terriblement difícil seguir un traç de pila cap a la part interna sense perdre la ment

2. Sembla JavaScript

perquè és JavaScript, ja està i tot
utilitza jQuery, que fins i tot la vostra àvia coneix actualment

3. Persistència súper senzilla

fora de la caixa, manté les dades en un dorsal (mitjançant REST), però en deixar-lo caure en un únic connector, es guardarà a l'emmagatzematge local.
perquè abstrau l'API de persistència, podríem fer-lo persistir a un backend REST amb només eliminar el connector d'emmagatzematge local

Comencem llavors

Com que Backbone.js és només JavaScript, tot el que hem de fer és incloure-ho juntament amb Underscore.js a la pàgina. jQuery no és una dependència difícil per a Backbone per se, però l’utilitzarem per tant, l’inclourem aquí. També enllaçarem el connector d’emmagatzematge local, ja que no volem tenir problemes per configurar un backend. Tingueu en compte que enllaçaven directament els fitxers aquí per simplicitat, però sempre heu d’allotjar els vostres propis recursos en producció.

script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>

Tot el següent codi d’aquest article és específic de la nostra aplicació, de manera que el podem incloure en un fitxer app.js o bé incloure-ho en línia si això és el que voleu. Només recordeu d’incloure’l després de Backbone. Backbone permet abstractitzar parts de la nostra aplicació, perquè siguin modulars per facilitar la seva reutilització i siguin més llegibles per a altres. Per il·lustrar millor aquesta abstracció, anàvem a explicar el disseny de FlickrBomb de baix a dalt, començant pels models i acabant amb les vistes.

El nostre primer model

La primera tasca que anàvem a abordar és treure les fotos de Flickr. Modelar FlickrImage a la columna vertebral és prou senzill, crearem un model nou anomenat FlickrImage i afegirem alguns mètodes per ajudar-nos a obtenir polzades de diferents mides.

Els models de Backbone són objectes que es poden persistir i tenen algunes funcions associades, com els models d'altres marcs MVC. La part màgica dels models Backbone és que podem vincular esdeveniments a atributs, de manera que, quan aquest atribut canviï, podem actualitzar les nostres opinions per reflectir-ho. Però ens estem avançant una mica.

Quan traiem les fotos de Flickr, obtindrem prou informació per crear URL per a totes les mides. Tanmateix, aquest muntatge ens queda a nosaltres, de manera que hem implementat la funció .image_url () que pren un paràmetre de mida i retorna un enllaç públic. Com que es tracta d’un model vertebrador, podem utilitzar this.get () per accedir als atributs del model. Així, amb aquest model, podem fer el següent en qualsevol altre lloc del codi per obtenir l’URL d’una imatge de Flickr.

flickrImage.image_url ('large')

Bastant concís, eh? Atès que aquest model és específic de la nostra aplicació, afegirem algunes funcions d’embolcall per a la mida de la imatge de mida completa i de polze.

Una col·lecció d’imatges

FlickrBomb tracta de col·leccions d’imatges, no d’imatges simples, i Backbone té una manera convenient de modelar-ho. La Col·lecció adequadament anomenada és el que farem servir per agrupar les imatges de Flickr en un únic marcador de posició.

Hi ha un parell de coses a destacar aquí. En primer lloc, el model L'atribut indica a les col·leccions quin tipus de model recopila. També tenim alguns atributs que vam inicialitzar per utilitzar-los més endavant: la clau és la nostra clau API Flickr; voldreu substituir flickrbombAPIkey per la cadena de la vostra pròpia clau API Flickr. Obtenir una clau API de Flickr és gratuït i senzill; només cal que seguiu aquest enllaç: www.flickr.com/services/api/misc.api_keys.html. L'atribut de pàgina és la pàgina actual de les fotos de Flickr en què estem.

El gran mètode aquí és .fetch (), que abstrau els detalls de l'extracció de fotos de l'API de Flickr. Per evitar problemes amb les sol·licituds entre dominis, fem servir JSONP, compatible amb l'API de Flickr i jQuery. La resta de paràmetres que passem a l’API haurien d’explicar-se per si mateixos. Especialment interessants són les funcions Backbone que s’anomenen aquí. A la devolució de trucada d’èxit que fem servir .add (), una funció que pren una sèrie d’atributs de model, crea instàncies de model a partir d’aquests atributs i, a continuació, els afegeix a la col·lecció.

Les funcions .nextPage () i .prevPage () primer canvien la pàgina que volem mostrar,
utilitzeu la funció de recopilació .remove () per eliminar tots els models existents del fitxer
i, a continuació, truca a fetch per obtenir les fotos de la pàgina actual (que acabem de publicar)
canviat).

La imatge FlickrBomb

Tornant cap enrere, necessitem un model més per representar la imatge de marcador de posició, que consistirà en una col·lecció de FlickrImages i la FlickrImage actual que s’ha seleccionat. Anomenarem aquest model FlickrBombImage.

Atès que aquest model s’encarrega de fer un seguiment de la imatge seleccionada actualment entre les càrregues de pàgines, ha de saber quina botiga de magatzematge local s’ha d’utilitzar.La primera línia us assegurarà que hi ha suport per a l’emmagatzematge local i, a continuació, crearem la botiga que farem servir per persistir la imatge seleccionada.

Backbone ens permet definir una funció .initialize () que es cridarà quan es creï una instància del model. Utilitzem aquesta funció a FlickrBombImage per crear una nova instància de la col·lecció FlickrImages, passar les paraules clau que s’utilitzaran per a aquesta imatge i després recuperar les imatges de Flickr.

La funció .loadFirstImage () s'ha passat com a devolució de trucada per executar-se quan les imatges s'han carregat des de Flickr. Com probablement podeu endevinar, aquesta funció estableix que la imatge actual sigui la primera de la col·lecció de Flickr. No ho fa si la imatge actual ja s'ha definit.

També utilitzarem les devolucions de trucada d’atributs de Backbone per activar la nostra funció .changeSrc () quan canviï l’atribut src d’aquest model. Tot el que fa aquesta devolució de trucada és call .save (), una funció de model Backbone que persisteix en els atributs del model a qualsevol capa de magatzem implementada (en el nostre cas localstore). D'aquesta manera, sempre que es canvia la imatge seleccionada, es manté immediatament.

La capa de visualització

Ara que tenim tot el codi del backend (bé, backend) escrit, podem reunir les visualitzacions. Les visualitzacions a Backbone són una mica diferents de les visualitzacions d'altres marcs tradicionals de MVC. Tot i que una visualització normalment només es refereix a la presentació, la Vista troncal també és responsable del comportament. Això significa que la vostra visualització no només defineix l'aspecte d'una cosa, sinó també què ha de fer quan s'interactua.

Una vista es relaciona habitualment (però no sempre) amb algunes dades i passa per tres fases per generar marques de presentació a partir d’aquestes dades:

1. S'inicialitza l'objecte View i es crea un element buit.
2. Es diu la funció de renderització, que genera el marcatge de la vista inserint-la a l'element creat al pas anterior.
3. L'element està unit al DOM.

Pot semblar molt de treball per generar una mica de marcatge, i ni tan sols estem en la part de comportament de la visualització, però és important i és per això. Cada vegada que modifiqueu elements que es troben al DOM, activeu una cosa anomenada reflux del navegador. Un reflux és el navegador que recalcula la posició de totes les coses de la pàgina. Els fluxos de navegació del navegador poden resultar deficients si es criden dins d'un esdeveniment d'arrossegar o canviar la mida, que s'activa a un interval molt curt, però pitjor, tenen un aspecte descuidat. Amb una manipulació de pàgina complexa, podeu veure elements que s’afegeixen a la pàgina i canviar la posició dels elements. Seguint el patró d’inicialització, de renderització i d’adjunt de Backbone, garantiu un únic reflux i els canvis a la pàgina seran perceptivament instantanis, independentment de la complexitat de la manipulació dels elements.

El FlickrBombImageView

Les funcions d'aquesta vista s'han omès per brevetat, el codi font en la seva totalitat està disponible a GitHub: github.com/zurb/flickrbomb

A la part superior de la visualització, tenim un parell d'atributs específics de Backbone. tagName i className s'utilitzen per definir l'etiqueta i la classe que s'aplicaran a l'element d'aquesta visualització. Recordeu que el primer pas de la creació de Visualització és crear un objecte i, ja que Backbone gestiona aquesta creació, hem d’especificar l’element i la classe. Tingueu en compte que Backbone té valors predeterminats raonables; si ometem aquests atributs, per defecte s’utilitzarà un div i no s’aplicarà cap classe tret que n’especifiqueu un.

L'atribut template és una convenció, però no obligatori. L'utilitzem aquí per especificar la funció de plantilla JavaScript que utilitzarem per generar el nostre marcador per a aquesta vista. Utilitzem la funció _.template () inclosa a Underscore.js, però podeu utilitzar el motor de plantilla que preferiu, no us jutjarem.

A la nostra funció .initialize () traiem la cadena de paraules clau de l'etiqueta d'imatge i, a continuació, creem un model FlickrBombImage amb aquestes paraules clau. També vinculem la funció .addImage () que s'executarà quan s'afegeixi una imatge Flickr a la col·lecció FlickrImages. Aquesta funció afegirà la nova imatge FlickrImage al menú desplegable del selector d’imatges. L'última i més important línia vincula la funció .updateSrc () per disparar-se quan es canvia la FlickrImage actualment seleccionada. Quan es canvia la imatge actual al model, aquesta funció s'executarà, actualitzarà l'atribut src de l'element imatge i CSS canviarà la mida i retallarà la imatge perquè s'ajusti a les dimensions de la imatge especificades per l'usuari.

events: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Després de .initialize () tenim la part de comportament de la vista. Backbone proporciona una manera còmoda de vincular esdeveniments mitjançant un objecte d'esdeveniments. L'objecte events utilitza el mètode jQuery .delegate () per fer l'enllaç real a l'element View, de manera que independentment de la manipulació que feu a l'element de la vista, tots els esdeveniments vinculats continuaran funcionant. Funciona de la mateixa manera que jQuery .live (), excepte que en lloc d'enllaçar esdeveniments a tot el document, podeu enllaçar-los dins de l'abast de qualsevol element. La clau de cada entrada de l'objecte d'esdeveniments consisteix en l'esdeveniment i el selector; el valor indica la funció que s'hauria de vincular a l'esdeveniment. Tingueu en compte que .delegate () no funciona amb alguns esdeveniments com l'enviament, consulteu la documentació de jQuery .live () per obtenir una llista completa d'esdeveniments admesos.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); torna això;}

Per últim, tenim la funció .render () que s’encarrega de crear el nostre marcador i fer qualsevol treball addicional que no es pugui realitzar fins que no s’hagi afegit l’etiquetatge View a l’element View. Després de representar la nostra plantilla, hem de trucar a .fetch () a la nostra imatge FlickrBomb. .fetch () és una funció Backbone que obté la darrera còpia del model de la capa de persistència. Si haguéssim desat aquest model abans, .fetch () recuperaria aquestes dades ara. Un cop obtinguda la imatge, hem de trucar a la mida per situar-la correctament.

The Home Stretch

Amb totes les peces al seu lloc, tot el que hem de fer ara és trobar les imatges de marcador de posició a la pàgina i substituir-les per les visualitzacions de FlickrBombImage renderitzades.

$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});

Aquest petit fragment s’ha d’executar a la part inferior de la pàgina o en una devolució de trucada preparada per al document, per assegurar-se que pot trobar les imatges de marcador de posició que substituirà. Utilitzem la convenció d’especificar flickr: // [KEYWORD] a l’atribut src d’una etiqueta d’imatge per indicar que s’ha d’emplenar amb imatges de Flickr. Trobem elements d’imatge amb un atribut src coincident, creem un nou FlickrBombImageView i, a continuació, substituïm la imatge per la nostra. Agafem una còpia de la imatge original i la passem al nostre FlickrBombView, de manera que podem extreure algunes opcions de configuració addicionals que poden haver estat especificades a l’element.

El resultat final de tot aquest esforç és una API molt senzilla per a les persones que utilitzen la biblioteca. Simplement poden definir etiquetes d’imatge mitjançant la convenció flickr: //, deixar anar el codi FlickrBomb a la part inferior de la pàgina i, bam, tenen imatges de marcador de posició de Flickr.

Funciona molt bé amb grans aplicacions web

Tenim una gran aplicació web anomenada Notable, que es va escriure sense preocupar-se per generar contingut al costat del client. Quan volíem que les seccions de l’aplicació es turbo generant contingut al costat del client, vam triar Backbone. Els motius eren els mateixos: volíem un marc lleuger que ajudés a mantenir el codi organitzat, però que no ens obligés a repensar tota l’aplicació.

Vam llançar els canvis a principis d’aquest any amb un gran èxit i des de llavors cantem elogis de Backbones.

Recursos addicionals

Hi ha molt més a Backbone del que he tractat en aquest article, la part C (controlador) de MVC (model view controller) per a principiants, que en realitat és un R (enrutador) de la versió més recent. I tot està cobert a la documentació de Backbone, un lleuger dissabte al matí que diu:
documentcloud.github.com/backbone/

Si us agraden tutorials més tradicionals, consulteu el codi molt ben documentat d’aquesta aplicació escrita a Backbone:
documentcloud.github.com/backbone/docs/todos.html

Article Anterior