Share
Alors que JavaScript quitte lentement le navigateur, plusieurs outils sont apparus qui améliorent considérablement la robustesse de JavaScript..
Un de ces outils s'appelle Underscore.js et c'est ce que nous allons examiner aujourd'hui. Commençons!
Alors, que fait exactement Underscore??
Underscore est une bibliothèque de ceinture d’utilitaires pour JavaScript qui fournit une grande partie de la prise en charge fonctionnelle de la programmation que vous attendez dans Prototype.js (ou Ruby), mais sans étendre les objets JavaScript intégrés..
Une des choses les plus agréables à propos de travailler en Python ou en Ruby sont les constructions fantaisistes comme carte cela rend la vie beaucoup plus facile. Malheureusement, la version actuelle de JavaScript est relativement simple en ce qui concerne les utilitaires de bas niveau..
Comme vous l'avez lu ci-dessus, Underscore.js est une petite bibliothèque JavaScript astucieuse qui apporte une quantité ridicule de fonctionnalités à seulement 4 Ko..
"Assez jappé à propos de la bibliothèque", je vous entends dire. Tu as raison! Jetons un coup d'œil à Underscore en action avant de reprendre mes jappements.
Supposons que vous avez un tableau aléatoire de scores au test et que vous avez besoin d'une liste de ceux dont le score est supérieur à 90. Vous écriviez habituellement quelque chose comme ceci:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; pour (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (scores [i]); console.log (topScorers);
C'est assez simple et même avec l'optimisation, c'est assez bavard pour ce que nous essayons de faire.
Regardons ce que nous pouvons réaliser avec Underscore Next.
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (scores, fonction (score) résultat de retour> scoreLimit;); console.log (topScorers);
Je ne sais pas pour vous mais je viens d'avoir un nerdgasm. C'est quelque chose d'incroyablement concis et code lisible là.
Tout dépend de ce que vous essayez de faire. Si votre utilisation de JavaScript se limite à jouer avec le DOM, la réponse est généralement non, car jQuery fait la plupart de ce que vous souhaitez faire..
Oui.
D'autre part, si vous avez affaire à du code non DOM ou même complexe, pensez à MVC, code frontal, Underscore est une aubaine absolue..
Bien que certaines des fonctionnalités exposées par la bibliothèque soient progressivement intégrées aux spécifications ECMA, elles ne sont pas disponibles dans tous les navigateurs et faire fonctionner votre code dans plusieurs navigateurs est un autre cauchemar en soi. Underscore vous fournit un bel ensemble d'abstractions qui fonctionnent partout.
Et si vous êtes une personne axée sur la performance, comme vous devriez le faire, Underscore a recours à des implémentations natives, si elles sont disponibles, pour vous assurer que les performances sont aussi optimales que possible..
Il suffit de saisir la source ici, l'inclure dans votre page et vous êtes prêt à partir.
Si vous vous attendiez à un gros processus d'installation, vous allez être profondément déçu. Il suffit de saisir la source ici, l'inclure dans votre page et vous êtes prêt à partir.
Underscore crée et expose toutes ses fonctionnalités via un seul objet, de portée globale. Cet objet est le caractère de soulignement titulaire, _.
Si vous vous posez la question, oui, c'est assez similaire à la façon dont jQuery fonctionne avec le symbole dollar [$]. Et tout comme jQuery, vous pouvez remapper ce personnage en cas de conflit. Ou si vous êtes comme moi et avez un amour irrationnel pour le tilde.
Alors que le texte de présentation officiel de la bibliothèque sur le marketing indique qu’il ajoute un support de programmation fonctionnelle, il existe en réalité une autre façon de faire.
Prenons notre code précédent comme exemple:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (scores, fonction (score) résultat de retour> scoreLimit;); console.log (topScorers);
Cette méthode ci-dessus est l'approche fonctionnelle ou procédurale. Vous pouvez également utiliser une approche plus directe, probablement plus apparente, orientée objet..
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _ (scores) .select (fonction (score) score de retour> scoreLimit;); console.log (topScorers);
Il n'y a pas vraiment de "bonne" façon de faire les choses, mais gardez à l'esprit que vous pouvez enchaîner la méthode jQuery-esque avec cette dernière méthode.
Underscore fournit un peu plus de 60 fonctions qui couvrent un certain nombre de fonctionnalités. À la base, ils peuvent être classés en groupes de fonctions qui opèrent sur:
Voyons ce que chacun fait et, le cas échéant, un ou deux de mes favoris de chaque section.
Une collection peut être un tableau ou un objet, un tableau associé en JavaScript si je veux être sémantiquement correct.
Le soulignement fournit de nombreuses méthodes qui fonctionnent sur les collections. Nous avons vu le sélectionner méthode plus tôt. Voici quelques autres incroyablement utiles.
Supposons que vous disposiez d'un joli petit tableau contenant des paires clé-valeur et que vous souhaitiez extraire uniquement une propriété spécifique de chacune. Avec Underscore, c'est un jeu d'enfant.
var Tuts = [nom: 'NetTuts', niche: 'Développement Web', nom: 'WPTuts', niche: 'WordPress', nom: 'PSDTuts', niche: 'PhotoShop', nom: 'AeTuts', niche: 'After Effects']; var niches = _.pluck (Tuts, 'niche'); console.log (niches); // ["Développement Web", "WordPress", "PhotoShop", "After Effects"]
En utilisant cueillir est aussi simple que de transmettre l'objet ou le tableau cible ainsi que la propriété à sélectionner. Ici, je ne fais qu'extraire la niche de chaque site.
Map crée un tableau à partir d'une collection où chaque élément peut être muté ou modifié d'une autre manière via une fonction.
Prenons l'exemple précédent et étendons-le un peu.
Accentsconagua
var Tuts = [nom: 'NetTuts', niche: 'Développement Web', nom: 'WPTuts', niche: 'WordPress', nom: 'PSDTuts', niche: 'PhotoShop', nom: 'AeTuts', niche: 'After Effects']; var noms = _ (Tuts) .pluck ('nom'). map (fonction (valeur) valeur de retour + '+'); console.log (noms); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Depuis que j'ai remarqué que les noms manquaient le signe plus à la fin, je les ajoute dans le tableau extrait.
Vous n'êtes pas limité à la simple concaténation ici. Vous êtes libre de modifier la valeur transmise selon les désirs de votre coeur.
tout est utile si vous devez vérifier que chaque valeur d'une collection passe certains critères. Pour vérifier si un élève a réussi dans toutes les matières, par exemple.
var Scores = [95, 82, 98, 78, 65]; var hasPassed = _ (Scores) .all (function (valeur) valeur de retour> 50;); console.log (hasPassed); // vrai
Underscore a un tas de fonctions qui fonctionnent exclusivement sur des tableaux, ce qui est très bienvenu car, comparé à d’autres langages, JavaScript fournit très peu de méthodes traitant des tableaux..
Cette méthode analyse en principe un tableau et supprime tous les éléments en double en vous fournissant uniquement des éléments uniques..
var uniqTest = _.uniq ([1,5,4,4,5,2,1,1,3,2,2,3,4,1]); console.log (uniqTest); // [1, 5, 4, 2, 3]
Cela s'avère extrêmement pratique lorsque vous analysez d'énormes jeux de données et que vous devez éliminer les doublons. Gardez à l'esprit que seule la première instance d'un élément est comptée, l'ordre d'origine est donc conservé..
Une méthode extrêmement pratique qui vous permet de créer une "plage" ou une liste de nombres. Regardons un exemple super rapide.
var tens = _.range (0, 100, 10); console.log (dizaines); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
Les paramètres de la méthode sont, dans l'ordre, la valeur de départ, la valeur de fin et la valeur de pas. Si vous vous demandez, l'utilisation d'une valeur de pas négative conduit à une plage de décrémentation.
Cette méthode compare deux tableaux l'un à l'autre et renvoie la liste des éléments trouvés dans tous les tableaux passés, c'est-à-dire une intersection dans la théorie des ensembles..
Étendons l'exemple précédent pour voir comment cela fonctionne..
var tens = _.range (0, 100, 10), eights = _.range (0, 100, 8), fives = _.range (0, 100, 5); var common = _.intersection (dizaines, huit, cinq); console.log (commun); // [0, 40, 80]
Facile, non? Vous venez de passer dans la liste des tableaux à comparer et Underscore fait le reste.
En plus de l'attente assez attendue est
Voici quelques un de mes préférés.
Vous avez un objet massif dont vous n'avez besoin que des clés ou des valeurs? C'est tellement facile avec Underscore.
var Tuts = NetTuts: 'Développement Web', WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; var clés = _.keys (Tuts), valeurs = _.values (Tuts); console.log (clés + valeurs); // NetTuts, WPTuts, PSDTuts, Développement AeTutsWeb, WordPress, PhotoShop, After Effects
Cette méthode est très utile lorsque vous devez créer des objets avec des valeurs par défaut sensibles, alors que vous ne pouvez pas en utiliser lors de la création..
var tuts = NetTuts: 'Développement Web'; var defaults = NetTuts: 'Développement Web', niche: 'Education'; _.defaults (tuts, default); console.log (tuts); // Object NetTuts = "Développement Web", niche = "Éducation"
Aussi bizarre que cela puisse paraître, Underscore a des fonctions qui fonctionnent sur les fonctions. La plupart des fonctions ont tendance à être assez compliquées à expliquer ici, nous allons donc regarder les plus simples.
ce est une partie insaisissable de JavaScript et a tendance à laisser beaucoup de développeurs vraiment confus. Cette méthode vise à le rendre un peu plus facile à aborder.
var o = greeting: "Howdy", f = function (name) renvoie this.greeting + "" + name; ; var salut = _.bind (f, o); saluer ("Jess") C'est un peu déroutant alors restez avec moi ici. La fonction bind vous permet essentiellement de conserver la valeur de ce quand et où la fonction est appelée.
Ceci est particulièrement utile lorsque vous travaillez avec des gestionnaires d'événements où ce est détourné.
Et pour adoucir davantage l'accord, Underscore fournit une tonne de fonctions utilitaires. Puisque nous n’avons presque plus de temps, jetons un coup d’œil au gros.
Il existe déjà une tonne de solutions basées sur des modèles, mais Underscore rend sa solution digne d'intérêt en étant assez petite dans sa mise en œuvre tout en étant assez puissante..
Prenons un exemple rapide.
var data = site: 'NetTuts', template = 'Bienvenue! Tu es a <%= site %>'; var parsedTemplate = _.template (template, data); console.log (parsedTemplate); // Bienvenue! Vous êtes chez NetTuts
Tout d'abord, nous créons les données pour renseigner le modèle, suivi du modèle lui-même. Par défaut, Underscore utilise des délimiteurs de style ERB bien que ceux-ci soient entièrement personnalisables..
Avec ceux en place, nous pouvons simplement appeler le modèle en passant dans notre modèle et les données. Nous stockons le résultat dans une chaîne distincte à utiliser ultérieurement pour mettre à jour le contenu, si nécessaire.
Gardez à l'esprit qu'il s'agit d'une démonstration extrêmement simple de la création de modèles par Underscore. Vous pouvez trouver n’importe quel code JavaScript dans le modèle en utilisant le les délimiteurs. Lorsque vous devez parcourir des objets complexes, par exemple des sources JSON, vous pouvez vous associer aux excellentes fonctions de collection d’Underscore pour créer rapidement des modèles..
jQuery et Underscore vont de pair.
Non, non, vous avez tout faux! En fait, jQuery et Underscore se complètent bien et vont de pair. Vraiment!
Vous voyez, jQuery fait extrêmement bien certaines choses. La manipulation et l'animation DOM sont les principales parmi celles-ci. Il ne traite de rien dans les niveaux supérieurs ou inférieurs. Si des frameworks tels que Backbone ou Knockout traitent les problèmes de haut niveau, Underscore s'attaque à tous les problèmes relativement simples..
Pour encore plus de perspectives, jQuery n’a guère d’intérêt en dehors du navigateur, car l’essentiel de ses fonctionnalités concerne le DOM. Le soulignement, en revanche, peut être utilisé sans problème sur le navigateur ou sur le serveur. En fait, Underscore a le plus grand nombre de modules de nœuds qui en dépendent.
Eh bien, c'est à peu près tout pour aujourd'hui. Compte tenu de la portée de Underscore, nous n’avons pratiquement pas encore gratifié la surface. Assurez-vous de vérifier plus de la bibliothèque et laissez-moi savoir si vous avez des questions dans les commentaires ci-dessous. Merci beaucoup pour la lecture!
