Genießen Sie die Wärme von Underscore.js

Während JavaScript langsam aus den Browsern verschwindet, gibt es Tools, die die Robustheit von JavaScript erheblich verbessern können.

Eines dieser Tools heißt Underscore.js und das ist das Tool, das wir heute vorstellen werden. Fangen wir an!

---

Lernen Sie Underscore.js kennen

Was genau macht Underscore?

Underscore ist eine JavaScript-Dienstprogrammbibliothek, die einen Großteil der funktionalen Programmierunterstützung bietet, die Sie in Prototype.js (oder Ruby) erwarten würden, jedoch ohne die integrierten JavaScript-Objekte zu erweitern.

块引用>

Einer der Vorteile der Arbeit in Python oder Ruby sind ausgefallene Konstrukte wie map, die das Leben viel einfacher machen. Leider ist die aktuelle Version von JavaScript im Hinblick auf Low-Level-Dienstprogramme recht grob.

Wie Sie oben gelesen haben, ist Underscore.js eine wunderschöne kleine JavaScript-Bibliothek, die bei nur 4 KB eine unglaubliche Menge an Funktionalität bietet.

---

Praktische Anwendung von Unterstreichungen

„Genug Blödsinn über Bibliotheken“, höre ich Sie sagen. du hast Recht! Bevor ich meine Schimpftirade fortsetze, schauen wir uns Underscore in Aktion an.

Angenommen, Sie haben eine zufällige Auswahl an Testergebnissen und benötigen eine Liste mit mehr als 90 Ergebnissen. Normalerweise würdest du so etwas schreiben:

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);

Es ist sehr einfach und trotz Optimierungen ziemlich ausführlich für das, was wir tun möchten.

Mal sehen, was wir als nächstes mit Underscore erreichen können.

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);

Ich weiß nicht, wie es dir geht, aber ich bin einfach ein bisschen nerdig. Das ist ein unglaublich prägnanter und lesbarer Code.

---

Toll, aber brauche ich das wirklich?

Nun, es hängt alles davon ab, was Sie tun möchten. Wenn Ihre Verwendung von JavaScript auf das Spielen mit dem DOM beschränkt ist, lautet die Antwort meist „Nein“, da jQuery das meiste tun kann, was Sie tun möchten.

Ja.

Wenn Sie andererseits mit Nicht-DOM-Code oder sogar komplexem Code arbeiten, denken Sie, dass MVC, Front-End-Code, Underscore definitiv ein Segen ist.

Während einige der von dieser Bibliothek bereitgestellten Funktionen langsam Eingang in die ECMA-Spezifikation finden, ist sie nicht in allen Browsern verfügbar und es ist ein weiterer Albtraum, Ihren Code browserübergreifend zum Laufen zu bringen. Underscore bietet Ihnen eine Reihe schöner Abstraktionen, die überall verwendet werden können.

Wenn Sie eine leistungsorientierte Person sind (und das sollten Sie auch sein), greift Underscore auf die native Implementierung (sofern verfügbar) zurück, um die bestmögliche Leistung sicherzustellen.

---

Loslegen Sie

Laden Sie sich hier einfach den Quellcode herunter und fügen Sie ihn in Ihre Seite ein.

Wenn Sie einen umfangreichen Einrichtungsprozess erwarten, werden Sie bitter enttäuscht sein. Holen Sie sich einfach den Quellcode hier und fügen Sie ihn in Ihre Seite ein.

Underscore wird global durch ein einzelnes Objekt erstellt und stellt seine gesamte Funktionalität zur Verfügung. Das Objekt ist das Titel-Unterstrichzeichen _.

Falls Sie sich fragen: Ja, das ist der Art und Weise, wie jQuery das Dollarzeichen [$] verwendet, sehr ähnlich. Genau wie bei jQuery können Sie dieses Zeichen neu zuordnen, falls Konflikte auftreten. Oder wenn Sie wie ich sind und eine irrationale Liebe zur Tilde haben.

---

Funktional oder objektorientiert?

Während das offizielle Marketing der Bibliothek behauptet, dass sie funktionale Programmierunterstützung hinzufügt, gibt es tatsächlich eine andere Möglichkeit, Dinge zu tun.

Nehmen wir den vorherigen Code als Beispiel:

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);

Die oben genannten Methoden sind funktionale oder prozedurale Methoden. Sie können auch einen direkteren und vielleicht offensichtlicheren objektorientierten Ansatz verwenden.

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);

Es gibt keine wirklich „richtige“ Vorgehensweise, aber bedenken Sie, dass Sie mit der letztgenannten Methode Methoden im jQuery-Stil verketten können.

---

Funktion prüfen

Underscore bietet mehr als 60 Funktionen, die eine Vielzahl von Funktionen abdecken. Im Wesentlichen lassen sie sich in Gruppen von Funktionen einteilen, die ausgeführt werden auf:

• Sammlung
• Array
• Objekt
• Funktion
• Dienstprogramme

Schauen wir uns an, was die einzelnen Teile bewirken und, falls zutreffend, ein oder zwei davon, die mir am besten gefallen.

---

Sammlung

Eine Sammlung kann ein Array oder ein Objekt oder ein assoziatives Array in JavaScript sein, wenn ich semantisch richtig liege.

Underscore bietet viele Methoden zum Bearbeiten von Sammlungen. Wir haben die select-Methode bereits gesehen. Hier sind einige weitere sehr nützliche.

Kommissionieren

Angenommen, Sie haben ein schönes kleines Array von Schlüssel-Wert-Paaren und möchten aus jedem Array eine bestimmte Eigenschaft extrahieren. Mit Underscore ist das ein Kinderspiel.

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"]

Die Verwendung von pluck ist so einfach wie die Übergabe des Zielobjekts oder Arrays und die Auswahl der zu verwendenden Eigenschaft. Hier extrahiere ich einfach die Nische jeder Website.

Karte

Map erstellt ein Array aus einer Sammlung, in dem jedes Element durch eine Funktion mutiert oder auf andere Weise geändert werden kann.

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

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 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

Das obige ist der detaillierte Inhalt vonGenießen Sie die Wärme von Underscore.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!