Embarquez pour un voyage Backbone.js

Contrairement à ses homologues du développement web, JavaScript n'a jamais vraiment fourni de structure sous la forme d'un framework. Heureusement, ces dernières années, cela a commencé à changer.

Aujourd'hui, j'aimerais vous présenter Backbone.JS, une jolie petite bibliothèque qui facilite 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 les données de la présentation.

---

Présentation de Backbone.JS

Créée par Jeremy Ashkenas, le ninja JS qui a construit CoffeeScript, Backbone est une bibliothèque ultra-légère qui vous permet de créer des interfaces faciles à entretenir. Il est indépendant du backend et fonctionne bien avec n'importe quelle bibliothèque JavaScript moderne que vous utilisez déjà.

Backbone est une collection d'objets cohérents, pesant moins de 4 Ko, qui structure votre code et vous aide essentiellement à créer des applications MVC appropriées dans le navigateur. Le site officiel décrit son objectif comme ceci :

Backbone fournit une structure pour les applications gourmandes en JavaScript en fournissant des modèles avec des liaisons clé-valeur et des événements personnalisés, une collection avec une riche API de fonctions énumérables, des vues avec gestion déclarative des événements et connecte le tout à votre application existante.

Soyons réalistes : ce qui précède est un peu difficile à analyser et à comprendre. Continuons donc à déconstruire le jargon avec l’aide de Jérémie.

Liaison de valeurs clés et événements personnalisés

Lorsque le contenu ou l'état d'un modèle change, les autres objets abonnés au modèle sont avertis afin qu'ils puissent le gérer en conséquence. Ici, la vue écoute les modifications apportées au modèle et se met à jour en conséquence, au lieu que le modèle doive gérer la vue manuellement.

API riche en fonctions énumérables

Backbone est livré avec de nombreuses fonctions très utiles pour traiter et travailler avec vos données. Contrairement à d’autres implémentations, les tableaux en JavaScript sont assez neutres, ce qui peut vraiment constituer un obstacle lorsque vous devez gérer des données.

Vues avec gestion déclarative des événements

L’époque où vous rédigiez des appels de liaison spaghetti est révolue. Vous pouvez déclarer par programme quel rappel doit être associé à un élément spécifique.

Interface JSON RESTful

Bien que la méthode par défaut consiste à utiliser des appels AJAX standard lorsque vous souhaitez communiquer avec le serveur, vous pouvez facilement basculer cela selon vos besoins. De nombreux adaptateurs ont vu le jour, couvrant la plupart des plus populaires, notamment les Websockets et le stockage local.

Décomposez-le en termes plus simples :

Backbone fournit un moyen propre de séparer les données de la présentation. Le modèle qui gère les données se préoccupe uniquement de la synchronisation avec le serveur, tandis que la principale responsabilité de la vue est d'écouter les modifications apportées au modèle abonné et de restituer le HTML.

---

FAQ rapide

Je suppose que vous êtes peut-être un peu confus en ce moment, alors clarifions quelques points :

Est-ce que cela remplacera jQuery ?

Non. Leurs domaines d'application sont très complémentaires, avec peu de chevauchement dans les fonctionnalités. Backbone gère toutes les abstractions de niveau supérieur, tandis que jQuery (ou une bibliothèque similaire) gère le DOM, les événements normalisés, etc.

Leur portée et leurs cas d'utilisation sont très différents, et ce n'est pas parce que vous connaissez l'un que vous ne devriez pas apprendre l'autre. En tant que développeur JavaScript, vous devez savoir comment utiliser les deux efficacement.

Pourquoi devrais-je l'utiliser ?

Parce que souvent, le code frontal devient un fouillis de rappels imbriqués, de manipulations DOM, de HTML pour les présentations et d'autres comportements indescriptibles.

Backbone offre une manière très propre et élégante de gérer ce chaos.

Où dois-je l'utiliser ?

Backbone est idéal pour créer des applications frontales lourdes et basées sur les données. Pensez à l'interface GMail, au nouveau Twitter ou à toute autre révélation de ces dernières années. Cela facilite la création d’applications complexes.

Bien que vous puissiez intégrer cela dans des pages Web plus grand public, il s'agit en fait d'une bibliothèque conçue sur mesure pour les applications Web.

Est-ce similaire au cappuccino ou au sproutcore ?

Oui et non.

Oui, car comme les frameworks mentionnés ci-dessus, celui-ci est principalement utilisé pour créer des frontaux complexes pour les applications Web.

Ce qui le rend différent, c'est que Backbone est très simple et n'est pas livré avec des widgets supplémentaires.

Backbone est très léger, moins de 4 Ko.

Il y a aussi le fait que Cappuccino vous oblige à coder en Objective-J, alors que les vues de Sproutcore doivent être déclarées par programme en JS. Bien qu'il n'y ait rien de mal avec aucune de ces approches, avec Backbone, le JavaScript simple peut faire le travail avec le HTML et le CSS courants, permettant une courbe d'apprentissage plus douce.

Je peux toujours utiliser d'autres bibliothèques sur la page, n'est-ce pas ?

Absolument. Non seulement l'accès DOM typique, les types d'encapsulation AJAX, mais également le reste des types de chargement de modèles et de scripts. Il est très, très faiblement couplé, ce qui signifie que vous pouvez utiliser presque n'importe quel outil avec Backbone.

Est-ce que cela apportera la paix dans le monde ?

Non, désolé. Mais voici de quoi vous remonter le moral.

D’accord, laissons cette question de côté maintenant et commençons !

---

En savoir plus sur Backbone's Backbone

MVC dans Backbone signifiait à l'origine Modèles, Vues et Collections car il n'y avait aucun contrôleur dans le framework. Les choses ont changé depuis.

Le noyau de Backbone se compose de quatre classes principales :

• Modèle
• Collection
• Voir
• Contrôleur

Comme nous sommes un peu pressés par le temps, nous nous pencherons aujourd'hui uniquement sur les cours de base. Nous allons poursuivre avec une application très simple pour démontrer les concepts enseignés ici, car tout mettre dans un seul article et attendre des lecteurs qu'ils les analysent serait trop.

Veuillez rester vigilants dans les semaines à venir !

---

Modèle

Le modèle peut avoir des significations différentes dans différentes implémentations MVC. Dans Backbone, un modèle représente une entité unique – un enregistrement dans une base de données, si vous préférez. Mais il n’y a pas de règles strictes ici. Depuis le site Backbone :

Le modèle est au cœur de toute application JavaScript, contenant des données interactives et la plupart de la logique qui les entoure : transformations, 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 propriétés arbitraires sur un ensemble de données. Dans cette optique, la seule ligne de code suivante est tout à fait utilisable :

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

Construisons sur cela.

var Game = Backbone.Model.extend({
        initialize: function(){
            alert("Oh hey! ");
        },
		  defaults: {
            name: 'Default title',
            releaseDate: 2011,
        }
    });

initialize sera déclenché lorsque l'objet est instancié. Ici, j'attire simplement l'attention sur un comportement stupide - vous devriez probablement amorcer les données ou effectuer d'autres tâches ménagères dans votre application. J'ai également défini un tas de valeurs par défaut au cas où aucune donnée ne serait transmise.

Voyons comment lire et écrire des propriétés. Mais d’abord, créons une nouvelle instance.

// Create a new game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});

// release will hold the releaseDate value -- 2011 here
var release = portal.get('releaseDate');

// Changes the name attribute
portal.set({ name: "Portal 2 by Valve"});

Si vous remarquez des mutateurs get/set, mangez un cookie ! Les attributs du modèle ne peuvent pas être lus via le format object.attribute typique. Vous devez implémenter des getters/setters car le risque de modifier les données par erreur est faible.

À ce stade, tous les changements restent uniquement en mémoire. Rendons ces modifications permanentes en discutant avec le serveur.

portal.save();

C'est tout. En attendez-vous plus ? La ligne de code ci-dessus enverra désormais une requête à votre serveur. Gardez à l’esprit que le type de demande change intelligemment. Puisqu'il s'agit d'un nouvel objet, POST sera utilisé. Sinon, utilisez PUT.

Le modèle Backbone est livré avec plus de fonctionnalités par défaut, mais cela devrait certainement vous aider à démarrer. Cliquez sur la documentation pour plus d'informations.

---

Collection

Les collections dans Backbone ne sont essentiellement que des collections de modèles. Comme dans l’analogie précédente avec la base de données, une collection est le résultat d’une requête, dont le résultat est constitué de nombreux enregistrements [modèles]. Vous pouvez définir une collection comme ceci :

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  }
});

La première chose à noter est que nous définissons de quelle collection de modèles il s'agit. En développant notre exemple précédent, j'ai fait de cette collection une collection de jeux.

Vous pouvez désormais continuer à utiliser vos données comme vous le souhaitez. Par exemple, étendons cette collection pour ajouter une méthode qui renvoie uniquement un jeu spécifique.

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  old : function() {
    return this.filter(function(game) { 
      return game.get('releaseDate') < 2009; 
    });
  }
  }
});

C'est facile, n'est-ce pas ? Nous vérifions uniquement si le jeu est sorti avant 2009, et si c'est le cas, nous renvoyons le jeu.

Vous pouvez également manipuler directement le contenu de la collection, comme indiqué ci-dessous :

var games = new GamesCollection
games.get(0);

L'extrait de code ci-dessus instancie une nouvelle collection, puis récupère le modèle avec l'ID 0. Vous pouvez trouver un élément à une position spécifique en référençant l'index de la méthode at comme ceci : game.at(0); Enfin, vous pouvez remplir dynamiquement votre collection comme ceci :

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  url: '/games'
  }
});

var games = new GamesCollection
games.fetch();

Nous laissons simplement Backbone obtenir les données où qu'elles se trouvent via l'attribut

url

. Une fois cela fait, nous créons simplement un nouvel objet et appelons la méthode fetch, qui déclenche un appel asynchrone au serveur et remplit la collection avec les résultats. Cela devrait couvrir les bases des collections Backbone. Comme je l'ai mentionné, il y a une tonne de bonnes choses ici, avec Backbone alias de nombreux utilitaires astucieux de la bibliothèque Underscore. Une lecture rapide de la documentation officielle devrait vous aider à démarrer.

Voir

---

Les vues dans Backbone peuvent être un peu déroutantes à première vue. Pour les puristes MVC, ils ressemblent à des contrôleurs plutôt qu'à des vues elles-mêmes.

Les vues assument fondamentalement deux responsabilités :

Écoutez les événements organisés par DOM et les modèles/collections.

• Affichez l'état et le modèle de données de l'application aux utilisateurs.
Allons-y et créons une vue très simple.

GameView= Backbone.View.extend({
  tagName : "div",
  className: "game",
  render : function() {
    // code for rendering the HTML for the view
  }
});

Si vous avez suivi ce tutoriel jusqu'à présent, c'est assez simple. Je précise simplement quel élément HTML doit être utilisé pour envelopper la vue via l'attribut

tagName

, et son ID via className.

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

el 指的是视图引用的 DOM 元素。我们只是通过元素的 innerHTML 属性访问游戏的名称。简而言之，div 元素现在包含我们游戏的名称。显然，如果您以前使用过该库，则 jQuery 方式会更简单。

对于更复杂的布局，在 JavaScript 中处理 HTML 不仅乏味而且鲁莽。在这些情况下，模板是可行的方法。

Backbone 附带了由 Underscore.JS 提供的最小模板解决方案，但我们非常欢迎您使用任何可用的优秀模板解决方案。

最后我们看一下视图是如何监听事件的。首先是 DOM 事件。

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

如果您以前处理过事件，那么应该很简单。我们基本上是通过事件对象定义和连接事件。正如您在上面看到的，第一部分指的是事件，下一部分指定触发元素，最后一部分指应触发的函数。

现在绑定到模型和集合。我将在这里介绍模型的绑定。

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

首先要注意的是我们如何将绑定代码放置在初始化函数中。当然，最好从一开始就这样做。

bindAll 是 Underscore 提供的一个实用程序，用于保存函数的 this 值。这特别有用，因为我们传递了一堆函数，并且指定为回调的函数已删除该值。

现在，只要模型的 name 属性发生更改，就会调用 changeName 函数。您还可以使用添加和删除动词来轮询更改。

侦听集合中的更改就像将处理程序绑定到回调时将模型替换为集合一样简单。

---

控制器

Backbone 中的控制器本质上允许您使用 hashbang 创建可添加书签的有状态应用程序。

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

这对于传统服务器端 MVC 框架中的路由非常熟悉。例如，!/games 将映射到 games 函数，而浏览器本身中的 URL 将是 domain/#!/games。

通过智能使用 hashbang，您可以创建大量基于 JS 且可添加书签的应用程序。

如果您担心破坏后退按钮，Backbone 也能满足您的需求。

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();

通过上面的代码片段，Backbone 可以监控您的 hashbang，并结合您之前指定的路线，使您的应用程序可添加书签。

---

我从 Backbone 学到了什么

总的来说，以下是我从创建应用程序的 Backbone 方式中学到的一些经验教训：

• 前端确实需要 MVC。传统方法给我们留下的代码过于耦合、混乱且难以维护。
• 在 DOM 中存储数据和状态是一个坏主意。在创建需要使用相同数据更新应用的不同部分的应用后，这开始变得更有意义。
• 胖模型和瘦控制器是正确的选择。当业务逻辑由模型处理时，工作流程就会得到简化。
• 模板是绝对必要的。将 HTML 放入 JavaScript 中会给您带来不好的业力。

可以说 Backbone 引起了前端构建方式的范式转变，至少对我来说是这样。鉴于今天文章的范围非常广泛，我确信您有很多问题。点击下面的评论部分来插话。非常感谢您的阅读，并期待将来有更多的 Backbone 教程！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!