1. Introduction
Récemment, je fais l'optimisation frontale d'un grand projet bancaire en ligne. J'ai besoin d'utiliser une grosse optimisation du client. L'idée générale est que le front-end utilise la demande AJAX pour obtenir des données à partir du back-end, la renvoyer au format Jason, puis l'afficher sur la page. Parce que ce système est très grand, la solution de clientèle gras nécessite inévitablement l'écriture de beaucoup de code JS sur le client. Je pense qu'il est très gênant pour toute équipe de maintenir une grande quantité de code non structuré. Donc, l'épine dorsale est venue à la vue.
Il fournit un moyen de structurer votre code JS, vous permettant d'organiser votre code JS frontal de manière orientée objet. C'est comme si nous appliquons la conception du domaine à l'avant. Nous pouvons diviser un très grand projet par module. Chaque module peut être divisé en vue, modèle et routeur en fonction des exigences de l'épine dorsale.
Avec Backbone, vous pouvez traiter vos données comme des modèles. Avec les modèles, vous pouvez créer des données, vérifier les données, les détruire ou les enregistrer sur le serveur. Lorsque les opérations sur l'interface provoquent des modifications des propriétés 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 selon lequel le modèle déclenche le changement, puis publiera la réponse correspondante, et renforcez de nouvelles données à l'interface. Dans une application complète de l'épine dorsale, vous n'avez pas besoin d'écrire de code de colle pour obtenir des nœuds via des ID spéciaux à partir du DOM, ou de mettre à jour manuellement les pages HTML, car lorsque le modèle change, les vues seront facilement mises à jour.
2. Caractéristiques
L'épine dorsale est un cadre frontal léger utilisé pour structurer la gestion d'un grand nombre de JS en pages, établir une connexion transparente avec les serveurs et les vues et fournir un cadre de base pour créer des applications complexes.
Permettez-moi d'expliquer brièvement les principales caractéristiques et caractéristiques de l'épine dorsale:
2.1 Léger
Le code source de Backbone n'est qu'environ 1000 lignes (après décoment et lignes vierges), la taille du fichier n'est que de 16 Ko et le soulignement de la bibliothèque de dépendances n'est que de 29 Ko.
Il vous suffit de passer un peu de temps pour comprendre facilement la mise en œuvre interne de l'épine dorsale; ou écrire une petite quantité de code pour surcharger certains des mécanismes de l'épine dorsale; Si vous voulez faire du développement secondaire basé sur l'épine dorsale, ce n'est pas une chose compliquée.
2.2 Structuré
L'épine dorsale peut facilement découpler les données, la logique et les vues dans la page, et organiser la structure du code en fonction de la colonne vertébrale. Vous pouvez attribuer l'interaction de données, la logique métier, l'interface utilisateur et d'autres travaux du projet à plusieurs collègues pour se développer simultanément et les organiser de manière ordonnée. Dans le même temps, cela est très utile pour la maintenance et le développement de projets importants et complexes.
2.3 Mécanisme d'héritage
Dans l'épine dorsale, les modules peuvent être hérités. Vous pouvez organiser les modèles de données, les collections et les vues dans votre application d'une manière orientée objet pour rendre toute l'architecture entière plus claire; Vous pouvez également surcharger et étendre facilement les méthodes personnalisées.
2.4 Établir une connexion transparente avec le serveur
Backbone a un ensemble intégré de règles d'interaction avec les données du serveur (si vous comprenez l'architecture REST, vous pouvez facilement les comprendre) et la synchronisation des données sera automatiquement effectuée dans le modèle. Les développeurs frontaux n'ont besoin que de fonctionner sur les données des clients, et Backbone synchronisera automatiquement les données de fonctionnement du serveur.
C'est une chose très intéressante car l'interface de données du serveur est transparente pour les développeurs frontaux et ils n'ont plus besoin de se soucier de la façon d'interagir avec le serveur.
Cependant, l'interface de données fournie par le serveur doit également être compatible avec les règles de la squelette. Pour un nouveau projet, nous pouvons essayer d'utiliser cet ensemble de règles pour créer l'interface. Mais si vous avez déjà un ensemble stable d'interfaces dans votre projet, vous pouvez vous inquiéter du risque de modification de l'interface.
Peu importe, nous pouvons nous adapter à l'interface de données existante en surchargeant la méthode Backbone.Sync. Pour différents environnements clients, nous pouvons également implémenter différentes méthodes d'interaction de données. Par exemple: lorsqu'un utilisateur utilise un service via un navigateur PC, les données seront synchronisées avec le serveur en temps réel; Lorsqu'un utilisateur utilise un service via un terminal mobile, en considérant les problèmes d'environnement du réseau, nous pouvons d'abord synchroniser les données dans la base de données locale, puis la synchroniser sur le serveur le cas échéant. Et ceux-ci peuvent être réalisés 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, mais pour les événements interactifs générés par les utilisateurs (tels que les événements de clic), nous les obtenons souvent et les lions via des méthodes de liaison similaires à celles de jQuery.
La vue dans Backbone nous aide à organiser les événements utilisateur et les méthodes d'exécution de manière ordonnée, ce qui nous oblige seulement à déclarer une expression simple, telle que:
Événements: {// Lorsque vous cliquez sur un élément avec ID "Save", exécutez la méthode ADD de la vue 'cliquez sur #save': 'add', 'MousDown .Button': 'Show', 'Mouseover .Button': 'Hide'}Dans une expression, le nom de l'événement peut être n'importe quel événement DOM (tel que Click, Mouseover, Keypress, etc.), et l'élément peut être tout sélecteur pris en charge par jQuery (tel que le sélecteur de balises, le sélecteur d'identification, le sélecteur de classe, etc.).
La vue liera automatiquement les événements de l'expression à l'élément sélecteur. Lorsque l'événement de l'élément est déclenché, la vue appellera automatiquement les méthodes liées dans l'expression.
2.6 Analyse des modèles légers
L'analyse du modèle est une méthode fournie dans le trait de soulignement. Pourquoi est-ce que je présente la méthode dans Soulignement lors de l'introduction des fonctionnalités de la colonne vertébrale? Parce que cette méthode peut nous aider à mieux séparer la structure et la logique de la vue, et souligner est une bibliothèque sur laquelle le squelette doit compter.
Les méthodes d'analyse de modèle nous permettent de mélanger et d'intégrer du code JS dans les structures HTML, tout comme le code Java intégré dans les pages JSP:
<ul> <% pour (var i = 0; i <len; i ++) {%> <li> <% = data [i] .title%> </li> <%}%> </li>Grâce à l'analyse du modèle, nous n'avons pas besoin d'épisser les chaînes lors de la génération de structures HTML dynamiquement. Plus important encore, nous pouvons gérer la structure HTML dans la vue indépendamment (par exemple: différents états peuvent afficher différentes structures HTML, nous pouvons définir plusieurs fichiers de modèles distincts, charger et rendu selon les besoins).
2.7 Gestion des événements personnalisés
Dans Backbone, vous pouvez utiliser la méthode ON ou OFF pour lier et supprimer les événements personnalisés. Partout, vous pouvez utiliser la méthode de déclenchement pour déclencher ces événements liés, et toutes les méthodes qui ont lié l'événement seront exécutées, telles que:
var modèle = new Backbone.Model (); // lier deux fonctions à l'événement personnalisé personnalisé dans le modèle objet Model.on ('personnalisé', fonction (p1, p2) {// todo}); Model.on ('Custom', fonction (p1, p2) {// todo}); // déclenche l'événement personnalisé, et les deux fonctions liées ci-dessus seront appelées Model.trigger ('Custom', 'Value1', 'Value2'); // supprime toutes les méthodes liées dans le modèle d'événement personnalisé.off ('coutume'); // déclenche l'événement personnalisé, mais aucune fonction ne sera exécutée. Les fonctions de l'événement ont été supprimées dans l'étape précédente Model.trigger («Custom»);Si vous connaissez JQuery, vous constaterez qu'ils sont très similaires aux méthodes de liaison, de vent et de déclenchement dans jQuery.
De plus, Backbone prend en charge un événement spécial "All". Lorsqu'un événement nommé "All" est lié à un objet, la méthode liée à l'événement "ALL" sera également déclenchée lorsqu'un événement est déclenché. Parfois, cette méthode peut être très utile, par exemple, nous pouvons écouter des changements dans l'état d'objet via l'événement "All".
3. Routeur
Dans une seule application de page, nous contrôlons la commutation et la présentation de l'interface via JavaScript et obtenons des données du serveur via AJAX.
Le problème qui peut survenir est que lorsque l'utilisateur souhaite revenir à l'opération précédente, il peut habituellement utiliser les boutons "dos" et "avant" du navigateur, mais le résultat est que la page entière est commutée parce que l'utilisateur ne sait pas qu'il est dans la même page.
Pour ce problème, nous utilisons souvent un hachage (point d'ancrage) pour enregistrer l'emplacement actuel de l'utilisateur et écouter les actions "Forward" et "Retour" de l'utilisateur via l'événement OnHashChange, mais nous avons constaté que certaines versions inférieures de navigateurs (telles que IE6) ne prennent pas en charge l'événement OnHashchange.
La squelette fournit une fonction de contrôle de routage. Grâce au routeur fourni par Backbone, nous pouvons lier la fonction d'adresse de routage et d'événement par une expression simple, par exemple:
var customRouter = dackbone.router.extend ({Routes: {'': 'index', // Exécuter la méthode d'index lorsque URL Hash est dans le répertoire racine: URL # 'LIST': 'GetList', // EXECUTER Méthode GetList lorsque Url Hash est dans la liste Node: Url # List ' Les données détaillées en tant que paramètres de la méthode de requête: URL # list / 1001 '* error': 'showerror' // Effectuer la méthode d'erreur lorsque URL Hash ne correspond pas aux règles ci-dessus}, index: fonction () {'GetList'); function (erreur) {alert ('error hash:' + error);},}); var personnalisé = new CustomRouter (); Backbone.History.Start ();Veuillez essayer de copier ce code sur votre page et accéder à l'adresse suivante à tour de rôle (où l'URL indique l'adresse de votre page):
URLURL # Listel # Detail / 1001url # hash1url # hash2
Veuillez essayer d'utiliser les boutons "Back" et "Forward" du navigateur pour basculer d'avant en arrière à l'adresse que vous venez d'entrer.
Vous pouvez voir que lorsque le hachage URL change, la méthode liée sera exécutée. Lorsqu'un hachage non défini est rencontré, la méthode Downror sera exécutée et le hachage non défini est transmis à la méthode.
L'épine dorsale enregistrera les modifications d'adresse via le hachage par défaut. Pour les navigateurs de version inférieure qui ne prennent pas en charge OnHashChange, les modifications de hachage seront surveillées via le rythme cardiaque SetInterval, vous n'avez donc pas à vous soucier des problèmes de compatibilité du navigateur.
Pour les navigateurs qui prennent en charge la fonctionnalité HTML5 Pushstate, Backbone vous permet également de créer des URL personnalisées via PushState, mais cela nécessite une certaine adaptation de votre serveur Web.
3. Applicabilité de l'épine dorsale
L'épine dorsale n'est pas aussi applicable que jQuery, et si vous prévoyez de créer une application Web d'une grande page importante ou complexe, Backbone est plus approprié.
Si vous souhaitez appliquer une épine dorsale à la page de votre site Web, et qu'il n'y a pas de logique et de structure complexes dans la page, cela ne fera que rendre votre page plus lourde et difficile à entretenir.
Si votre projet n'est pas compliqué, mais que vous aimez profondément une certaine caractéristique (peut être un modèle de données, voir la gestion ou le routeur), vous pouvez extraire cette partie du code source à partir de l'épine dorsale car dans la colonne vertébrale, les dépendances entre les modules ne sont pas très fortes et vous pouvez facilement en obtenir et en utiliser l'un.
4. Bibliothèque de dépendances
Vous ne pouvez pas utiliser l'épine dorsale indépendamment car ses fonctions de base, ses opérations DOM et AJAX reposent tous sur des bibliothèques tierces.
4.1 Contrôle
(Requis)
Le soulignement est une bibliothèque de fonctions de base pour améliorer l'efficacité du développement. Il résume les opérations communes sur les ensembles, les tableaux, les objets et les fonctions. Tout comme jQuery encapsule les objets DOM, vous pouvez facilement accéder et manipuler les objets internes JavaScript via un soulignement.
Le sous-sol fournit également des méthodes de fonction très pratiques, telles que la limitation de la fonction, l'analyse des modèles, etc.
Je vais entrer dans les détails sur certaines des principales méthodes de soulignement dans le chapitre suivant, mais avant cela, vous devez comprendre: le soulignement est une bibliothèque sur laquelle Backbone doit compter, car de nombreuses implémentations dans la colonne vertébrale sont basées sur le soulignement.
4.2 jQuery et Zepto
(Facultatif)
Je crois que vous serez certainement familier avec jQuery, c'est un DOM et un framework Ajax.
Pour Zepto, vous pouvez le comprendre comme une "version mobile de jQuery", car elle est plus petite, plus rapide et plus adaptée à la course sur des navigateurs d'appareils mobiles, c'est la même syntaxe que jQuery, afin que vous puissiez l'utiliser comme vous le feriez avec jQuery.
Zepto ne prend actuellement en charge que les navigateurs avec le noyau webkit, il est donc compatible avec la plupart des systèmes mobiles tels que iOS, Adnroid, Symbian, BlackBerry et MeEGO, tandis que pour Windows Phone ou Firefox OS, il n'est pas encore pris en charge.
Parce que la syntaxe jQuery et Zepto est la même, pour la colonne vertébrale, vous n'avez aucun problème à utiliser jQuery ou Zepto (bien sûr, vous ne pouvez pas utiliser les deux en même temps).
Dans Backbone, le sélecteur DOM, l'événement DOM et AJAX utilisent tous la méthode jQuery. La raison pour laquelle ils sont facultatifs ici est que vous n'utilisez pas la fonction View et Ajax Data Synchronisation dans Backbone, alors vous n'avez pas besoin de les importer.
Si vous ne souhaitez pas utiliser jQuery ou Zepto, mais utilisez d'autres bibliothèques ou personnalisées, tant que votre bibliothèque implémente le même sélecteur DOM, la gestion des événements et les méthodes AJAX que la syntaxe jQuery, il n'y aura pas de problème.
Backbone vous permet de configurer dynamiquement les bibliothèques tierces que vous devez utiliser via la méthode SetDomLibrary, qui est souvent utilisée pour:
Bien que votre bibliothèque personnalisée contient des méthodes avec la même syntaxe que jQuery, la variable globale n'est pas $ et vous souhaitez conserver le nom existant. À l'heure actuelle, vous pouvez le définir sur l'objet référencé en interne par la méthode SetDomLibrary.
Vous souhaitez vérifier l'environnement de l'utilisateur pour décider quelle bibliothèque est la plus adaptée à une utilisation. Par exemple: si l'utilisateur accède à l'utilisation d'un navigateur PC, chargez JQuery et si l'utilisateur accède via un terminal mobile, chargez Zepto.