Pendant des années, les développeurs ont tiré parti des frameworks PHP tels que CakePHP, CodeIgniter et même les frameworks Ruby basés sur le pattern MVC. Mais si vous y réfléchissez, il n'y a pas eu beaucoup de frameworks JavaScript pour nous aider de la même manière.
Peut-être est-ce parce que le JavaScript est souvent méprisé par les «vrais» programmeurs, mais que les frameworks JavaScript ont toujours pris un peu de retard. Colonne vertébrale cela a changé, et comme vous le verrez dans cette introduction, il utilise le modèle MVC pour séparer le code JavaScript et nous aide à créer des applications structurées. En effet, il fournit le modèle MVC au développement frontal.
Backbone est une bibliothèque JavaScript légère du même créateur que CoffeeScript. Mais ne laissez pas le fait que ce soit une bibliothèque vous amène à le confondre avec jQuery, Backbone est à quelques lieues de jQuery en matière de fonctionnalités. Backbone ne gère pas les éléments DOM, c'est pourquoi de nombreux développeurs l'utilisent main dans la main avec jQuery; Structure d'organisation du backbone et jQuery manipulant le DOM.
Ce que Backbone fait vraiment bien est la structure d'approvisionnement de vos applications JavaScript, et comme il fonctionne avec JSON, il est facile de l'insérer dans presque tous les systèmes de templates de serveurs frontaux.
MVC est synonyme de modèles, vues et collections; et dans Backbone, avec aussi des routeurs.
Dans Backbone, un modèle représente une entité et une entité, par exemple, si nous traitons avec des utilisateurs, chaque utilisateur serait un modèle; c'est comme une ligne dans une base de données.
Pour créer un modèle simple avec Backbone, tapez:
var user = Backbone.Model.extend({});Ce code est techniquement correct, mais ce modèle n’aurait aucune fonctionnalité. Nous avons donc besoin d’ajouter quelque chose pour ce modèle quand il est instancié et pour ce faire, nous utiliserons un code légèrement plus complexe:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, defaults: {name:' John Doe ', age: 30,}}); var user = new User; Dans le code ci-dessus, la fonction initialize sera déclenchée à chaque fois que nous créons une nouvelle instance de ce modèle, après l'initialisation, nous ajoutons des valeurs par défaut au cas où aucune donnée ne serait transmise pour le modèle. Avec cela fait, pour créer une instance du modèle, nous utiliserions du code comme:
var dave = new User({name:'Dave Smith', age:25});Pour récupérer un attribut d'une certaine instance, nous utilisons:
var name = dave.get('name');Et pour changer un attribut, nous utiliserions:
dave.set({age:31});Ce sont les bases de la façon dont les modèles fonctionnent dans Backbone, ils peuvent accomplir beaucoup plus, mais j'espère que vous pouvez déjà voir le potentiel de structuration du code.
Rappelez-vous que j'ai dit qu'un modèle était comme un utilisateur? Eh bien, suivre cette analogie est une collection de tous les utilisateurs que nous avons. Les collections sont essentiellement des ensembles de modèles, et comme nous avons déjà notre modèle d’utilisateur, nous allons créer une collection à partir de là:
var Users = Backbone.Collection.extend({model: User});Actuellement, cette collection est vide, mais il est simple de créer des utilisateurs et de les ajouter à la collection:
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]);Maintenant, si nous console.log himym.models, nous obtiendrons les valeurs de barney, ted et lily.
Les vues sont associées à une partie du DOM, elles sont conçues pour être liées aux modèles qui sont essentiellement les données de l'application et servent à présenter ces données à l'utilisateur final.
Créer une vue est simple:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});C'est la structure de base d'une vue. TagName est l'élément qui sera utilisé pour envelopper la vue, la classe est définie en utilisant className et enfin nous ajoutons une fonction de rendu, bien que dans ce dernier cas la fonction était vide. C'est la fonction de rendu que nous utilisons pour ajouter à la scène, comme ceci:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});L'élément el de la fonction de rendu fait référence au wrapper que nous avons créé et en utilisant la fonction innerHTML, nous avons placé l'âge de l'utilisateur dans le div.
Cet exemple n'a pas utilisé de système de templates, mais si vous le souhaitez, vous pouvez tirer parti de Underscore.js fourni avec Backbone.
Nous pouvons également écouter les événements en joignant un écouteur d'événement à notre vue et dans cet exemple, nous allons créer un simple écouteur de clics pour notre div (ce code va immédiatement après notre fonction de rendu):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Les routeurs Backbone sont utilisés pour router les URL dans l'application lors de l'utilisation de hashtags (#). Pour définir un routeur, vous devez toujours ajouter au moins une route et au moins une fonction qui sera exécutée lorsque l’URL souhaitée sera atteinte, comme ceci:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();C'est un routeur extrêmement simple qui exécutera une action lorsque le hachage d'utilisateur / # est atteint. L'appel de la méthode Backbone.history.start () demande à Backbone de surveiller les hashtags afin que les différents états du site puissent être mis en signet et puissent être parcourus avec le navigateur.
Cet article couvre uniquement les bases de Backbone, qui peuvent être utilisées pour créer des applications structurées en JavaScript. Je vous conseille de consulter le système de template à utiliser avec Backbone pour voir le potentiel de cette bibliothèque. J'espère que ces brèves introductions vous ont montré à quel point MVC peut être utile sur le front-end.
Avez-vous créé des applications avec Backbone? Quels types d'applications souhaitez-vous créer? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image d'échafaudage via Shutterstock.