Embrassez la chaleur d'Underscore.js

À mesure que JavaScript quitte lentement les navigateurs, il existe des outils qui peuvent améliorer considérablement la robustesse de JavaScript.

L'un de ces outils s'appelle Underscore.js, et c'est l'outil que nous allons présenter aujourd'hui. Commençons !

---

Rencontrez Underscore.js

Alors, que fait exactement Underscore ?

Underscore est une bibliothèque d'utilitaires JavaScript qui fournit une grande partie de la prise en charge de la programmation fonctionnelle que vous attendez dans Prototype.js (ou Ruby), mais sans étendre aucun des objets JavaScript intégrés.

块引用>

L'un des avantages de travailler avec Python ou Ruby réside dans les constructions sophistiquées comme map qui rendent la vie tellement plus facile. Malheureusement, la version actuelle de JavaScript est assez rudimentaire en termes d'utilitaires de bas niveau.

Comme vous l'avez lu ci-dessus, Underscore.js est une belle petite bibliothèque JavaScript qui apporte une quantité incroyable de fonctionnalités à seulement 4 Ko.

---

Application pratique du soulignement

« Assez de conneries sur les bibliothèques », je vous entends dire. tu as raison! Avant de continuer mon diatribe, voyons Underscore en action.

Supposons que vous disposiez d'un ensemble aléatoire de résultats de tests et que vous ayez besoin d'une liste contenant plus de 90 résultats. Vous écririez habituellement quelque chose comme ceci :

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

for (i=0; i<=scores.length; i++)
{
	if (scores[i]>scoreLimit)
	{
		topScorers.push(scores[i]);
	}
}

console.log(topScorers);

C'est très simple, et même avec des optimisations, assez verbeux sur ce que l'on veut faire.

Voyons ce que nous pouvons réaliser ensuite avec Underscore.

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

Je ne sais pas pour vous, mais je suis juste un peu ringard. Il s'agit d'un code incroyablement concis et lisible.

---

Super, mais en ai-je vraiment besoin ?

Eh bien, tout dépend de ce que vous voulez faire. Si votre utilisation de JavaScript se limite à jouer avec le DOM, la réponse est généralement non, puisque jQuery peut faire la plupart de ce que vous voulez faire.

Oui.

D'un autre côté, si vous avez affaire à du code non-DOM ou même à du code complexe, pensez MVC, code front-end, Underscore est définitivement une aubaine.

Bien que certaines fonctionnalités exposées par cette bibliothèque fassent lentement leur chemin dans la spécification ECMA, elles ne sont pas disponibles dans tous les navigateurs, et faire fonctionner votre code sur tous les navigateurs est un autre cauchemar en soi. Underscore vous offre un bel ensemble d'abstractions qui peuvent être utilisées n'importe où.

Si vous êtes une personne axée sur la performance (et vous devriez l'être), Underscore reviendra à l'implémentation native (si disponible) pour garantir les meilleures performances possibles.

---

Commencer

Récupérez simplement le code source ici et incluez-le dans votre page.

Si vous vous attendez à un processus d’installation important, vous serez profondément déçu. Récupérez simplement le code source ici et incluez-le dans votre page.

Underscore est créé globalement via un seul objet et expose toutes ses fonctionnalités. L'objet est le caractère de soulignement du titre _.

Au cas où vous vous poseriez la question, oui, cela ressemble beaucoup à la façon dont jQuery utilise le signe dollar [$]. Tout comme jQuery, vous pouvez remapper ce personnage en cas de conflit. Ou si vous êtes comme moi et que vous avez un amour irrationnel pour le tilde.

---

Fonctionnel ou orienté objet ?

Bien que le marketing officiel de la bibliothèque prétende qu'elle ajoute un support de programmation fonctionnel, il existe en fait une autre façon de faire les choses.

Prenons comme exemple le code précédent :

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

Les méthodes ci-dessus sont des méthodes fonctionnelles ou procédurales. Vous pouvez également utiliser une approche orientée objet plus directe et peut-être plus évidente.

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _(scores).select(function(score){ return score > scoreLimit;});

console.log(topScorers);

Il n'y a pas de véritable « bonne » façon de faire les choses, mais gardez à l'esprit que vous pouvez enchaîner des méthodes de style jQuery en utilisant cette dernière méthode.

---

Fonction de vérification

Underscore fournit plus de 60 fonctions couvrant une variété de fonctions. Essentiellement, elles peuvent être divisées en groupes de fonctions, qui s'exécutent sur :

• Collection
• Tableau
• Objet
• Fonction
• Utilitaires

Regardons ce que fait chaque partie et, le cas échéant, ma ou deux préférées de chacune.

---

Collection

Une collection peut être un tableau ou un objet, ou un tableau associatif en JavaScript si je suis sémantiquement correct.

Underscore fournit de nombreuses méthodes pour opérer sur les collections. Nous avons vu la méthode select plus tôt. En voici quelques autres très utiles.

Choix

Supposons que vous ayez un joli petit tableau de paires clé-valeur et que vous souhaitiez extraire une propriété spécifique de chaque tableau. Avec Underscore, c'est un jeu d'enfant.

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
var niches = _.pluck(Tuts, 'niche');

console.log(niches);

// ["Web Development", "WordPress", "PhotoShop", "After Effects"]

Utiliser pluck est aussi simple que de transmettre l'objet ou le tableau cible et de sélectionner la propriété à utiliser. Ici, j'extrait simplement la niche de chaque site Web.

Carte

Map crée un tableau à partir d'une collection, où chaque élément peut être muté ou modifié par une fonction.

让我们以前面的示例为例并对其进行一些扩展。

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];

var names = _(Tuts).pluck('name').map(function (value){return value + '+'});

console.log(names);

// ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"]

由于我注意到名称末尾缺少加号，因此我将它们添加到提取的数组中。

这里您不仅限于简单的串联。您可以根据自己的意愿随意修改传递的值。

全部

all 如果您需要检查集合中的每个值是否满足特定条件，则非常有用。例如，检查学生是否通过了每个科目。

var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true

---

数组

Underscore 有很多专门处理数组的函数，这是非常受欢迎的，因为与其他语言相比，JavaScript 提供的处理数组的方法非常少。

Uniq

此方法基本上解析数组并删除所有重复元素，只为您提供唯一元素。

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]

当您解析巨大的数据集并需要清除重复项时，这非常方便。请记住，仅计算元素的第一个实例，因此保留原始顺序。

范围

一种非常方便的方法，可让您创建“范围”或数字列表。让我们看一个超级简单的例子。

var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

该方法的参数依次为起始值、结束值和步长值。如果您想知道，使用负步长值会导致递减范围。

交叉路口

此方法将两个数组相互比较，并返回在所有传递的数组中找到的元素列表，即集合论中的交集。

让我们扩展前面的示例来看看它是如何工作的。

var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]

很简单，对吧？您只需传入要比较的数组列表，Underscore 就会完成剩下的工作。

---

对象

除了预期的 is 检查之外，Underscore 还提供了各种方法来克隆、扩展和其他操作对象。

这是我最喜欢的一些。

键和值

有一个巨大的对象，您只需要键或只需要值？使用 Underscore 真是太简单了。

var Tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
var keys = _.keys(Tuts), values = _.values(Tuts);

console.log(keys + values);

// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects

默认值

当您需要创建具有合理默认值的对象（而创建对象时可能不会使用该默认值）时，此方法非常有用。

var tuts = { NetTuts : 'Web Development'};
var defaults = { NetTuts : 'Web Development', niche: 'Education'};

_.defaults(tuts, defaults);

console.log(tuts);

// Object { NetTuts="Web Development", niche="Education"}

---

函数

尽管听起来很奇怪，Underscore 的函数可以作用于函数。大多数函数在这里解释起来往往相当复杂，因此我们将看一下最简单的函数。

绑定

this 是 JavaScript 中难以捉摸的一部分，往往会让很多开发人员感到非常困惑。此方法旨在使其更容易解决。

var o = { greeting: "Howdy" }, 
	f = function(name) { return this.greeting +" "+ name; };

  var greet = _.bind(f, o); 

  greet("Jess")

这有点令人困惑，所以请留在这儿。绑定函数基本上让您无论何时何地调用该函数都可以保留 this 的值。

当您使用 this 被劫持的事件处理程序时，这特别有用。

---

实用程序

为了进一步提高交易的吸引力，Underscore 提供了大量的实用函数。由于我们的时间已经不多了，所以让我们看看重要的事情。

模板化

已经有大量的模板解决方案，但 Underscore 的解决方案因其实现相当小而功能相当强大而值得一看。

让我们看一个快速示例。

var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';

var parsedTemplate = _.template(template,  data );

console.log(parsedTemplate);

// Welcome! You are at NetTuts

首先，我们创建数据来填充模板，然后创建模板本身。默认情况下，Underscore 使用 ERB 样式分隔符，尽管这是完全可自定义的。

有了这些，我们就可以简单地调用 template 来传递我们的模板和数据。我们将结果存储在一个单独的字符串中，以便稍后根据需要用于更新内容。

请记住，这是 Underscore 模板的极其简单的演示。您可以使用 分隔符在模板内使用任何 JavaScript 代码。当您需要迭代复杂的对象（例如 JSON 源）时，您可以与 Underscore 出色的集合函数配合来快速创建模板。

---

仍然不相信你应该选择这个

jQuery 和 Underscore 齐头并进。

不不不，你们都错了！如果说有什么不同的话，那就是 jQuery 和 Underscore 相辅相成，齐头并进。真的！

看，jQuery 在一些事情上做得非常好。其中最主要的是 DOM 操作和动画。它不涉及较高或较低级别的任何内容。如果像 Backbone 或 Knockout 这样的框架处理更高级别的问题，那么 Underscore 可以解决所有相对裸机的问题。

从更广泛的角度来看，jQuery 在浏览器之外没有什么用途，因为它的大部分功能都与 DOM 相关。另一方面，下划线可以在浏览器或服务器端使用，没有任何问题。事实上，Underscore 依赖它的 Node 模块数量最多。

好了，今天就讲到这里。考虑到 Underscore 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

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!