K urychlení interakcí použijte Backbone.js

Autor: Monica Porter

Datum Vytvoření: 13 Březen 2021

Datum Aktualizace: 15 Smět 2024

K urychlení interakcí použijte Backbone.js - Tvůrčí

Obsah

Pojďme tedy začít
Náš první model
Sbírka obrázků
FlickrBombImage
Pohledová vrstva
FlickrBombImageView
Home Stretch
Skvěle funguje i s velkými webovými aplikacemi
Dodatečné zdroje

Pokud hledáte rychle vytvořit malý nástroj JavaScriptu, pravděpodobně nepřemýšlíte o použití rámce. Snazší je hackovat společně nějaký kód jQuery, než instalovat a učit se nový rámec, že? Špatně, Backbone.js je superlehký rámec lepidla, který vypadá stejně jako běžný starý JavaScript, který jste zvykli psát.

Tady na ZURB děláme spoustu statických prototypů, protože jsme rádi, když dokážeme proklikávat stránky, aniž bychom museli psát jakýkoli backendový kód. Často bychom upustili od fádních šedých zástupných obrázků, nebo někdy šli hledat Flickr na ukázkové obrázky, abychom nám pomohli vizualizovat, co by mohlo jít v konečném konceptu. To je až do jednoho magického pátku, kdy jsme se rozhodli, že by bylo úžasné napsat nějaký JavaScript, který by vyřešil naše problémy. Chtěli jsme mít možnost vyhledávat a vybírat fotografie na Flickru přímo ze samotných zástupných obrázků. Říkali bychom tomu FlickrBomb a toto je příběh o tom, jak jsme jej postavili pomocí Backbone.js.

Důrazně doporučujeme, abyste se před přečtením rychle podívali na FlickrBomb. Je to jeden z těch obchodů typu „kliknutí má hodnotu tisíce slov“. Do toho, počkáme.

V současné době je v bloku spousta rámců JavaScriptu, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Backbone.js se nám ale pro tento konkrétní projekt líbil z několika různých důvodů:

1. Je to lehké (ve skutečnosti 100% bez tuku)

na hmotnosti, přičemž nejnovější zabalená verze je přibližně 4,6 kB
v kódu, který má něco přes 1 000 řádků kódu, není strašně těžké sledovat stopu zásobníku dolů do vnitřních částí bez ztráty mysli

2. Vypadá to jako JavaScript

protože to je JavaScript, to je vše a to je vše
používá jQuery, který dnes ví i vaše babička

3. Super jednoduchá vytrvalost

z krabice přetrvává data do back-endu (přes REST), ale vložením jediného modulu plug-in se místo toho uloží do místního úložiště
protože to abstrahuje persistence API, mohli bychom to nechat přetrvávat na back-end REST pouhým odstraněním plug-inu místního úložiště

Pojďme tedy začít

Protože Backbone.js je pouze JavaScript, vše, co musíme udělat, je zahrnout jej spolu s Underscore.js na stránku. jQuery není tvrdá závislost pro Backbone jako takovou, ale budeme ji používat, takže ji zde zahrneme. Propojíme také modul plug-in pro místní úložiště, protože nechceme mít potíže s nastavením back-endu. Všimněte si, že zde byly přímo propojeny soubory pro zjednodušení, ale ve výrobě byste měli vždy hostovat svá vlastní aktiva.

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>

Veškerý následující kód v tomto článku je specifický pro naši aplikaci, takže jej můžeme zahrnout do souboru app.js, nebo jen vložit, pokud je to vaše věc. Nezapomeňte jej zahrnout za páteř. Backbone umožňuje abstrahovat části naší aplikace, aby byly modulární pro snadné opětovné použití a čitelnější pro ostatní. Abychom co nejlépe ilustrovali tuto abstrakci, chystali jsme se vysvětlit design FlickrBomb zdola nahoru, počínaje modely a konče pohledy.

Náš první model

Prvním úkolem, který jsme se chystali řešit, je tahání fotek z Flickru. Modelování FlickrImage v páteři je dostatečně jednoduché, vytvoříme nový model s názvem FlickrImage a přidáme některé metody, které nám pomohou získat palce různých velikostí.

Modely v Backbone jsou objekty, které lze přetrvávat a mají k nim přidružené některé funkce, podobně jako modely v jiných MVC frameworkech. Magická část modelů Backbone spočívá v tom, že můžeme vázat události na atributy, takže když se tento atribut změní, můžeme aktualizovat naše pohledy tak, aby to odrážely. Ale dostáváme se trochu před sebe.

Když vytáhneme fotografie z Flickru, získáme dostatek informací k vytvoření adres URL pro všechny velikosti. Toto sestavení je však ponecháno na nás, takže jsme implementovali funkci .image_url (), která přebírá parametr velikosti a vrací veřejný odkaz. Protože se jedná o páteřní model, můžeme použít this.get () pro přístup k atributům v modelu. Takže s tímto modelem můžeme udělat jinde v kódu, abychom získali URL obrázku Flickr.

flickrImage.image_url („velký“)

Docela stručné, hm? Vzhledem k tomu, že tento model je specifický pro naši aplikaci, přidáme některé funkce obálky pro velikosti obrázků v plné velikosti a velikosti palce.

Sbírka obrázků

FlickrBomb se zabývá sbírkami obrázků, nikoliv jednotlivými obrázky, a Backbone má vhodný způsob modelování. Příhodně pojmenovaná kolekce je to, co použijeme ke seskupení obrázků Flickr dohromady pro jeden zástupný symbol.

Zde je třeba poznamenat několik věcí. Nejprve Modelka atribut sděluje kolekcím, jaký typ modelu shromažďuje. Máme také některé atributy, které jsme inicializovali pro pozdější použití: key je náš klíč API Flickr, budete chtít flickrbombAPIkey nahradit řetězcem vlastního klíče API Flickr. Získání klíče API Flickr je zdarma a snadné, stačí kliknout na tento odkaz: www.flickr.com/services/api/misc.api_keys.html. Atribut page je aktuální stránka fotografií Flickr, na kterých jsme.

Velkou metodou je zde .fetch (), která abstrahuje od detailů načítání fotografií z Flickr API. Abychom se vyhnuli problémům s požadavky na více domén, používáme JSONP, který podporuje rozhraní Flickr API i jQuery. Ostatní parametry, které předáváme API, by měly být samozřejmé. Zde jsou zvláště zajímavé funkce Backbone. Při zpětném volání úspěchu používáme .add (), funkci, která přebírá pole atributů modelu, z těchto atributů vytvoří instance modelu a poté je přidá do kolekce.

Funkce .nextPage () a .prevPage () nejprve změní stránku, kterou chceme zobrazit,
použijte funkci kolekce .remove () k odebrání všech existujících modelů z
kolekce, a poté zavolejte načíst, abyste získali fotografie pro aktuální stránku (to jsme právě
změněno).

FlickrBombImage

Při naší cestě zpět nahoru potřebujeme ještě jeden model představující zástupný obrázek, který bude sestávat z kolekce FlickrImages a aktuálního FlickrImage, který byl vybrán. Tento model budeme nazývat FlickrBombImage.

Vzhledem k tomu, že tento model je zodpovědný za sledování aktuálně vybraného obrázku mezi načtením stránky, potřebuje vědět, jaký úložiště localstorage použít.První řádek zajistí, že existuje podpora pro localstorage, a poté vytvoří úložiště, které použijeme k zachování vybraného obrázku.

Backbone nám umožňuje definovat funkci .initialize (), která bude volána při vytvoření instance modelu. Tuto funkci používáme v FlickrBombImage k vytvoření nové instance kolekce FlickrImages, předání klíčových slov, která se použijí pro tento obrázek, a následném načtení obrázků z Flickru.

Funkce .loadFirstImage () byla předána jako zpětné volání ke spuštění, když byly obrázky načteny z Flickru. Jak asi tušíte, tato funkce nastaví aktuální obrázek jako první v kolekci od Flickru. Nedělá to, pokud již byl nastaven aktuální obrázek.

Použijeme také zpětná volání atributů Backbone ke spuštění naší funkce .changeSrc (), když se změní atribut src tohoto modelu. Všechno toto zpětné volání je call .save (), funkce páteřního modelu, která přetrvává atributy modelu na jakoukoli vrstvu úložiště, která byla implementována (v našem případě localstore). Tímto způsobem se kdykoli změní vybraný obrázek, okamžitě přetrvává.

Pohledová vrstva

Nyní, když máme napsán veškerý kód backendu (dobře, frontend backend), můžeme dát dohromady pohledy. Pohledy v Backbone se trochu liší od pohledů v jiných tradičních MVC frameworkech. Zatímco pohled se obvykle týká pouze prezentace, páteřní pohled je také zodpovědný za chování. To znamená, že váš pohled nejen definuje, jak něco vypadá, ale také to, co by mělo dělat při interakci.

Pohled je běžně (ale ne vždy) svázán s některými daty a prochází třemi fázemi, aby z těchto dat vygeneroval označení prezentace:

1. Objekt View je inicializován a je vytvořen prázdný prvek.
2. Je vyvolána funkce renderování, která generuje označení pohledu vložením do prvku vytvořeného v předchozím kroku.
3. Prvek je připojen k DOM.

To se může zdát jako spousta práce na vygenerování nějakého označení a ještě nejsme ani v části pohledu, která se týká chování, ale je to důležité a zde je důvod. Pokaždé, když upravíte prvky, které jsou v DOMu, spustíte něco, čemu se říká reflow prohlížeče. Reflow je prohlížeč přepočítávající, jak je umístěna každá věc na stránce. Přehodnocení prohlížeče může být špatné pro výkon, pokud je voláno v rámci události přetažení nebo změny velikosti, která se aktivuje ve velmi krátkém intervalu, ale hůře, vypadají nedbale. Díky složité manipulaci se stránkami můžete skutečně vidět, jak se prvky přidávají na stránku, a provádět přemístění prvků. Podle vzoru Backbone inicializace, vykreslení a připojení zaručujete jediné přeformátování a změny na stránce budou vnímavě okamžité, bez ohledu na složitost manipulace s prvky.

FlickrBombImageView

Funkce tohoto pohledu byly pro stručnost vynechány, celý zdrojový kód je k dispozici na GitHubu: github.com/zurb/flickrbomb

V horní části pohledu máme několik specifických atributů páteře. tagName a className se používají k definování značky a třídy, které se použijí na prvek tohoto pohledu. Nezapomeňte, že prvním krokem vytváření zobrazení je vytvoření objektu, a protože toto vytvoření zpracovává Backbone, musíme určit prvek a třídu. Páteř má rozumné výchozí hodnoty; pokud tyto atributy vynecháme, použije se ve výchozím nastavení div a nebude použita žádná třída, pokud neurčíte jeden.

Atribut šablony je konvence, ale není vyžadován. Používáme jej zde k určení funkce šablony JavaScript, kterou použijeme k vygenerování našeho označení pro toto zobrazení. Používáme funkci _.template () obsaženou v Underscore.js, ale můžete použít jakýkoli templating engine, který dáváte přednost, nebudeme vás soudit.

V naší funkci .initialize () vytahujeme řetězec klíčových slov ze značky obrázku a poté pomocí těchto klíčových slov vytvoříme model FlickrBombImage. Vazíme také funkci .addImage (), která se má spustit, když je FlickrImage přidán do kolekce FlickrImages. Tato funkce připojí nově přidaný FlickrImage k naší plovoucí nabídce pro výběr obrázků. Poslední a nejdůležitější řádek je vazba funkce .updateSrc () na oheň při změně aktuálně vybraného FlickrImage. Když se v modelu změní aktuální obrázek, spustí se tato funkce, aktualizuje se atribut src elementu obrázku a CSS změní velikost a ořízne obrázek tak, aby se vešel do rozměrů obrázku určených uživatelem.

události: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos „}

Po .initialize () máme část chování v pohledu. Backbone poskytuje pohodlný způsob, jak svázat události pomocí objektu událostí. Objekt events používá metodu jQuery .delegate () k provedení skutečné vazby k prvku View, takže bez ohledu na to, jakou manipulaci provedete s prvkem uvnitř pohledu, budou všechny vaše vázané události stále fungovat. Funguje to stejně jako jQuery .live (), kromě toho, že místo vazby událostí na celý dokument je můžete svázat v rámci rozsahu libovolného prvku. Klíč každé položky v objektu událostí se skládá z události a selektoru, hodnota označuje tu funkci, která by měla být vázána na tuto událost. Všimněte si, že .delegate () nefunguje s některými událostmi, jako je odeslání, kompletní dokumentaci podporovaných událostí najdete v dokumentaci jQuery .live ().

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); vrátit toto;}

Nakonec máme funkci .render (), která je zodpovědná za vytvoření našeho označení a za provedení jakékoli další práce, kterou nelze provést, dokud nebude do prvku View přidán znak View. Po vykreslení naší šablony musíme zavolat .fetch () na našem FlickrBombImage. .fetch () je funkce Backbone, která získá nejnovější kopii modelu z vrstvy perzistence. Pokud jsme tento model uložili dříve, .fetch () by tato data načetla nyní. Po načtení obrázku musíme zavolat resize, abychom jej správně umístili.

Home Stretch

Se všemi kousky na místě teď musíme jen najít zástupné obrázky na stránce a nahradit je vykreslenými pohledy FlickrBombImage.

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

Tento malý výstřižek musí být spuštěn v dolní části stránky nebo v zpětném volání připraveného k dokumentu, aby bylo zajištěno, že může najít zástupné obrázky, které nahradí. Používáme konvenci určení flickr: // [KEYWORD] v atributu src tagu obrázku, abychom označili, že by měl být naplněn obrázky z Flickru. Najdeme prvky obrázku se shodným atributem src, vytvoříme nový FlickrBombImageView a poté obrázek nahradíme naším. Chytíme kopii původního obrázku a předáme ji do našeho FlickrBombView, abychom mohli vytáhnout některé další možnosti konfigurace, které mohly být na prvku zadány.

Konečným výsledkem této tvrdé práce je velmi jednoduché API pro lidi, kteří používají knihovnu. Mohou jednoduše definovat obrazové značky pomocí konvence flickr: //, přetáhnout kód FlickrBomb v dolní části své stránky a bam, dostali zástupné obrázky z Flickru.

Skvěle funguje i s velkými webovými aplikacemi

Máme velkou webovou aplikaci s názvem Pozoruhodná, která byla napsána bez obav o generování obsahu na straně klienta. Když jsme chtěli, aby se části turbo aplikace nabíjely generováním obsahu na straně klienta, vybrali jsme Backbone. Důvody byly stejné: chtěli jsme lehký rámec, který pomůže udržet organizovaný kód, ale nenutil nás přehodnotit celou aplikaci.

Změny jsme zahájili na začátku tohoto roku s velkým úspěchem a od té doby zpíváme Backbones chválu.

Dodatečné zdroje

Backbone je mnohem víc než to, co jsem popsal v tomto článku, část C (řadič) MVC (řadič zobrazení modelu) pro spouštěče, což je ve skutečnosti verze R (router) v nejnovější verzi. A to vše je popsáno v dokumentaci Backbone, lehké sobotní ráno znělo:
documentcloud.github.com/backbone/

Pokud máte rádi tradiční výukové programy, podívejte se na velmi dobře zdokumentovaný kód této aplikace todo napsaný v Backbone:
documentcloud.github.com/backbone/docs/todos.html

Předchozí Článek