Résumé des méthodes courantes de Underscore.js

Aperçu

Underscore.js est une bibliothèque très légère, seulement 4 Ko compressés. Il fournit des dizaines de méthodes de programmation fonctionnelles, ce qui facilite grandement la programmation Javascript. Le framework MVC backbone.js est basé sur cette bibliothèque.

Il définit un objet de trait de soulignement (_), et toutes les méthodes de la bibliothèque de fonctions appartiennent à cet objet. Ces méthodes peuvent être grossièrement divisées en cinq catégories : collection, tableau, fonction, objet et utilitaire.

Installer sous node.js

Underscore.js peut être utilisé non seulement dans les environnements de navigateur, mais également dans node.js. La commande d'installation est la suivante :

Copier le code Le code est le suivant :

npm installer le trait de soulignement

Cependant, node.js ne peut pas utiliser directement _ comme nom de variable, utilisez donc underscore.js dans la méthode suivante.

Copier le code Le code est le suivant :

var u = require("underscore");

Méthodes liées aux collections

La collecte de données en langage Javascript comprend deux structures : les tableaux et les objets. Les méthodes suivantes s'appliquent aux deux structures.

carte

Cette méthode effectue tour à tour certaines opérations sur chaque membre de la collection et stocke la valeur renvoyée dans un nouveau tableau.

Copier le code Le code est le suivant :

_.map([1, 2, 3], function(num){ return num * 3; }); // [3, 6, 9] _.map({un : 1, deux : 2, trois : 3 }, function(num, key){ return num * 3; }); // [3, 6, 9]

chacun

Cette méthode est similaire à map, qui effectue tour à tour certaines opérations sur chaque membre de la collection, mais ne renvoie pas de valeur.

Copier le code Le code est le suivant :

_.each([1, 2, 3], alerte); _.each({un : 1, deux : 2, trois : 3}, alerte);

réduire

Cette méthode effectue une sorte d'opération sur chaque membre de l'ensemble à tour de rôle, puis accumule les résultats de l'opération sur une certaine valeur initiale. Une fois toutes les opérations terminées, la valeur accumulée est renvoyée.

Cette méthode accepte trois paramètres. Le premier paramètre est la collection en cours de traitement, le deuxième paramètre est la fonction qui opère sur chaque membre et le troisième paramètre est la variable utilisée pour l'accumulation.

_.reduce([1, 2, 3], function(memo, num){ return memo num; }, 0); Le deuxième paramètre de la méthode de réduction est la fonction d'opération, qui accepte elle-même deux paramètres. Le premier est la variable utilisée pour l'accumulation et le second est la valeur de chaque membre de l'ensemble.

filtrer et rejeter

La méthode de filtrage effectue tour à tour certaines opérations sur chaque membre de la collection et renvoie uniquement les membres dont le résultat de l'opération est vrai.

Copier le code Le code est le suivant :

_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

La méthode de rejet renvoie uniquement les membres dont le résultat de l'opération est faux.

Copier le code Le code est le suivant :

_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

de tous et de certains

La méthode each effectue une opération sur chaque membre de la collection à tour de rôle. Si les résultats de l'opération de tous les membres sont vrais, elle renvoie vrai, sinon elle renvoie faux.

Copier le code Le code est le suivant : _.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // false

Certaines méthodes renvoient vrai tant que le résultat de l'opération d'un membre est vrai, sinon elles renvoient faux. 

Copier le code Le code est le suivant : _.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // true

trouver

Cette méthode effectue une opération sur chaque membre de la collection tour à tour et renvoie le premier membre dont le résultat de l'opération est vrai. Si le résultat de l'opération de tous les membres est faux, undefined est renvoyé.

Copier le code Le code est le suivant :

_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // 2

contient

Si une valeur est dans la collection, cette méthode renvoie vrai, sinon elle renvoie faux.

Copier le code Le code est le suivant :

_.contains([1, 2, 3], 3); // vrai

countBy

Cette méthode effectue une sorte d'opération sur chaque membre de l'ensemble à tour de rôle, compte les membres avec les mêmes résultats d'opération comme une catégorie et renvoie enfin un objet indiquant le nombre de membres correspondant à chaque résultat d'opération.

Copier le code Le code est le suivant :

_.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'pair' : 'impair'; }); // {impair : 3, pair : 2 >

mélanger

Cette méthode renvoie une collection mélangée.

Copier le code Le code est le suivant :

_.shuffle([1, 2, 3, 4, 5, 6]); // [4, 1, 6, 3, 5, 2]

taille

Cette méthode renvoie le nombre de membres de la collection.

Copier le code Le code est le suivant :

_.size({un : 1, deux : 2, trois : 3}); // 3

Méthodes liées aux objets

versArray

Cette méthode convertit l'objet en tableau.

Copier le code Le code est le suivant :

_.toArray({a:0,b:1,c:2}); // [0, 1, 2]

arracher

Cette méthode extrait la valeur d'un certain attribut de plusieurs objets dans un tableau.

Copier le code Le code est le suivant :

var comparses = [{nom : 'moe', âge : 40}, {nom : 'larry', âge : 50}, {nom : 'bouclé', âge : 60}]; ); // ["moe", "larry", "bouclé"]

Méthodes liées aux fonctions

lier

Cette méthode lie le contexte d'exécution de la fonction et le renvoie en tant que nouvelle fonction.

Copier le code Le code est le suivant :

_.bind(fonction, objet, [*arguments])

Veuillez consulter l'exemple ci-dessous.

Copier le code Le code est le suivant :

var o = { p : 2, m : function (){console.log(p);} }; o.m() // 2 _.bind(o.m,{p:1})() // 1

bindAll

Cette méthode lie toutes les méthodes d'un objet (sauf indication contraire) à l'objet.

Copier le code Le code est le suivant :

var boutonView = { label : 'underscore', onClick : function(){ alert('clicked : ' this.label }, onHover : function(){ console.log('hovering : ' this.label ); ; _.bindAll(buttonView);

partiel

Cette méthode de liaison lie une fonction à des paramètres, puis la renvoie en tant que nouvelle fonction.

Copier le code Le code est le suivant :

var add = function(a, b) { return a b; }; add5 = _.partial(add, 5); // 15

mémoriser

Cette méthode met en cache les résultats d'exécution d'une fonction pour un certain paramètre.

Copier le code Le code est le suivant :

var fibonacci = _.memoize(function(n) { return n < 2 ? n : fibonacci(n - 1) fibonacci(n - 2); });

Si une fonction a plusieurs paramètres, une hashFunction doit être fournie pour générer une valeur de hachage qui identifie le cache.

retard

Cette méthode peut reporter l'exécution de la fonction pendant une durée spécifiée.

Copier le code Le code est le suivant :

var log = _.bind(console.log, console); _.delay(log, 1000, 'loggé plus tard'); // 'loggé plus tard'

différer

Cette méthode peut reporter l'exécution de la fonction jusqu'à ce que le nombre de tâches à exécuter atteigne 0, similaire à l'effet de setTimeout retardant l'exécution de 0 seconde.

Copier le code Le code est le suivant :

_.defer(function(){ alert('deferred'); });

accélérateur

Cette méthode renvoie une nouvelle version de la fonction. Lors de l'appel continu de cette nouvelle version de la fonction, vous devez attendre un certain temps avant de déclencher l'exécution suivante.

Copier le code Le code est le suivant :

// Renvoie la nouvelle version de la fonction updatePosition var throttled = _.throttle(updatePosition, 100); // La nouvelle version de la fonction ne sera déclenchée que toutes les 100 millisecondes $(window).scroll(throttled);

anti-rebond

Cette méthode renvoie également une nouvelle version d'une fonction. Chaque fois que cette nouvelle version de la fonction est appelée, il doit y avoir un certain temps entre l'appel précédent, sinon elle sera invalide. Son application typique est d'empêcher les utilisateurs de double-cliquer sur un bouton, ce qui entraînerait la soumission du formulaire deux fois.

Copier le code Le code est le suivant :

$("button").on("click", _.debounce(submitForm, 1000));

une fois

Cette méthode renvoie une nouvelle version de la fonction afin que cette fonction ne puisse être exécutée qu'une seule fois. Principalement utilisé pour l'initialisation d'objets.

Copier le code Le code est le suivant :

var initialize = _.once(createApplication); initialize(); // L'application n'est créée qu'une seule fois

après

Cette méthode renvoie une nouvelle version de la fonction. Cette fonction ne s'exécutera qu'après avoir été appelée un certain nombre de fois. Elle est principalement utilisée pour confirmer qu'un ensemble d'opérations est terminé avant de réagir.

Copier le code Le code est le suivant :

var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }); // Une fois toutes les notes enregistrées, renderNote Ce sera le cas. ne courir qu'une seule fois

enveloppement

Cette méthode prend une fonction comme paramètre, la passe dans une autre fonction et renvoie finalement une nouvelle version de la première.

Copier le code Le code est le suivant :

var bonjour = function(nom) { return "bonjour : " nom ; bonjour = _.wrap(bonjour, fonction(func) { return "avant, " func("moe") ", après"; }); (); // 'avant, bonjour : moe, après'

composer

Cette méthode accepte une série de fonctions comme paramètres et les exécute dans l'ordre de l'arrière vers l'avant. Le résultat de l'exécution de la fonction précédente est utilisé comme paramètre d'exécution de la fonction suivante. En d’autres termes, convertissez la forme de f(g(),h()) en f(g(h())).

Copier le code Le code est le suivant :

var greet = function(name){ return "hi:" name; }; var exclamment = function(statement){ return Statement "!" var Welcome = _.compose(exclaim, greet); ); // 'salut : moe !'

Méthodes d'outils

modèle

Cette méthode est utilisée pour compiler des modèles HTML. Il accepte trois paramètres.

Copier le code Le code est le suivant :

_.template(templateString, [données], [paramètres])

Les significations des trois paramètres sont les suivantes :

templateString : chaîne de modèle
data : saisir les données du modèle
paramètres : paramètres

templateString

La chaîne de modèle templateString est un langage HTML ordinaire, dans lequel les variables sont insérées sous la forme <%= ... %>; l'objet de données est chargé de fournir la valeur de la variable.

Copier le code Le code est le suivant :

var txt = "

<%= mot %>

Copier le code Le code est le suivant :

"; _.template(txt, {word : "Hello World"}) // "

Bonjour tout le monde

Copier le code Le code est le suivant :

Si la valeur de la variable contient cinq caractères spéciaux (& < > ” ‘ /), elle doit être échappée avec <%- … %>.

Copier le code Le code est le suivant :

var txt = "

<%- mot %>

Copier le code Le code est le suivant :

"; _.template(txt, {word : "H&W"}) //

H&F

Les commandes JavaScript peuvent être insérées sous la forme <% … %>. Ce qui suit est un exemple de déclaration de jugement.

Copier le code Le code est le suivant :

var txt = "<% var i = 0; if (i<1){ %>" "<%= mot %>" "<% } %>"; mot : "Bonjour tout le monde"}) // Bonjour tout le monde

Les utilisations courantes incluent les instructions de boucle.

Copier le code Le code est le suivant :

var list = "<% _.each(personnes, fonction(nom) { %>

<%= nom %> <% }); %> »; _.template(list, {people : ['moe', 'curly', 'larry']}); moé
frisé
Larry"
Si la méthode modèle n'a que le premier paramètre templateString et omet le deuxième paramètre, une fonction sera renvoyée et des données pourront être saisies dans cette fonction à l'avenir.

Copier le code Le code est le suivant :

var t1 = _.template("Bonjour <%=user%>!"); t1({ user: "" }) // 'Bonjour !'

données

Toutes les variables de templateString sont des attributs internes de l'objet obj, et l'objet obj fait référence au deuxième objet de données de paramètre. Les deux affirmations suivantes sont équivalentes.

Copier le code Le code est le suivant :

_.template("Bonjour <%=user%>!", { utilisateur : "" }) _.template("Bonjour <%=obj.user%>!", { utilisateur : "" }) 

Si vous souhaitez modifier le nom de l'objet obj, vous devez le définir dans le troisième paramètre.

Copier le code Le code est le suivant :

_.template("<%if (data.title) { %>Titre : <%= titre %><% } %>", null,        { variable : "data" });

Étant donné que le modèle utilise l'instruction with en interne lors du remplacement de variables, l'approche ci-dessus s'exécutera plus rapidement.

Résumé des méthodes courantes de Underscore.js_Others