Share
Contrairement à ses homologues du développement Web, JavaScript n'a jamais vraiment eu beaucoup de structures pour fournir une structure. Heureusement, ces dernières années, cela commence à changer.
Aujourd'hui, j'aimerais vous présenter Backbone.JS, une jolie petite bibliothèque qui simplifie grandement le processus de création d'applications complexes, interactives et basées sur les données. Il fournit un moyen propre de séparer chirurgicalement vos données de votre présentation..
Créée par Jeremy Ashkenas, le ninja JS qui a conçu CoffeeScript, Backbone est une bibliothèque très légère qui vous permet de créer des frontaux faciles à gérer. Il est autonome en arrière-plan et fonctionne bien avec toutes les bibliothèques JavaScript modernes que vous utilisez déjà..
Backbone est une collection d’objets cohérents pesant à l’ombre à l’ombre. 4 Ko, Cela donne une structure à votre code et vous aide fondamentalement à créer une application MVC appropriée dans le navigateur. Le site officiel décrit son objectif comme suit:
Backbone fournit une structure aux applications JavaScript lourdes en fournissant aux modèles des événements personnalisés et des liaisons personnalisées, des collections avec une API riche en fonctions énumérables, des vues avec gestion des événements déclaratifs et en connectant le tout à votre application existante via une interface JEST RESTful.
Regardons les choses en face: il est un peu difficile d'analyser et de comprendre ce qui précède. Alors allons-y et déconstruisons un peu le jargon, avec l'aide de Jeremy.
Lorsque le contenu ou l'état d'un modèle est modifié, les autres objets abonnés au modèle sont notifiés afin qu'ils puissent procéder en conséquence. Ici, les vues écoutent les modifications apportées au modèle et se mettent à jour en conséquence, au lieu que le modèle ne les traite manuellement..
Backbone est livré avec un certain nombre de fonctions très utiles pour manipuler et utiliser vos données. Contrairement aux autres implémentations, les tableaux en JavaScript sont assez stérilisés, ce qui est vraiment un problème qui empêche de traiter des données..
Vos jours d'écriture des appels de spaghettis sont terminés. Vous pouvez déclarer par programme quel rappel doit être associé à des éléments spécifiques.
Même si la méthode par défaut consiste à utiliser un appel AJAX standard lorsque vous souhaitez parler au serveur, vous pouvez facilement le remplacer par tout ce dont vous avez besoin. Un certain nombre d'adaptateurs sont apparus couvrant la plupart des favoris, y compris Websockets et le stockage local..
Pour le décomposer en termes encore plus simples:
Backbone fournit un moyen propre de séparer chirurgicalement vos données de votre présentation. Le modèle qui fonctionne avec les données ne concerne que la synchronisation avec un serveur, tandis que la fonction principale de la vue est d'écouter les modifications apportées au modèle souscrit et de rendre le code HTML..
Je suppose que vous êtes probablement un peu dérouté à ce stade, alors clarifions quelques points:
Non, ils sont assez complémentaires dans leurs domaines d'application avec presque aucun chevauchement dans la fonctionnalité. Backbone gère toutes les abstractions de niveau supérieur, tandis que jQuery - ou des bibliothèques similaires - fonctionne avec le DOM, normalise les événements, etc..
Leurs champs d'application et leurs cas d'utilisation sont très différents et parce que vous connaissez l'un ne signifie pas que vous ne devriez pas apprendre l'autre. En tant que développeur JavaScript, vous devez savoir travailler efficacement avec les deux.
Parce que le plus souvent, le code frontal se transforme en une pile de callbacks imbriqués, de manipulations DOM, et de HTML pour la présentation parmi d’autres actes indescriptibles..
Backbone offre une manière nettement propre et élégante de gérer ce chaos.
Backbone est parfaitement adapté à la création d'applications front-end lourdes basées sur les données. Pensez à l'interface de GMail, au nouveau Twitter ou à toute autre révélation de ces dernières années. Cela rend la création complexe applications Plus facile.
Alors que vous pouvez le faire pour le Web plus grand public des pages, c'est vraiment une bibliothèque adaptée aux applications web.
Oui et non.
Oui, car, à l'instar des frameworks susmentionnés, il est principalement destiné à la création de frontaux complexes pour les applications Web..
Il est différent en ce que Backbone est assez maigre, et est livré avec aucun des widgets que les autres livrent avec.
Backbone est incroyablement léger, moins de 4kb.
Il y a aussi le fait que Cappuccino vous oblige à écrire votre code dans Objective-J, tandis que les vues de Sproutcore doivent être déclarées par programme dans JS. Bien qu'aucune de ces approches ne soit fausse, avec Backbone, le code JavaScript normal est exploité par votre langage HTML et CSS classique pour vous aider à accomplir vos tâches, pour une courbe d'apprentissage plus douce..
Absolument. Non seulement votre type d'accès habituel au DOM, type d'emballage AJAX, mais également le reste de votre type de modélisation et de chargement de script. Il est très très couplé, ce qui signifie que vous pouvez utiliser presque tous vos outils avec Backbone..
Non désolé. Mais voici quelque chose pour vous remonter le moral.
Ok, maintenant avec ça, plongons dans!
Le MVC dans Backbone était à l’origine pour Modèles, Vues et Collections, puisqu’il n’y avait aucun contrôleur dans la structure. Cela a depuis changé.
Le noyau de Backbone est constitué de quatre classes principales:
Puisque nous sommes un peu pressés par le temps, jetons un coup d’œil aux classes principales aujourd’hui. Nous allons faire un suivi avec une application très simple pour démontrer les concepts enseignés ici, car il serait trop compliqué de tout mettre dans un seul article et d'attendre du lecteur qu'il analyse tout..
Gardez les yeux ouverts au cours des deux prochaines semaines!
Les modèles peuvent signifier différentes choses dans différentes implémentations de MVC. Dans Backbone, un modèle représente une entité singulière - un enregistrement dans une base de données si vous voulez. Mais il n'y a pas de règles strictes ici. Sur le site Web de Backbone:
Les modèles sont au cœur de toute application JavaScript, contenant les données interactives ainsi qu'une grande partie de la logique qui les entoure: conversions, validations, propriétés calculées et contrôle d'accès..
Le modèle vous donne simplement un moyen de lire et d'écrire des propriétés ou des attributs arbitraires sur un ensemble de données. Dans cette optique, la doublure unique ci-dessous est complètement fonctionnelle:
var Game = Backbone.Model.extend ();
Construisons un peu cela.
Accentsconagua
var Game = Backbone.Model.extend (initialize: function () alert ("Oh hey!");, par défaut: name: 'Titre par défaut', releaseDate: 2011,; initialiser sera déclenché lorsqu'un objet est instancié. Ici, je ne fais qu'attirer l'attention sur des inanités - dans votre application, vous devriez probablement initialiser vos données ou effectuer d'autres tâches de maintenance. Je définis également un ensemble de valeurs par défaut, au cas où aucune donnée ne serait transmise.
Voyons comment lire et écrire des attributs. Mais d'abord, créons une nouvelle instance.
// Créer un nouveau jeu var portal = new Game (name: "Portal 2", releaseDate: 2011); // release contiendra la valeur releaseDate - 2011 ici var release = portal.get ('releaseDate'); // Change l'attribut name portal.set (name: "Portal 2 by Valve"); Si vous avez remarqué les mutateurs get / set, créez un cookie! Les attributs d'un modèle ne peuvent pas être lus par le biais de votre format typique object.attribute. Vous devrez passer par le getter / setter car il y a moins de chance que vous changiez des données par erreur.
À ce stade, tous les changements sont uniquement conservés en mémoire. Rendons ces modifications permanentes en parlant au serveur.
portal.save ();
C'est tout. Vous attendiez-vous plus? Le one-liner ci-dessus va maintenant envoyer une demande à votre serveur. N'oubliez pas que le type de demande changera de manière intelligente. Puisqu'il s'agit d'un nouvel objet, le POST sera utilisé. Sinon, PUT est utilisé.
Il y a beaucoup plus de fonctionnalités, les modèles Backbone vous en donnent par défaut, mais cela devrait certainement vous aider à démarrer. Hit la documentation pour plus d'informations.
Les collections de Backbone sont essentiellement une collection de modèles. En reprenant notre analogie avec la base de données, les collections sont les résultats d’une requête où les résultats consistent en un certain nombre d’enregistrements [modèles]. Vous pouvez définir une collection comme suit:
var GamesCollection = Backbone.Collection.extend (model: Game,);
La première chose à noter est que nous définissons le modèle dont il s’agit. En développant notre exemple plus tôt, je fais de cette collection une collection de jeux.
Vous pouvez maintenant jouer avec vos données dans le contenu de votre cœur. Par exemple, étendons la collection pour ajouter une méthode qui renvoie uniquement des jeux spécifiques.
var GamesCollection = Backbone.Collection.extend (model: Game, old: function () return this.filter (function (game) return game.get ('releaseDate') < 2009; ); ); C'était facile, n'est-ce pas? Nous vérifions simplement si un jeu est sorti avant 2009 et si oui, le rendons..
Vous pouvez également manipuler directement le contenu d'une collection de la manière suivante:
var games = new GamesCollection games.get (0);
L'extrait ci-dessus instancie une nouvelle collection, puis récupère le modèle avec un ID égal à 0. Vous pouvez trouver un élément à une position spécifique en référençant l'index au à méthode comme suit: jeux.at (0);
Et enfin, vous pouvez remplir dynamiquement votre collection de la manière suivante:
var GamesCollection = Backbone.Collection.extend (model: Game, url: '/ games'); var games = new GamesCollection games.fetch ();
Nous ne faisons que laisser à Backbone où obtenir les données à travers le url propriété. Ceci fait, nous créons simplement un nouvel objet et appelons le aller chercher méthode qui déclenche un appel asynchrone au serveur et remplit la collection avec les résultats.
Cela devrait couvrir les bases des collections avec Backbone. Comme je l'ai mentionné, il y a des tonnes de bonnes choses ici avec Backbone qui aliasise de nombreux utilitaires astucieux de la bibliothèque Underscore. Une lecture rapide de la documentation officielle devrait vous aider à démarrer.
Les vues dans Backbone peuvent être légèrement déroutantes au premier abord. Pour les puristes du MVC, ils ressemblent à un contrôleur plutôt qu’à une vue elle-même..
Une vue gère deux tâches fondamentalement:
Allons-y et créons une vue très simple.
GameView = Backbone.View.extend (tagName: "div", className: "game", render: function () // code permettant de rendre le code HTML de la vue);
Assez simple si vous avez suivi ce tutoriel jusqu'à présent. Je spécifie simplement quel élément HTML doit être utilisé pour envelopper la vue à travers le tagName attribut ainsi que l'identifiant pour cela à travers nom du cours.
Passons à la partie de rendu.
render: function () this.el.innerHTML = this.model.get ('name'); // Ou la méthode jQuery $ (this.el) .html (this.model.get ('name')); el fait référence à l'élément DOM référencé par la vue. Nous accédons simplement au nom du jeu sur l'élément innerHTML propriété. Pour le dire simplement, le div L'élément contient maintenant le nom de notre jeu. De toute évidence, la méthode jQuery est plus simple si vous avez déjà utilisé la bibliothèque.
Avec des mises en page plus compliquées, gérer HTML dans JavaScript est non seulement fastidieux, mais aussi imprudent. Dans ces scénarios, la création de modèles est la voie à suivre.
Backbone est livré avec une solution de gabarit minimale, offerte par Underscore.JS, mais nous vous invitons à utiliser l'une des excellentes solutions de gabarit disponibles..
Pour finir, voyons comment les vues écoutent les événements. Les événements DOM en premier.
events: 'click .name': 'handleClick', handleClick: function () alert ('Au nom de la science? votre monstre'); // Autres actions nécessaires Devrait être assez simple si vous avez déjà travaillé avec des événements. Nous définissons et relions essentiellement événements à travers l'objet d'événements. Comme vous pouvez le voir ci-dessus, la première partie fait référence à l'événement, la suivante spécifie les éléments déclencheurs, tandis que la dernière partie fait référence à la fonction à déclencher..
Et maintenant sur la liaison aux modèles et aux collections. Je vais couvrir la liaison aux modèles ici.
GameView = Backbone.View.extend (initialize: function (args) _.bindAll (this, 'changeName'); this.model.bind ('change: nom', this.changeName);,); La première chose à noter est la façon dont nous plaçons le code de liaison dans le initialiser les fonctions. Naturellement, il est préférable de le faire dès le départ.
bindAll est un utilitaire fourni par Underscore qui persiste dans la valeur d'une fonction ce valeur. Ceci est particulièrement utile puisque nous passons un tas de fonctions et que les fonctions spécifiées en tant que rappels ont cette valeur effacée..
Maintenant, chaque fois qu'un modèle prénom attribut est changé, le changer de nom la fonction est appelée. Vous pouvez également utiliser le ajouter et retirer verbes à interroger pour des changements.
Ecouter les modifications d'une collection est aussi simple que de remplacer modèle avec collection tout en liant le gestionnaire au rappel.
Les contrôleurs de Backbone vous permettent essentiellement de créer des applications avec des signets et des états avec l'aide de hashbangs..
var Hashbangs = Backbone.Controller.extend (routes: "! /": "root", "! / games": "jeux",, root: function () // Prépare la page d'accueil et rend le rendu , jeux: function () // Re-rendre les vues pour afficher une collection de livres,);
Ceci est très familier au routage dans les infrastructures MVC traditionnelles côté serveur. Par exemple, !/Jeux va mapper à la Jeux fonctionner alors que l'URL dans le navigateur lui-même sera domaine / #! / jeux.
Grâce à une utilisation intelligente de hashbangs, vous pouvez créer des applications fortement basées sur JS mais pouvant également être associées à des favoris..
Si vous craignez de casser le bouton du dos, Backbone vous couvre aussi.
// Initie le contrôleur de la manière suivante var ApplicationController = new Controller; Backbone.history.start ();
Avec l'extrait de code ci-dessus, Backbone peut surveiller vos hashbangs et, conjointement avec les itinéraires que vous avez spécifiés précédemment, rendre votre application compatible avec des favoris..
Dans l’ensemble, voici quelques leçons que j’ai tirées de la manière dont Backbone crée les applications:
Il suffit de dire que Backbone a provoqué un changement de paradigme dans la façon dont les frontaux doivent être construits, du moins pour moi. Vu la portée très large de l'article d'aujourd'hui, je suis sûr que vous avez une tonne de questions. Cliquez sur la section des commentaires ci-dessous pour en parler. Merci beaucoup de votre lecture et attendez-vous à de nombreux autres tutoriels sur Backbone dans le futur.!
