Commencer par souligner.js

Les plats clés

• souligner.js est une bibliothèque JavaScript qui fournit des utilitaires fonctionnels pour une variété de cas d'utilisation, ce qui rend le code plus facile à lire et à écrire, et offrir des fonctionnalités non toujours disponibles dans JavaScript natif.
• La bibliothèque comprend des méthodes communes telles que _.each () pour écrire des boucles lisibles, _.Template () pour les modèles intuitifs et simples, et _.filter () pour le filtrage des tableaux à l'aide d'une fonction booléenne.
• souligner.js est léger et utilisé par de nombreux projets de grands noms, notamment USA Today, LinkedIn et Khan Academy.
• Une application de démonstration à l'aide de sous-ore.js, jQuery et l'API Web Spotify montre comment la bibliothèque peut être utilisée pour récupérer et afficher les données d'une API, et permet aux utilisateurs de filtrer les résultats.

Cet article a été révisé par des pairs par Agbonghama Collins et Ryan Chenkie. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

souligner.js est une bibliothèque JavaScript, écrite par Jeremy Ashkenas, qui fournit des services publics fonctionnels pour une variété de cas d'utilisation que nous, en tant que développeurs, pouvons rencontrer lorsqu'ils sont confrontés à un projet Web.

cela rend le code qui est plus facile à lire:

_.isEmpty({});
// true

cela rend le code qui est plus facile à écrire:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

Il offre des fonctionnalités pour lesquelles il n'y a pas de méthode native 1: 1:

_.range(5);
// [0, 1, 2, 3, 4]

Il peut même être utilisé comme moteur de modèle à part entière:

_.template('<p><%= text %></p>', {text: 'SitePoint Rocks!'});
// <p>SitePoint Rocks!</p>

souligner est une bibliothèque légère (seulement 5,7 Ko, minifiée et gzipied) et est utilisée par une variété de projets de grands noms, tels que:

• USA TODAY
• LinkedIn
• Khan Academy

Maintenant, soyons plus spécifiques et commençons à plonger dans ses principales capacités.

les bonnes parties

Dans ce tutoriel, je vais mettre en évidence trois des méthodes les plus courantes de l'outil de sous-trait:

• _. Chaque ()
• _. Template ()
• _. Filter ()

Je vais expliquer comment ils sont utilisés individuellement, puis les attacher ensemble pour créer une application de démonstration que vous pouvez trouver à la fin du tutoriel. Comme toujours, le code de cette démo est disponible sur github.

Si vous souhaitez suivre les exemples, vous devrez prendre une copie de la bibliothèque, par exemple à partir de votre CDN préféré:

<span><span><span><script</span> src<span>="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"</span>></span><span><span></script</span>></span>
</span>

Et si vous avez besoin d'aide en cours de route, ou si vous êtes juste curieux d'en savoir plus, n'oubliez pas que la documentation de l'outil de soulignement est vaste. Il a également une communauté importante et active, ce qui signifie que l'aide est facile à trouver.

_. Chacun: écrivez des boucles lisibles

Il n'y a pas un seul projet qui n'a pas quelque chose de similaire à cet extrait à un moment donné du code:

var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones'];

for(var i = 0; i < artists.length; i++) {
  console.log('artist: ' + artists[i]);
}

Contrôle vous permet d'écrire du code équivalent, en utilisant une syntaxe plus lisible:

_.isEmpty({});
// true

soigné, hein? _.each () prend deux paramètres:

• le tableau (ou objet) pour itérer.
• une fonction de rappel.

pour chaque élément de notre tableau _.each () invoquera la fonction de rappel (mentionnée dans la documentation itérere ). À l'intérieur du rappel, nous avons accès à trois autres paramètres:

• La valeur du tableau pour l'indice d'itération actuel (artiste). Par exemple, pour l'extrait ci-dessus, nous obtiendrions "Pharrel Williams" pour la première itération.
• Le nombre de l'itération actuelle (index), qui dans notre cas variera de 0 à 2.
• le tableau que nous itérons (artistes).

Comme vous pouvez le voir, le code est plus lisible et nous pouvons accéder aux éléments individuels du tableau sans avoir besoin d'artistes [i], comme nous l'avons vu dans l'exemple qui a utilisé A pour Loop.

Voir le stylo _.Each par SitePoint (@SitePoint) sur Codepen.

Ensuite, nous verrons comment le moteur de modèles se comporte.

_. Template (): intuitif et simple

Depuis la montée en puissance de l'application à une seule page, avoir un moteur de modèles de frontend fiable est devenu un besoin fondamental de notre pile de travail.

souligner fournit un moteur de modèles qui, pour ceux qui connaissent des langues tels que PHP ou Ruby on Rails, semblera assez familière.

Continue à partir de notre extrait précédent, nous montrerons comment fonctionne _.Template (). Nous le ferons en ajoutant quelques lignes à notre code comme indiqué ci-dessous:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

Ici, nous invoquons la fonction _.template () avec un argument de chaîne, qui comprend certaines données à l'intérieur de délimiteurs (). Lorsqu'il est invoqué de cette manière, _.Template () renvoie une fonction que nous pouvons utiliser encore et encore.

Nous pouvons invoquer notre nouvelle fonction à l'aide d'artisteTemplate (), en le faisant passer un objet littéral comme argument. Cela renverra la chaîne que nous avons initialement transmise à _.Template (), en remplaçant les propriétés d'objet qui correspondent aux variables libres du modèle. Dans notre cas, sera remplacé par la valeur de l'attribut d'artiste de l'objet.

Le moteur de modèles de soulignement ne permet pas seulement de remplacer les valeurs uniques, mais aussi l'exécution des scripts à l'intérieur du modèle lui-même. Avec une seule modification, nous pouvons rendre notre extrait encore plus puissant.

_.range(5);
// [0, 1, 2, 3, 4]

Nous avons incorporé notre appel à _.each () dans la chaîne qui représente notre modèle, ce qui nous amène à modifier la façon dont le modèle est invoqué. Puisque nous itérons maintenant à l'intérieur de la fonction _.template (), nous pouvons passer le tableau complet des artistes à artisteTemplate () (auparavant nous passions les artistes individuels). La sortie de ce code sera la même que dans l'exemple précédent.

Lorsque nous voulons que _.Template () évalue le code JavaScript, nous devons simplement entourer notre code entre au lieu de .

Depuis que l'appel d'un modèle généré par _.emplate fonctionne tout aussi invoquant une fonction, nous pouvons aller plus loin notre extrait et avoir un modèle appelé à l'intérieur d'un autre, en utilisant les balises . De cette façon, nous pouvons fabriquer des modèles réutilisables, car nous pouvons avoir un modèle de wrapper différent pour notre liste d'artistes et simplement invoquer le modèle pour chacun des éléments qu'il contient.

Voir le Pen _.Template () par SitePoint (@SitePoint) sur Codepen.

Enfin, jetons un coup d'œil à la fonction _.filter ().

_. Filter (): Tout ce dont vous avez besoin est une fonction booléenne

_. Filter () reçoit un tableau et une fonction de rappel comme arguments. Il invoque ensuite la fonction pour chacun des éléments du tableau et renvoie un nouveau tableau contenant les éléments pour lesquels la fonction évaluée à quelque chose de vraie.

Notre fonction de rappel recevra également trois arguments, comme dans le cas _.each (): l'élément du tableau correspondant à l'indice d'itération actuel, l'indice de l'itération et le tableau lui-même.

Pour clarifier cela, apportons quelques modifications à notre extrait.

_.isEmpty({});
// true

Comme vous l'avez peut-être deviné, dans notre modèle, nous recevrons ['ACDC'] comme argument du tableau. Voici une démo de ce que nous avons jusqu'à présent.

Voir le stylo _.filter () par SitePoint (@SitePoint) sur Codepen.

Assez dit. Faisons des choses en fonction des choses pour quelque chose qui a un peu plus de sens.

notre application de démonstration

N'oubliez pas, le code de cette démo est disponible sur github.

Nous allons créer une petite application qui consomme une API, affiche les informations obtenues et permet à l'utilisateur de filtrer ce qui est affiché. À cette fin, nous utiliserons:

• souligner.js
• jQuery
• L'API Web Spotify

Plus précisément, l'application rapportera certaines informations d'artistes à partir de Spotify et en utilisant le sous-effort _.emplate, _.each et _.filter, nous l'afficherons sur la page et permettre à l'utilisateur de rétrécir les résultats par genre.

Pour ce faire, nous diviserons notre code en trois modules différents:

• _isawesome.config: détient les informations que nous utiliserons sur l'application.
• _isawesome.emplate: prend soin de la compilation de modèle.
• _isawesome: il s'agit du module principal qui est responsable de la réponse aux actions des utilisateurs et de la mise à jour de l'interface utilisateur.

tous suivent le motif du module.

module de configuration

Le module de configuration contient les ID des modèles à utiliser, ainsi que l'URL de l'API que nous interrogerons, ainsi que les ID des artistes que nous voulons obtenir de Spotify. De cette façon, nous pouvons ajouter plus d'artistes en ajoutant simplement d'autres éléments au tableau.

Module de modèle

Ce module est celui en charge de la compilation des modèles, en appelant getTemplates () dans le module de configuration.

Module principal

Ce module est responsable de l'envoi de la demande AJAX à l'URL que nous obtenons du module de configuration et de la création du contenu à l'aide des modèles du module de modèle.

En plus de cela, ce module s'occupe également de filtrer les éléments en fonction du filtre cliqué par l'utilisateur.

Les filtres et nos modèles sont inclus dans le cadre du HTML.

Pour implémenter le filtrage, nous nous appuyerons sur les attributs de données HTML 5 et l'interface de données de JQuery. C'est plus une question de commodité, mais si vous souhaitez le faire nativement, le support du navigateur est très bon.

Il s'agit du balisage des boutons que nous utiliserons pour effectuer le filtrage:

_.isEmpty({});
// true

Ceci est un exemple d'objet que nous passerons à notre fonction de filtre:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

Nous aurons le HTML pour nos modèles dans le cadre de notre index.html, à l'intérieur d'une balise , que nous empêchons d'être exécutés en définissant son type sur quelque chose de différent de la texte / javascript habituel. Juste dans le souci de cohérence, nous le définirons sur souligner / modèle.

Nous aurons deux modèles. Le premier contiendra la liste des artistes, tandis que la seconde contiendra les artistes individuels à afficher. Comme nous l'avons vu ci-dessus, nous utiliserons ce que nous appelons modèles intégrés . Nous invoquerons un modèle ('item-tpl') à partir d'un autre ('item-list').

Ensuite, au bas du fichier, nous inclurons nos bibliothèques et nos trois scripts. De plus, juste pour le rendre plus visuellement attrayant, nous aurons quelques styles de base dans l'en-tête.

et c'est tout.

Voir le stylo soulignement génial par SitePoint (@SitePoint) sur Codepen.

Conclusion

souligner est une joie de travailler avec et, comme je l'ai démontré, il vous permet d'écrire du code propre, lisible et facile à maintenir.

Il y a quelques autres choses que nous aurions pu ajouter à notre application (par exemple, avoir nos filtres générés dynamiquement en utilisant _.Pluck ()), mais je pense que nous en avons assez pour commencer.

Et vous? Avez-vous travaillé avec un soulignement? Seriez-vous prêt à essayer? Avez-vous essayé une alternative (c'est-à-dire Lodash) qui offre des capacités similaires? Faites-moi savoir dans les commentaires ci-dessous.

Les questions fréquemment posées (FAQ) sur l'abandon.js

Quel est le principal objectif de sous-traitant.js?

soulignement.js est une bibliothèque JavaScript qui fournit un ensemble de fonctions d'utilité utiles pour les tâches de programmation courantes. Il est conçu pour être un complément des fonctions intégrées en JavaScript, offrant des fonctionnalités supplémentaires et améliorant la productivité. Il offre plus de 100 fonctions, y compris celles qui traitent des tableaux, des objets, des fonctions, etc. Ces fonctions aident à manipuler des données et des objets d'une manière plus efficace et simple, ce qui en fait un outil précieux pour les développeurs.

Comment puis-je commencer avec sous-ore.js?

Pour commencer avec Sous-sachet.js, vous devez d'abord l'inclure dans votre projet. Vous pouvez le faire en téléchargeant la bibliothèque à partir du site officiel et en le liant dans votre fichier HTML, ou en utilisant un CDN. Une fois qu'il est inclus dans votre projet, vous pouvez commencer à utiliser ses fonctions en les appelant avec le caractère de sous-ore (_) suivi du nom de la fonction.

Quelles sont les fonctions les plus utiles de sous-sol.js?

sous-traitant.js offre une large gamme de fonctions, mais certaines des plus utiles incluent:

1. _.Each: Cette fonction vous permet d'itérer sur les éléments d'un tableau ou d'un objet.

1. _.map: cette fonction crée un nouveau tableau en transformant chaque élément d'un tableau ou d'un objet en utilisant une fonction.

1. _. _.find: Cette fonction renvoie le premier élément qui passe un test de vérité.

1. _. Oui, sous-cite.js est conçu pour être compatible avec d'autres bibliothèques JavaScript. Il n'étend pas d'objets JavaScript intégrés, il ne sera donc pas en conflit avec d'autres bibliothèques ou scripts en cours d'exécution sur votre page.

est-ce que souligne.js est toujours maintenu et mis à jour?

Oui , Souligner.js est activement maintenu et régulièrement mis à jour. La bibliothèque est open-source, ce qui signifie que les développeurs du monde entier contribuent à son développement et à son amélioration.

Comment souligner. Et Lodash offre des fonctionnalités similaires, mais il existe des différences. Lodash est un superset de souligner.js, ce qui signifie qu'il comprend toutes les fonctionnalités de sous-traitants.js et plus encore. Cependant, souligner.js est plus petit et plus léger, ce qui en fait un bon choix pour les projets où la performance est une préoccupation.

Puis-je utiliser sous-sol.js dans un environnement Node.js?

Oui, oui, Sous-sachet.js peut être utilisé dans un environnement Node.js. Vous pouvez l'installer à l'aide de NPM, le gestionnaire de package Node.js, en exécutant la commande ‘NPM install soubore’.

Qu'est-ce que le «soulignement» dans sous-traitant.js?

Le «soulignement» dans sous-traitant.js fait référence au caractère (_) qui est utilisé pour appeler les fonctions de la bibliothèque. Il s'agit d'une convention en JavaScript d'utiliser le caractère de soulignement pour les bibliothèques de services publics.

Puis-je contribuer au développement de sous-ore.js?

Oui, puisque souligner.js est un projet open-source, Tout le monde peut contribuer à son développement. Vous pouvez soumettre des rapports de bogues, suggérer de nouvelles fonctionnalités ou même contribuer de code.

Où puis-je en savoir plus sur souligner.js?

Il existe de nombreuses ressources disponibles pour en savoir plus sur souligner.js. Le site officiel fournit une documentation complète et il existe de nombreux tutoriels et articles disponibles en ligne. De plus, il y a plusieurs livres et cours en ligne qui couvrent souligner.js en profondeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!