Guide d'étude de démarrage pour le framework Backbone.js de JavaScript_Basic Knowledge

1.Introduction
Récemment, je fais de l'optimisation front-end pour un projet de banque en ligne à grande échelle, qui nécessite l'utilisation d'un client lourd. L'idée générale est que le front-end demande des données via Ajax au back-end et les renvoie. au format Jason, puis l'affiche sur la page. Ce système étant très volumineux, la solution client lourd nécessite inévitablement d’écrire beaucoup de code JS côté client. Je pense qu'il est très gênant pour n'importe quelle équipe de conserver une grande quantité de code non structuré. Alors BackBone est apparu dans mon champ de vision.
Il vous permet de structurer votre code JS et d'organiser votre code JS front-end de manière orientée objet. C'est comme appliquer le Domain Driven Design au front-end. Nous pouvons diviser un très grand projet en modules. Chaque module peut être divisé en vue, modèle et routeur selon les exigences de BackBone.
Grâce au backbone, vous pouvez traiter vos données comme des modèles. Grâce aux modèles, vous pouvez créer des données, effectuer une validation des données, les détruire ou les enregistrer sur le serveur. Lorsque les opérations sur l'interface entraînent des modifications des attributs du modèle, le modèle déclenchera l'événement de changement ; les vues utilisées pour afficher l'état du modèle recevront le message de modification déclenché par le modèle, puis émettront une réponse correspondante et restitueront le message. de nouvelles données à interfacer. Dans une application de base complète, vous n'avez pas besoin d'écrire du code de collage pour obtenir des nœuds du DOM par des identifiants spéciaux, ni de mettre à jour manuellement la page HTML, car les vues se mettront simplement à jour lorsque le modèle changera.

2. Caractéristiques
Backbone est un framework frontal léger utilisé pour gérer structurellement une grande quantité de JS dans les pages, établir des connexions transparentes avec les serveurs et les vues et fournir un cadre de base pour créer des applications complexes.
Permettez-moi de vous expliquer brièvement les principales caractéristiques de Backbone :

2.1 Léger
Le code source de Backbone ne fait qu'environ 1 000 lignes (après suppression des commentaires et des lignes vides), et la taille du fichier n'est que de 16 Ko, y compris la bibliothèque dépendante Underscore, elle n'est que de 29 Ko.
Il vous suffit de passer un peu de temps pour comprendre facilement l'implémentation interne de Backbone ; ou d'écrire une petite quantité de code pour remplacer certains mécanismes de Backbone ; si vous souhaitez effectuer un développement secondaire basé sur Backbone, ce n'est pas une question compliquée ;

2.2 Structure
Backbone peut facilement découpler les données, la logique et les vues dans la page et organiser la structure du code en fonction de Backbone. Vous pouvez attribuer l'interaction des données, la logique métier, l'interface utilisateur, etc. dans le projet à plusieurs collègues. développement simultané. Et peuvent être organisés ensemble de manière ordonnée. En même temps, cela est très utile pour la maintenance et le développement de projets vastes et complexes.

2.3 Mécanisme d'héritage
Dans Backbone, les modules peuvent être hérités. Vous pouvez organiser les modèles de données, les collections et les vues dans l'application de manière orientée objet pour rendre l'ensemble de l'architecture plus claire ; vous pouvez également facilement la surcharger et l'étendre.

2.4 Établir une connexion transparente avec le serveur
Backbone dispose d'un ensemble de règles d'interaction avec les données du serveur intégrées (si vous comprenez l'architecture REST, vous pouvez facilement les comprendre), et le travail de synchronisation des données sera automatiquement effectué dans le modèle, et le développeur front-end uniquement doit Lorsque vous effectuez des opérations sur les données client, Backbone synchronise automatiquement les données exploitées avec le serveur.
C'est une chose très intéressante car l'interface de données du serveur est transparente pour les développeurs front-end, et ils n'ont plus à se soucier de la manière d'interagir avec le serveur.
Cependant, l'interface de données fournie par le serveur doit également être compatible avec les règles de Backbone. Pour un nouveau projet, nous pouvons essayer d'utiliser cet ensemble de règles pour construire l'interface. Mais si votre projet dispose déjà d’un ensemble stable d’interfaces, vous pourriez vous inquiéter des risques liés à la modification de l’interface.
Peu importe, nous pouvons nous adapter à l'interface de données existante en surchargeant la méthode Backbone.sync. Nous pouvons également implémenter différentes méthodes d'interaction de données pour différents environnements clients. Par exemple : lorsque les utilisateurs utilisent les services via un navigateur PC, les données seront synchronisées avec le serveur en temps réel ; et lorsque les utilisateurs utilisent les services via des terminaux mobiles, en tenant compte des problèmes d'environnement réseau, nous pouvons d'abord synchroniser les données avec la base de données locale, et puis synchronisez-le sur le serveur au moment approprié. Et cela peut être réalisé en surchargeant simplement une méthode.

2.5 Gestion des événements d'interface
Dans MVC, nous espérons séparer complètement la présentation de l'interface et la logique métier. Cependant, pour les événements interactifs générés par l'utilisateur (tels que les événements de clic), nous les obtenons et les lions souvent via la méthode bind dans jQuery.
Les vues dans Backbone nous aident à organiser les événements utilisateur et les méthodes d'exécution de manière ordonnée, ce qui nous oblige simplement à déclarer une expression simple, telle que :

events: { 
  // 单击id为”save”的元素时，执行视图的add方法 
  'click #save': 'add', 
  'mousedown .button': 'show', 
  'mouseover .button': 'hide' 
} 

在表达式中，事件名称可以是任意的DOM事件（如click、mouseover、keypress等），元素可以是jQuery支持的任意选择器（如标签选择器、id选择器、class选择器等）。
视图会自动将表达式中的事件绑定到选择器元素，当元素的事件被触发后，视图会自动调用表达式中绑定的方法。

2.6 轻量级模板解析
模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法？因为该方法能帮助我们更好地分离视图结构和逻辑，且Underscore是Backbone必须依赖的库。
模板解析方法能允许我们在HTML结构中混合嵌入JS代码，就像在JSP页面中嵌入Java代码一样：

<ul> 
  <% for(var i = 0; i < len; i++) { %> 
  <li><%=data[i].title%></li> 
  <% } %> 
</li> 

通过模板解析，我们不需要在动态生成HTML结构时拼接字符串，更重要的是，我们可以将视图中的HTML结构独立管理（例如：不同的状态可能会显示不同的HTML结构，我们可以定义多个单独的模板文件，按需加载和渲染即可）。

2.7 自定义事件管理

在Backbone中，你可以使用on或off方法绑定和移除自定义事件。在任何地方，你都可以使用trigger方法触发这些绑定的事件，所有绑定过该事件的方法都会被执行，如：

var model = new Backbone.Model(); 
// 在model对象中向自定义事件custom绑定两个函数 
model.on('custom', function(p1, p2) { 
  // todo 
}); 
model.on('custom', function(p1, p2) { 
  // todo 
}); 
// 触发custom事件，将调用上面绑定的两个函数 
model.trigger('custom', 'value1', 'value2'); 
// 移除custom事件中绑定的所有方法 
model.off('custom'); 
// 触发custom事件，但不会执行任何函数，已经事件中的函数已经在上一步被移除 
model.trigger('custom'); 
 

如果你熟悉jQuery，你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。
另外，Backbone支持一个特殊事件”all”，当在一个对象中绑定了名为”all”的事件后，该对象在触发任何事件时，都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用，例如我们可以通过”all”事件监听对象状态的变化。

3.路由器
在单页应用中，我们通过JavaScript来控制界面的切换和展现，并通过AJAX从服务器获取数据。
可能产生的问题是，当用户希望返回到上一步操作时，他可能会习惯性地使用浏览器“返回”和“前进”按钮，而结果却是整个页面都被切换了，因为用户并不知道他正处于同一个页面中。
对于这个问题，我们常常通过Hash（锚点）的方式来记录用户的当前位置，并通过onhashchange事件来监听用户的“前进”和“返回”动作，但我们发现一些低版本的浏览器（例如IE6）并不支持onhashchange事件。
Backbone提供了路由控制功能，通过Backbone提供的路由器，我们能通过一个简单的表达式将路由地址和事件函数绑定在一起，例如：

var CustomRouter = Backbone.Router.extend({ 
  routes : { 
    '' : 'index', // 当URL Hash在根目录时执行index方法：url# 
    'list' : 'getList', // 当URL Hash在list节点时执行getList方法：url#list 
    'detail/:id' : 'query', // 当URL Hash在detail节点时执行query方法，并将detail后的数据作为参数传递给query方法：url#list/1001 
    '*error' : 'showError' // 当URL Hash不匹配以上规则时, 执行error方法 
  }, 
  index : function() { 
    alert('index'); 
  }, 
  getList : function() { 
    alert('getList'); 
  }, 
  query : function(id) { 
    alert('query id: ' + id); 
  }, 
  showError : function(error) { 
    alert('error hash: ' + error); 
  }, 
}); 
 
var custom = new CustomRouter(); 
Backbone.history.start(); 

请尝试将这段代码复制到你的页面中，并依次访问以下地址（其中URL表示你的页面地址）：

URL
URL#list
URL#detail/1001
URL#hash1
URL#hash2

Veuillez réessayer en utilisant les boutons « Précédent » et « Suivant » du navigateur pour basculer entre les adresses que vous venez de saisir.
Vous pouvez voir que lorsque le hachage de l'URL change, la méthode liée sera exécutée Lorsqu'un hachage non défini est rencontré, la méthode showError sera exécutée et le hachage non défini sera transmis à cette méthode.
Backbone enregistrera les changements d'adresse via Hash par défaut. Pour les navigateurs de version inférieure qui ne prennent pas en charge onhashchange, il surveillera les modifications de Hash via setInterval heartbeat, vous n'aurez donc pas à vous soucier des problèmes de compatibilité du navigateur.
Pour les navigateurs prenant en charge la fonctionnalité HTML5 pushState, Backbone vous permet également de créer des URL personnalisées via pushState, mais cela nécessite quelques adaptations sur votre serveur Web.
3. Applicabilité du Backbone

Backbone n'est pas aussi adaptable que jQuery Si vous vous préparez à créer une application Web volumineuse ou complexe d'une seule page, alors Backbone est parfait.
Si vous souhaitez appliquer Backbone à la page de votre site Web et que la page n'a pas de logique et de structure complexes, cela ne fera que rendre votre page plus lourde et plus difficile à maintenir.
Si votre projet n'est pas complexe, mais que vous en aimez vraiment une certaine fonctionnalité (peut-être le modèle de données, la gestion des vues ou le routeur), alors vous pouvez extraire cette partie du code source de Backbone, car dans Backbone, chaque dépendance entre les modules ne sont pas très puissants et vous pouvez facilement obtenir et utiliser l'un des modules.

4. Bibliothèques dépendantes

Vous ne pouvez pas utiliser Backbone indépendamment car ses fonctions de base, ses opérations DOM et AJAX reposent toutes sur des bibliothèques tierces.

4.1 Soulignement
(obligatoire)
Underscore est une bibliothèque de fonctions de base utilisée pour améliorer l'efficacité du développement. Elle encapsule les opérations courantes sur les collections, les tableaux, les objets et les fonctions. Tout comme jQuery encapsule les objets DOM, vous pouvez facilement accéder aux objets internes JavaScript et les utiliser via Underscore.
Underscore fournit également des méthodes de fonction très pratiques, telles que la limitation des fonctions, l'analyse de modèles, etc.
Concernant certaines des principales méthodes de Underscore, je les présenterai en détail dans le chapitre suivant, mais avant cela, vous devez comprendre : Underscore est une bibliothèque sur laquelle Backbone doit s'appuyer, car de nombreuses implémentations dans Backbone sont basées sur Underscore.

4.2 jQuery et Zepto
(facultatif)
Je pense que vous connaissez jQuery. Il s'agit d'un framework DOM et AJAX multi-navigateurs.
Pour Zepto, vous pouvez le considérer comme la « version mobile de jQuery » car il est plus petit, plus rapide et plus adapté pour fonctionner sur le navigateur des terminaux mobiles. Il a la même syntaxe que jQuery, vous pouvez donc l'utiliser comme. jQuery.
Zepto ne prend actuellement en charge que les navigateurs basés sur Webkit, il est donc compatible avec la plupart des systèmes mobiles tels que iOS, Adnroid, Symbian, Blackberry et Meego. Cependant, il ne prend pas encore en charge Windows Phone ou Firefox OS.
Parce que jQuery et Zepto ont la même syntaxe, pour Backbone, il n'y a aucun problème que vous utilisiez jQuery ou Zepto (bien sûr, vous ne pouvez pas utiliser les deux en même temps).
Dans Backbone, les sélecteurs DOM, les événements DOM et AJAX utilisent tous des méthodes jQuery. La raison pour laquelle ils sont facultatifs ici est que si vous n'utilisez pas les vues et les fonctions de synchronisation des données AJAX dans Backbone, vous n'avez pas besoin de les importer.
Si vous ne souhaitez pas utiliser jQuery ou Zepto, mais utilisez une autre bibliothèque ou une bibliothèque personnalisée, il n'y aura aucun problème tant que votre bibliothèque implémente les mêmes sélecteurs DOM, gestion d'événements et méthodes AJAX que la syntaxe jQuery.
Backbone vous permet de configurer dynamiquement les bibliothèques tierces que vous devez utiliser via la méthode setDomLibrary. Cette situation est souvent utilisée :
. Bien que votre bibliothèque personnalisée contienne des méthodes avec la même syntaxe que jQuery, les variables globales ne sont pas $ et vous souhaitez conserver le nom existant. À ce stade, vous pouvez le définir sur l'objet référencé en interne par Backbone via la méthode setDomLibrary.
Vous souhaitez décider quelle bibliothèque est la plus appropriée à utiliser en examinant l'environnement de l'utilisateur. Par exemple : Si l'utilisateur accède via un navigateur PC, jQuery est chargé ; si l'utilisateur accède via un terminal mobile, Zepto est chargé.