Quelques suggestions pour utiliser le framework Backbone.js de connaissances JavaScript_Basic

Backbone fournit une structure de modèles, de collections et de vues pour les applications Javascript complexes. Le modèle est utilisé pour lier des données clé-valeur et des événements personnalisés ; la collection est équipée d'une riche API de fonctions énumérables ; la vue peut déclarer des fonctions de gestion d'événements et se connecter à l'application via une interface RESTful JSON.
Lorsque vous développez des applications Web contenant beaucoup de JavaScript, l'une des premières choses à faire est d'arrêter d'ajouter des données aux objets DOM. Créez des applications Javascript avec des sélecteurs jQuery et des fonctions de rappel complexes, notamment en maintenant la synchronisation entre l'interface utilisateur HTML, la logique Javascript et les données, sans aucune complexité. Mais pour les applications clientes, une bonne architecture présente souvent de nombreux avantages.
Backbone présente les données sous forme de modèles et vous pouvez créer des modèles, les valider et les détruire, et même les enregistrer sur le serveur. Lorsque des modifications dans l'interface utilisateur entraînent une modification des propriétés du modèle, le modèle déclenche l'événement « changement » ; toutes les vues qui affichent les données du modèle recevront des notifications de cet événement, puis les vues seront restituées. Vous n'avez pas besoin de rechercher dans le DOM l'élément avec un identifiant spécifique pour mettre à jour le code HTML manuellement. : une fois le modèle modifié, la vue change automatiquement.
backbone.js fournit un cadre de développement Web, utilisant des modèles pour la liaison clé-valeur et le traitement des événements personnalisés, utilisant des collections pour fournir un riche ensemble d'API pour les fonctions d'énumération et utilisant des vues pour le traitement des événements et l'intégration avec l'application existante interagit via le JSON RESTful. interface. C'est un framework js basé sur jquery et underscore.

Backbone n’a pas d’opinion par nature. L'idée la plus basique que vous tirez de la documentation est la suivante : utilisez les outils fournis par backbone.js pour faire ce que vous voulez.

C'est génial car il existe de nombreux cas d'utilisation différents et il est très facile de commencer à écrire des applications. Cette approche peut nous éviter de commettre le moins d’erreurs possible au début.

Quand quelque chose ne va pas, nous devons le découvrir et trouver un moyen de le corriger.

Les conseils suivants peuvent vous aider à éviter les erreurs que nous avons rencontrées lors du développement de Backbone.js :

1. Les vues sont sans données

Les données appartiennent à des modèles (modèles) et non à des vues. La prochaine fois que vous vous retrouverez à stocker des données dans une vue (ou pire : dans le DOM), déplacez-les immédiatement dans le modèle.

Si vous n’avez pas de modèle, en créer un est très simple :

this.viewState = new Backbone.Model();

Rien d’autre n’a vraiment besoin d’être fait.

Vous pouvez écouter les événements de changement sur vos données et même les synchroniser en ligne avec votre serveur.

2. Les événements DOM changent uniquement de modèle

Lorsqu'un événement DOM est déclenché, par exemple en cliquant sur un bouton, ne le laissez pas modifier lui-même la vue. Changez ce modèle.

Changer le DOM sans changer l'état signifie que votre état est toujours stocké dans le DOM. Cette règle vous permet de rester cohérent.

Si vous cliquez sur un bord "Load More", n'agrandissez pas la vue, changez simplement le modèle :

this.viewState.set('readMore', true);

D'accord, mais quand est-ce que la vue change ? Bonne question, répondue par la règle suivante.

3.DOM ne change que lorsque le modèle change

Les événements sont incroyables, veuillez les utiliser. Le plus simple est de le déclencher après chaque changement.

this.listenTo(this.stateModel, 'change', this.render);

Une meilleure approche consiste à déclencher des changements uniquement lorsque cela est nécessaire.

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

Cette vue restera toujours cohérente avec son modèle. Cette vue sera toujours mise à jour quelle que soit la manière dont le modèle change : en réponse aux actions de l'interface de commande ou aux informations de débogage.

4. Les choses liées doivent être déliées

Lorsqu'une vue est supprimée du DOM, à l'aide de la méthode 'remove', elle doit être indépendante de tous les événements liés.

Si vous utilisez « on » pour lier, votre responsabilité est d'utiliser « off » pour dissocier. Sans dissociation, le collecteur de mémoire ne peut pas libérer la mémoire, ce qui entraîne une dégradation des performances de votre application.

C'est de là que vient « listenTo ». Il suit la liaison et la déliaison des vues. Backbone effectuera 'stopListening' avant de le déplacer du DOM.

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

5. Continuez à écrire en chaîne

Renvoyer toujours « this » des méthodes de rendu et de suppression. Cela vous permet d'écrire des chaînes de méthodes.

view.render().$el.appendTo(otherElement);

C’est la méthode, ne la cassez pas.

6. Les événements valent mieux que les rappels

Il vaut mieux attendre un événement de réponse que de rappeler

Les modèles Backbone déclenchent des événements « sync » et « erreur » par défaut, ces événements peuvent donc être utilisés à la place des rappels. Considérez ces deux scénarios.

model.fetch({
 success: handleSuccess,
 error: handleError
});
//这种更好：
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

Peu importe le moment où le modèle est récupéré, handleSucess/handleError sera appelé.

7. Les vues ont une portée

Une vue ne doit jamais manipuler le DOM autre que lui-même.

la vue fera référence à son propre élément DOM, tel que 'el' ou l'objet jquery '$el'

Cela signifie que vous ne devez jamais utiliser jQuery directement :

$('.text').html('Thank you');

Veuillez limiter la sélection des éléments DOM à votre propre domaine :

this.$('.text').html('Thank you');
 
// 这等价于
// this.$el.find('.text').html('Thank you');

如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。

例如，我们阻止页面滚动：

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS规则： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling

还有一件事

只要读读backbone的源代码，你会学到更多。看一看backbone.js的源代码，然后看看这些神奇的事情是怎么实现的。这个库非常小，而且可读性很好，整个读完不会超过10分钟的。

这些小贴士帮助我们写干净的，更好的可读的代码。