Získejte Cracking s páteří

Již řadu let vývojáři využívají framework PHP, jako je CakePHP, CodeIgniter a dokonce i Rubyové rámce založené na modelu MVC. Ale pokud o tom přemýšlíte, nebylo mnoho rámců jazyka JavaScript, které by nám pomohly stejným způsobem.

Možná je to proto, že JavaScript je často zaměřen na "skutečné" programátory, ale struktury JavaScriptu vždy zaostávaly trochu za sebou. Páteř to změnilo a jak uvidíte v tomto úvodu, použije vzor MVC k oddělení kódu JavaScript a pomůže nám vytvářet strukturované aplikace. Ve skutečnosti přináší model MVC přední vývoj.

Co je páteř?

Páteř je lehká knihovna jazyka JavaScript od stejného tvůrce jako CoffeeScript. Ale nenechte si fakt, že je to knihovna, která vás přiměje zmást s jQuery, Backbone je od jQuery, pokud jde o funkčnost. Páteř nezpracovává prvky DOM, což je důvod, proč mnoho vývojářů ji používá ruku v ruce s jQuery; Organizační struktura páteře a jQuery manipulující s DOM.

Co Backbone opravdu dobře dodává strukturu vašich aplikací JavaScriptu a protože pracuje s JSON, je snadné jej vložit do téměř jakéhokoli templárového systému.

Vzor MVC v Backbone

MVC označuje modely, pohledy a sbírky; a v Backbone, s routery.

Modely

V modelu Backbone model reprezentuje entitu, takže pokud například jednáme s uživateli, každý uživatel by byl model; je to jako řada v databázi.

Chcete-li vytvořit jednoduchý model pomocí Backbone, zadejte:

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

Tento kód je technicky správný, ale model by neměl žádnou funkčnost, takže musíme přidat něco, co by tento model mělo dělat, když je konkretizován, a k tomu bychom použili trochu složitější kód:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ');}, výchozí: {name:' John Doe ', věk: 30,}}); var user = new User; 

Ve výše uvedeném kódu bude funkce inicializace spuštěna vždy, když vytvoříme novou instanci tohoto modelu, po inicializaci vše, co jsme udělali, je přidání některých výchozích hodnot v případě, že pro model není předána žádná data. Tímto provedením, abychom vytvořili instanci modelu, použijeme kód jako:

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

Chcete-li načíst atribut určité instance, použijeme:

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

A změnit atribut, který bychom použili:

dave.set({age:31});

To jsou základy toho, jak Modely pracují v Backbone, je toho mnohem víc, než je možné, ale doufejme, že už existuje potenciál pro strukturování kódu.

Sbírky

Pamatujte, že jsem říkal, že model byl jako uživatel? Po této analogii je kolekce všichni uživatelé, kteří máme. Sbírky jsou v podstatě soubory modelů a od té doby, co již máme náš uživatelský model, vytvoříme kolekci odtud:

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

V současné době je tato kolekce prázdná, ale je snadné vytvořit některé uživatele a přidat je do kolekce:

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]);

Teď, když my console.log himymmodels dostaneme hodnoty od barney, ted a lily.

Zobrazení

Pohledy jsou spojeny s částí DOM, jsou navrženy tak, aby byly svázány s modely, které jsou v podstatě daty aplikace a slouží k prezentaci těchto dat konečnému uživateli.

Vytváření zobrazení je jednoduché:

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

Toto je základní struktura pohledu. TagName je prvek, který se použije k zabalení pohledu, třída je nastavena pomocí className a nakonec přidáme funkci vykreslení, ačkoli v tomto posledním případě byla funkce prázdná. Je to funkce vykreslování, kterou používáme k přidání do scény, například:

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

Prvek el ve funkci renderu odkazuje na obal, který jsme vytvořili, a pomocí funkce innerHTML jsme umístili věk uživatele do div.

Tento příklad nepoužívá žádný templovací systém, ale pokud chcete, můžete využít Underscore.js, který je dodáván s Backbone.

Můžeme také poslouchat události připojením posluchače události do našeho pohledu a v tomto příkladu vytvoříme pro posluchače jednoduchého kliknutí (tento kód jde ihned po vykreslení funkce):

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

Routery

Páteřní směrovače se používají pro směrování adres URL v aplikaci při použití hashtags (#). Chcete-li definovat směrovač, měli byste vždy přidat alespoň jednu trasu a alespoň funkci, která se spustí po dosažení požadované adresy URL, například takto:

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

Jedná se o velmi jednoduchý směrovač, který provede akci při dosažení / # uživatele hash. Zpět nahoru Dejte nám zpětnou vazbu Další informace Zpět nahoru Dejte nám zpětnou vazbu Další informace Zpět nahoru Dejte nám zpětnou vazbu Další informace Zpět nahoru | Dejte nám zpětnou vazbu Další informace Backbone.history.start () volání metody žádá Backbone ke sledování hashtags tak, aby různé stavy webu jsou bookmarkable a lze navigovat pomocí prohlížeče.

Závěr

Tento článek se zabývá pouze základy páteře, které lze použít k vytváření strukturovaných aplikací v jazyce JavaScript. Doporučuji vám, abyste si prohlédli templovací systém pro použití ve spojení s Backbone, abyste viděli plný potenciál této knihovny. Doufám, že tato stručná představení vám ukázala, jak užitečná MVC může být na frontě.

Vytvořili jste aplikace s Backbone? Jaké typy aplikací byste chtěli stavět? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, obraz lešení přes Shutterstock.