Jarenlang hebben ontwikkelaars gebruik gemaakt van PHP-frameworks zoals CakePHP, CodeIgniter en zelfs Ruby-frameworks op basis van het MVC-patroon. Maar als je erover nadenkt, zijn er niet veel JavaScript-frameworks geweest om ons op dezelfde manier te helpen.
Misschien komt het doordat JavaScript vaak wordt neergekeken door 'echte' programmeurs, maar JavaScript-frameworks zijn altijd een beetje achtergebleven. ruggegraat veranderde dat, en zoals je zult zien in deze inleiding, gebruikt het het MVC-patroon om JavaScript-code te scheiden en ons te helpen bij het maken van gestructureerde applicaties. In feite levert het het MVC-patroon aan de front-end ontwikkeling.
Backbone is een lichtgewicht JavaScript-bibliotheek van dezelfde maker als CoffeeScript. Maar laat het feit dat het een bibliotheek is, je niet in verwarring brengen met jQuery, Backbone ligt ver weg van jQuery als het gaat om functionaliteit. Backbone verwerkt geen DOM-elementen, daarom gebruiken veel ontwikkelaars het hand in hand met jQuery; Backbone organiserende structuur en jQuery manipuleren de DOM.
Wat Backbone echt goed doet, is de aanbodstructuur van uw JavaScript-applicaties, en omdat het met JSON werkt, is het eenvoudig om in bijna elk front-end sjablatorsysteem in te voegen.
MVC staat voor Models, Views en Collections; en in Backbone, met ook Routers.
In Backbone vertegenwoordigt een model een entiteit, dus bijvoorbeeld, als we te maken hebben met gebruikers, zou elke gebruiker een Model zijn; het is net een rij in een database.
Om een eenvoudig model te maken met Backbone typen we:
var user = Backbone.Model.extend({});Die code is technisch correct, maar dat model zou geen functionaliteit hebben, dus we moeten iets toevoegen voor dit model om te doen wanneer het wordt geïnstantieerd en om dat te doen, zouden we iets complexere code gebruiken:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, standaardinstellingen: {name:' John Doe ', leeftijd: 30,}}); var user = new User; In de bovenstaande code wordt de initialize-functie elke keer geactiveerd wanneer we een nieuw exemplaar van dit model maken, nadat we alles hebben geïnitialiseerd, voegen we enkele standaardwaarden toe als er geen gegevens worden doorgegeven voor het model. Als dat is gebeurd, maken we een exemplaar van het model dat we zouden gebruiken als:
var dave = new User({name:'Dave Smith', age:25});Om een attribuut van een bepaald exemplaar op te halen, gebruiken we:
var name = dave.get('name');En om een kenmerk te veranderen dat we zouden gebruiken:
dave.set({age:31});Dit is de basis van hoe modellen werken in Backbone, er is veel meer wat ze kunnen bereiken, maar hopelijk zie je al het potentieel om code te structureren.
Weet je nog dat ik zei dat een model als een gebruiker was? Nou, na die analogie is een verzameling alle gebruikers die we hebben. Collecties zijn in essentie sets van modellen, en aangezien we al ons gebruikersmodel hebben, zullen we daar een verzameling van bouwen:
var Users = Backbone.Collection.extend({model: User});Momenteel is deze verzameling leeg, maar het is eenvoudig om een aantal gebruikers te maken en deze aan de verzameling toe te voegen:
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]);Als we console.log himym.models gebruiken, krijgen we de waarden van barney, ted en lily.
Aanzichten zijn gekoppeld aan een deel van de DOM, ze zijn ontworpen om te worden gekoppeld aan de modellen die in wezen de gegevens van de toepassing zijn en dienen om deze gegevens aan de eindgebruiker te presenteren.
Een weergave maken is eenvoudig:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Dit is de basisstructuur van een weergave. De tagName is het element dat zal worden gebruikt om de weergave in te pakken, de klasse wordt ingesteld met behulp van de className en als laatste voegen we een renderfunctie toe, hoewel in dit laatste geval de functie leeg was. Het is de renderfunctie die we gebruiken om aan het podium toe te voegen, zoals zo:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});Het el-element in de renderfunctie verwijst naar de wrapper die we hebben gemaakt en met de innerHTML-functie hebben we de leeftijd van de gebruiker in de div geplaatst.
In dit voorbeeld is geen sjabloonsysteem gebruikt, maar als u wilt, kunt u profiteren van Underscore.js dat wordt geleverd met Backbone.
We kunnen ook naar evenementen luisteren door een gebeurtenislistener aan onze weergave te koppelen en in dit voorbeeld maken we een eenvoudige kliklistener voor onze div (deze code gaat onmiddellijk na onze renderfunctie):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Backbone-routers worden gebruikt voor het routeren van de URL's in de toepassing bij het gebruik van hashtags (#). Als u een router wilt definiëren, moet u altijd ten minste één route toevoegen en ten minste een functie die wordt uitgevoerd wanneer de gewenste URL wordt bereikt, zoals:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Dit is een uiterst eenvoudige router die een actie zal uitvoeren wanneer de hash is bereikt. De methodeaanroep Backbone.history.start () vraagt Backbone om de hashtags te controleren, zodat de verschillende toestanden van de site leesbaar zijn en kunnen worden genavigeerd met de browser.
Dit artikel behandelt alleen de basisprincipes van Backbone, die kunnen worden gebruikt om gestructureerde applicaties in JavaScript te bouwen. Ik raad je aan om het template-systeem te gebruiken voor gebruik in combinatie met Backbone om het volledige potentieel van deze bibliotheek te zien. Ik hoop dat deze korte introducties u hebben laten zien hoe nuttig MVC aan de voorkant kan zijn.
Heb je applicaties gebouwd met Backbone? Welke soorten applicatie zou je willen bouwen? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, steiger afbeelding via Shutterstock.