L'épine dorsale doit s'appuyer sur le soulignement.js à utiliser. Il doit utiliser des fonctions dans Contrôle pour terminer les opérations de base de l'accès aux éléments de page et des éléments de traitement.
Remarque: Backbone fonctionne bien avec d'autres bibliothèques JS, il s'agit donc d'une bibliothèque, pas d'un framework.
Le soulignement n'étend pas l'objet natif, mais appelle la méthode _ () à encapsuler. Une fois l'encapsulation terminée, l'objet JS devient un objet de soulignement. Vous pouvez également obtenir les données dans l'objet JS natif via la méthode Value () de l'objet de trait de soulignement. (jQuery obtient l'objet jQuery via $ () méthode)
Le soulignement a plus de 60 fonctions au total. Selon les différents objets de traitement, il peut être divisé en cinq modules principaux: classe de collecte, classe de tableau, classe de fonction fonctionnelle, classe d'objets et classe de fonction d'outil.
Template de soulignement () Fonction Description:
Cette fonction contient trois modèles:
(1) <% %>: contient du code logique et ne sera pas affiché après rendu.
(2) <% =%>: Type de données, afficher les données après rendu.
(3) <% -%>: Convertir les balises HTML en chaînes courantes pour éviter les attaques de code.
Format d'appel:
_.Template (Templatestring, [Data], [Paraming])
Aucune liaison de données bidirectionnelle n'est implémentée.
1. Accapsulation de l'objet souligne
Le soulignement ne s'étend pas dans le prototype d'objet JavaScript natif, mais résume les données dans un objet personnalisé comme jQuery (ci-après dénommé "objet de soulignement").
Vous pouvez obtenir des données JavaScript natives en appelant la méthode Value () d'un objet de soulignement, par exemple:
// Définir un objet intégré JavaScript var jsdata = {name: 'data'} // Créer l'objet en tant qu'objet de trait de soulignement via la méthode _ () // Le prototype de l'objet soulignedata contient toutes les méthodes définies dans le soulignement. Vous pouvez utiliser var calendrier sous-oreau = _ (jsdata); // Obtenez des données natives via la méthode de valeur, c'est-à-dire jsdata soulignedata.value ();2. Appel prioritaire à JavaScript 1.6 Méthodes intégrées
Il existe de nombreuses méthodes de soulignement qui ont été incluses dans la spécification de JavaScript 1.6. Par conséquent, dans l'objet de soulignement, les méthodes intégrées fournies par l'environnement hôte (si l'environnement hôte a mis en œuvre ces méthodes) sera d'abord appelé pour améliorer l'efficacité d'exécution de la fonction.
Pour les environnements hôtes qui ne prennent pas en charge JavaScript 1.6, le soulignement les implémentera à sa manière, et pour les développeurs, ceux-ci sont complètement transparents.
L'environnement hôte mentionné ici peut être l'environnement de course Node.js ou le navigateur client.
3. Modifiez l'espace de noms
Soulignement utilise _ (soulignement) par défaut pour accéder et créer des objets, mais ce nom peut ne pas être conforme à nos spécifications de dénomination ou peut facilement provoquer des conflits de dénomination.
Nous pouvons modifier le nom de Contrôle via la méthode Noconflict () et restaurer la valeur avant la variable _ (souligner), par exemple:
<script type = "text / javascript"> var _ = 'variable personnalisée'; </ script> <script type = "text / javascript" src = "calendrier / sous-ore-min.js"> </ script> <script type = "text / javascript"> // sous-ore Console.dir (_); // Renommez l'objet de soulignement pour nous, puis accédez et créez l'objet de soulignement à travers nous var us = _.NoConflict (); // sortie "variable personnalisée" Console.dir (_); </cript>
4. Fonctionnement de la chaîne
Rappelez-vous comment nous lions les opérations en jQuery? Par exemple:
$ ('a') .css ('position', 'relative') .attr ('href', '#') .show ();Le soulignement prend également en charge les opérations de la chaîne, mais vous devez appeler la méthode chaîne () pour déclarer:
var arr = [10, 20, 30]; _ (arr) .Chain () .map (fonction (item) {return item ++;}) .first () .value ();Si la méthode chaîne () est appelée, soulignera à résumer la méthode appelée dans une fermeture, résumer la valeur de retour dans un objet de soulignement et retour:
// Il s'agit d'une fonction clé dans le soulignement pour implémenter les opérations de la chaîne. Il résume la valeur de retour dans un nouvel objet de soulignement et appelle à nouveau la méthode chaîne () pour fournir une prise en charge de la fonction suivante dans la chaîne de méthode. var result = fonction (obj, chaîne) {chaîne de retour? _ (obj) .chain (): obj; }5. Développez le soulignement
Nous pouvons facilement étendre les méthodes personnalisées dans la méthode de soulignement via Mixin (), par exemple:
_.mixin ({méthode1: fonction (objet) {// TODO}, Method2: function (arr) {// TODO}, Method3: function (fn) {// todo}});Ces méthodes sont annexées à l'objet prototype de soulignement, qui peut être utilisé par tous les objets de soulignement créés, et ils jouissent du même environnement que d'autres méthodes.
6. Traversé la collection
Les méthodes () et map () sont les deux méthodes les plus couramment utilisées. Ils sont habitués à parcourir une collection (tableau ou objet) et traiter chaque élément de la collection à leur tour, par exemple:
var arr = [1, 2, 3]; _ (arr) .map (fonction (item, i) {arr [i] = item + 1;}); var obj = {premier: 1, second: 2} _ (obj) .each (function (valeur, key) {return obj [key] = valeur + 1;});La méthode MAP () a le même rôle et les mêmes paramètres que chaque méthode (), mais il enregistre le résultat renvoyé par chaque fonction d'itération à un nouveau tableau et revient.
7. Fonction étranglement
La limitation de la fonction fait référence au contrôle de la fréquence d'exécution ou de l'intervalle d'une fonction (tout comme la porte qui contrôle le débit d'eau). Sous-terrain fournit deux méthodes: Debounce () et Throttle () pour la limitation de la fonction.
Pour décrire ces deux méthodes plus clairement, supposons que nous devons mettre en œuvre deux exigences:
Exigence 1: Lorsque l'utilisateur entre dans les critères de recherche dans la zone de texte, les mots clés correspondants sont automatiquement interrogés et invités à l'utilisateur (tout comme lors de la saisie du mot-clé de recherche dans TMALL)
Tout d'abord, analysez la première exigence. Nous pouvons lier l'événement de la bac à clés de la zone de texte. Lorsque le contenu de la zone d'entrée change, interrogez le mot-clé correspondant et affichez-le. Supposons que je veux interroger "Windows Phone", qui contient 13 caractères, et cela ne m'a pris que 1 seconde pour terminer l'entrée (cela semble un peu rapide, c'est ce que cela signifie), puis dans cette seconde, la méthode de requête a été appelée 13 fois. C'est une chose très effrayante, et si Tmall est mis en œuvre comme ça, je crains qu'il mourrie avant la journée des célibataires (bien sûr, ce n'est pas si fragile, mais ce n'est certainement pas la meilleure solution)
Une meilleure approche consiste à interroger le mot clé correspondant lorsque l'utilisateur a terminé la saisie ou attend une invite (peut-être qu'il est trop paresseux pour entrer le contenu suivant).
Enfin, nous avons constaté que dans les deux cas, nous nous attendions, l'utilisateur arrêtera temporairement les entrées, nous avons donc décidé de nous interroger après que l'utilisateur s'arrête à 200 millisecondes (si l'utilisateur tape constamment du contenu, alors nous pensons qu'il peut être très clair sur le mot-clé qu'il veut, alors attendez et invite à nouveau)
À l'heure actuelle, en utilisant la fonction Debounce () dans le soulignement, nous pouvons facilement implémenter cette exigence:
<input type = "text" id = "search" name = "search" /> <script type = "text / javascript"> var query = _ (function () {// werry opération ici}). Debounce (200); $ ('# search'). bind ('keypress', requête); </cript>Vous pouvez voir que notre code est très concis et que le contrôle de la limitation a été mis en œuvre dans la méthode Debounce (). Nous lui disons seulement que si la fonction de requête n'a pas été appelée dans les 200 millisecondes, nous exécuterons notre opération de requête, puis lierons la fonction de requête à l'événement de pression dans la zone d'entrée.
Comment la fonction de requête est-elle née? Lorsque nous appelons la méthode Debounce (), nous passerons une fonction qui effectuera l'opération de requête et un temps (millisecondes). La méthode Debounce () étranglera la fonction en fonction du temps que nous passons et renvoie une nouvelle fonction (c'est-à-dire la fonction de requête). Nous pouvons appeler la fonction de requête avec confiance et audace, et la méthode Debounce () nous aidera à le contrôler au besoin.
Exigence 2: Lorsque l'utilisateur fait glisser la barre de défilement du navigateur, appelez l'interface du serveur pour vérifier s'il y a un nouveau contenu
Analysons la deuxième exigence. Nous pouvons lier la méthode de requête à l'événement Window.onscroll, mais ce n'est évidemment pas une bonne pratique, car l'utilisateur fait glisser la barre de défilement une fois et peut déclencher des dizaines, voire des centaines d'événements Onscroll.
Pouvons-nous utiliser la méthode Debounce () ci-dessus pour effectuer un contrôle des limites? Lorsque l'utilisateur a fini de faire glisser la barre de défilement, alors interrogez-vous pour de nouveaux contenus? Mais cela est incompatible avec les exigences, et les utilisateurs espèrent voir des changements dans le nouveau contenu pendant le processus de traînée.
Nous avons donc décidé de le faire: lorsque l'utilisateur glisse, l'intervalle entre deux requêtes est pas moins de 500 millisecondes, si l'utilisateur traîne pendant 1 seconde, cela peut déclencher 200 événements Onscroll, mais nous ne faisons que 2 requêtes au maximum.
En utilisant la méthode de l'accélérateur () dans le trait de soulignement, nous pouvons également facilement implémenter cette exigence:
<script type = "text / javascript"> var query = _ (function () {// L'opération de requête ici}). Throttle (500); $ (fenêtre) .bind ('Scroll', Query); </cript>Le code est toujours très concis, car à l'intérieur de la méthode de Throttle (), tous les contrôles que nous avons mis en œuvre sont déjà recherchés.
Vous avez peut-être constaté que les deux méthodes de Debounce () et Throttle () sont très similaires (y compris la méthode d'appel et la valeur de retour), mais leurs fonctions sont différentes.
Ils sont tous utilisés pour la limitation des fonctions et les fonctions de contrôle ne sont pas appelées fréquemment, enregistrant les ressources des clients et du serveur.
La méthode Debounce () se concentre sur l'intervalle entre l'exécution de la fonction, c'est-à-dire que le temps d'appel de la fonction deux fois ne peut pas être inférieur au temps spécifié.
La méthode de l'accélérateur () se concentre davantage sur la fréquence d'exécution de la fonction, c'est-à-dire que la fonction ne sera appelée qu'une seule fois dans la fréquence spécifiée.
8. Analyse du modèle
Soulignement fournit une fonction d'analyse de modèle légère qui nous aide à organiser efficacement la structure et la logique des pages.
Je vais le présenter avec un exemple:
<! - Utilisé pour afficher des balises rendues -> <ul id = "element"> </ul> <! - Définissez un modèle et placez le contenu de modèle dans une balise de script -> <script type = "text / template" id = "tpl"> <% pour (var i = 0; i <list.length; i ++) {%> <% var item = list [i]%> <li> <pander> <% = item. <% = item.lastname%> </ span> <span> <% - item.city%> </span> </li> <%}%> </ script> <script type = "text / javascrip = $ ('# tpl'). html (); // Créer des données, qui peuvent être les données var que vous obtenez à partir du serveur = {list: [{FirstName: '<a href = "#"> zhang </a>', LastName: 'San', City: 'Shanghai'}, {FirstName: 'Li', LastName: 'SI', City: '<a href = "#"> beijing </a>'}, '<a href = "#"> beijing </a>'. 'Wang', LastName: 'Wu', City: 'Guangzhou'}, {FirstName: 'Zhao', LastName: 'Liu', City: 'Shenzhen'}]} // Analyse le modèle, renvoie le contenu analysé var html = _.emplate (tpl, data); // remplit le contenu analysé à l'élément de rendu.html (html); </cript>Dans cet exemple, nous mettons le contenu de modèle dans une balise <cript>, vous avez peut-être remarqué que le type de la balise est du texte / modèle au lieu de texte / javascript, car il ne peut pas être exécuté directement en tant que script JavaScript.
Je vous recommande également de mettre le contenu du modèle dans <Script> car si vous les écrivez dans une <div> ou d'autres balises, elles peuvent être ajoutées à l'arborescence Dom pour l'analyse (même si vous cachez cette balise, elle ne sera pas évitée).
_..emplate La fonction ne peut analyser que 3 types de balises de modèle (c'est beaucoup plus simple que Smarty et JSTL):
<% %>: Utilisé pour contenir du code JavaScript qui sera exécuté lorsque les données seront rendues.
<% =%>: Utilisé pour produire des données, il peut s'agir d'une variable, d'un attribut d'un objet ou d'un appel de fonction (pour sortir la valeur de retour de la fonction).
<% -%>: Utilisé pour produire des données et convertir les caractères HTML contenus dans les données en formulaires d'entité (par exemple, il convertit les doubles guillemets en forme), pour éviter les attaques XSS.
Lorsque nous voulons afficher HTML dans les données sous forme de texte, nous utilisons souvent la balise <% - %>.
Le soulignement vous permet également de modifier ces 3 formes de balises. Si nous voulons utiliser {%%}, {% =%}, {% -%} comme balises, nous pouvons le faire en modifiant les modèles de plates, juste comme ceci:
_.TemplateSettings = {evaluation: // {% ([/ s / s] +?) /% /} / g, interpolate: // {% = ([/ s / s] +?) /% /} / g}: // {% - ([/ s / s] +?)% /} / g}Dans cet exemple, nous passons le contenu et les données du modèle à remplir dans la méthode du modèle, qui sera traité dans l'ordre suivant:
(1) analyser le contenu du modèle en JavaScript exécutable (balises de modèle d'analyse)
(2) Modifier la portée JavaScript analysée à l'objet de données que nous passons avec l'instruction, ce qui nous permet d'accéder directement aux propriétés de l'objet de données via des variables dans le modèle.
(3) Exécuter JavaScript analysé (remplissage des données dans le modèle)
(4) Renvoyez le résultat après l'exécution
Nous rencontrons souvent une situation où la méthode du modèle est appelée plusieurs fois pour rendre les données au même modèle.
Supposons que nous ayons une liste de pagination, et chaque élément de données de la liste est rendu via un modèle. Lorsque l'utilisateur entre la page suivante, nous obtiendrons les données de la page suivante et renvoyez. En fait, le modèle est le même à chaque fois qu'il est rendu, mais tous les processus de traitement du modèle décrits tout à l'heure seront toujours exécutés.
En fait, la méthode du modèle de soulignement fournit un moyen plus efficace d'appeler. Nous modifions les deux dernières phrases dans le code ci-dessus pour:
// analyse le modèle, renvoie le contenu analysé var render = _.Template (tpl); var html = rendu (données); // remplit le contenu analysé à l'élément de rendu élément.html (html);
Vous trouverez une différence subtile: lorsque nous appelons la méthode du modèle, nous ne faisons passer que le contenu du modèle, mais pas les données. À l'heure actuelle, la méthode du modèle analyse le contenu du modèle, générera le code JavaScript exécutable analysé et renvoie une fonction, et le corps de fonction est le javascript analysé. Par conséquent, lorsque nous appelons cette fonction pour rendre les données, nous omettons l'action d'analyse du modèle.
Vous devez stocker la fonction retournée (tout comme je le stocke dans la variable de rendu), puis rendez les données en appelant la fonction, surtout si le même modèle peut être rendu plusieurs fois. Cela peut améliorer l'efficacité de l'exécution (l'amélioration spécifique devrait dépendre de la longueur et de la complexité de votre modèle, mais c'est une bonne habitude de toute façon).