Zusammenfassung gängiger Methoden von Underscore.js

Übersicht

Underscore.js ist eine sehr schlanke Bibliothek, nur 4 KB komprimiert. Es bietet Dutzende funktionaler Programmiermethoden, was die Javascript-Programmierung erheblich erleichtert. Das MVC-Framework backbone.js basiert auf dieser Bibliothek.

Es definiert ein Unterstrichobjekt (_), und alle Methoden der Funktionsbibliothek gehören zu diesem Objekt. Diese Methoden lassen sich grob in fünf Kategorien einteilen: Sammlung, Array, Funktion, Objekt und Dienstprogramm.

Installieren unter node.js

Underscore.js kann nicht nur in Browserumgebungen, sondern auch in node.js verwendet werden. Der Installationsbefehl lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

npm install unterstrich

Allerdings kann node.js _ nicht direkt als Variablennamen verwenden. Verwenden Sie daher underscore.js in der folgenden Methode.

Code kopieren Der Code lautet wie folgt:

var u = require("underscore");

Methoden im Zusammenhang mit Sammlungen

Die Datenerfassung in Javascript-Sprache umfasst zwei Strukturen: Arrays und Objekte. Die folgenden Methoden gelten für beide Strukturen.

Karte

Diese Methode führt nacheinander eine Operation für jedes Mitglied der Sammlung aus und speichert den zurückgegebenen Wert in einem neuen Array.

Code kopieren Der Code lautet wie folgt:

_.map([1, 2, 3], function(num){ return num * 3; }); // [3, 6, 9] _.map({one : 1, two : 2, three : 3 }, function(num, key){ return num * 3 }); // [3, 6, 9]

jeder

Diese Methode ähnelt der Karte, die nacheinander eine Operation für jedes Mitglied der Sammlung ausführt, aber keinen Wert zurückgibt.

Code kopieren Der Code lautet wie folgt:

_.each([1, 2, 3], Warnung); _.each({eins: 1, zwei: 2, drei: 3}, Warnung);

reduzieren

Diese Methode führt nacheinander eine Operation für jedes Mitglied der Menge aus und akkumuliert dann die Operationsergebnisse für einen bestimmten Anfangswert. Nachdem alle Operationen abgeschlossen sind, wird der akkumulierte Wert zurückgegeben.

Diese Methode akzeptiert drei Parameter. Der erste Parameter ist die zu verarbeitende Sammlung, der zweite Parameter ist die Funktion, die für jedes Mitglied ausgeführt wird, und der dritte Parameter ist die für die Akkumulation verwendete Variable.

_.reduce([1, 2, 3], function(memo, num){ return memo num; }, 0); // 6
Der zweite Parameter der Reduktionsmethode ist die Operationsfunktion, die selbst zwei Parameter akzeptiert. Der erste ist die für die Akkumulation verwendete Variable und der zweite ist der Wert jedes Mitglieds der Menge.

Filtern und ablehnen

Die Filtermethode führt nacheinander eine Operation für jedes Mitglied der Sammlung aus und gibt nur Mitglieder zurück, deren Operationsergebnis wahr ist.

Code kopieren Der Code lautet wie folgt:

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

Die Methode „Reject“ gibt nur Mitglieder zurück, deren Operationsergebnis falsch ist.

Code kopieren Der Code lautet wie folgt:

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

alles und jedes

Die every-Methode führt nacheinander eine Operation für jedes Mitglied der Sammlung aus. Wenn die Operationsergebnisse aller Mitglieder wahr sind, gibt sie true zurück, andernfalls gibt sie false zurück.

Code kopieren Der Code lautet wie folgt:

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

Einige Methoden geben „true“ zurück, solange das Operationsergebnis eines Mitglieds „true“ ist, andernfalls wird „false“ zurückgegeben.

Code kopieren Der Code lautet wie folgt:

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

finden

Diese Methode führt nacheinander eine Operation für jedes Mitglied der Sammlung aus und gibt das erste Mitglied zurück, dessen Operationsergebnis wahr ist. Wenn das Operationsergebnis aller Mitglieder falsch ist, wird undefiniert zurückgegeben.

Code kopieren Der Code lautet wie folgt:

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

enthält

Wenn sich ein Wert in der Sammlung befindet, gibt diese Methode „true“ zurück, andernfalls gibt sie „false“ zurück.

Code kopieren Der Code lautet wie folgt:

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

countBy

Diese Methode führt nacheinander eine Art Operation für jedes Mitglied der Menge aus, zählt Mitglieder mit denselben Operationsergebnissen wie eine Kategorie und gibt schließlich ein Objekt zurück, das die Anzahl der Mitglieder angibt, die jedem Operationsergebnis entsprechen.

Code kopieren Der Code lautet wie folgt:

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

Mischen

Diese Methode gibt eine gemischte Sammlung zurück.

Code kopieren Der Code lautet wie folgt:

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

Größe

Diese Methode gibt die Anzahl der Mitglieder der Sammlung zurück.

Code kopieren Der Code lautet wie folgt:

_.size({one : 1, two : 2, three : 3}); // 3

Methoden im Zusammenhang mit Objekten

toArray

Diese Methode wandelt das Objekt in ein Array um.

Code kopieren Der Code lautet wie folgt:

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

zupfen

Diese Methode extrahiert den Wert eines bestimmten Attributs mehrerer Objekte in ein Array.

Code kopieren Der Code lautet wie folgt:

var stooges = [{name: 'moe', alter: 40}, {name: 'larry', alter: 50}, {name: 'curly', alter: 60}]; ); // ["moe", "larry", "curly"]

Methoden im Zusammenhang mit Funktionen

binden

Diese Methode bindet den Laufzeitkontext der Funktion und gibt ihn als neue Funktion zurück.

Code kopieren Der Code lautet wie folgt:

_.bind(Funktion, Objekt, [*Argumente])

Bitte sehen Sie sich das Beispiel unten an.

Code kopieren Der Code lautet wie folgt:

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

bindAll

Diese Methode bindet alle Methoden eines Objekts (sofern nicht ausdrücklich angegeben) an das Objekt.

Code kopieren Der Code lautet wie folgt:

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

teilweise

Diese Methodenbindung bindet eine Funktion an Parameter und gibt sie dann als neue Funktion zurück.

Code kopieren Der Code lautet wie folgt:

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

auswendiglernen

Diese Methode speichert die laufenden Ergebnisse einer Funktion für einen bestimmten Parameter zwischen.

Code kopieren Der Code lautet wie folgt:

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

Wenn eine Funktion mehrere Parameter hat, muss eine hashFunction bereitgestellt werden, um einen Hash-Wert zu generieren, der den Cache identifiziert.

Verzögerung

Diese Methode kann die Ausführung der Funktion um eine bestimmte Zeit verschieben.

Code kopieren Der Code lautet wie folgt:

var log = _.bind(console.log, console); _.delay(log, 1000, 'später protokolliert'); // 'später protokolliert'

aufschieben

Diese Methode kann die Ausführung der Funktion verschieben, bis die Anzahl der auszuführenden Aufgaben 0 erreicht, ähnlich dem Effekt, wenn setTimeout die Ausführung um 0 Sekunden verzögert.

Code kopieren Der Code lautet wie folgt:

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

Gashebel

Diese Methode gibt eine neue Version der Funktion zurück. Wenn Sie diese neue Version der Funktion kontinuierlich aufrufen, müssen Sie eine bestimmte Zeit warten, bevor Sie die nächste Ausführung auslösen.

Code kopieren Der Code lautet wie folgt:

// Die neue Version der updatePosition-Funktion zurückgeben vardrosselte = _.throttle(updatePosition, 100); // Die neue Version der Funktion wird nur alle 100 Millisekunden ausgelöst $(window).scroll(throttled);

Entprellen

Diese Methode gibt auch eine neue Version einer Funktion zurück. Bei jedem Aufruf dieser neuen Version der Funktion muss zwischen dem vorherigen Aufruf eine bestimmte Zeitspanne liegen, andernfalls ist sie ungültig. Seine typische Anwendung besteht darin, zu verhindern, dass Benutzer auf eine Schaltfläche doppelklicken und so das Formular zweimal absenden.

Code kopieren Der Code lautet wie folgt:

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

einmal

Diese Methode gibt eine neue Version der Funktion zurück, sodass diese Funktion nur einmal ausgeführt werden kann. Wird hauptsächlich zur Objektinitialisierung verwendet.

Code kopieren Der Code lautet wie folgt:

var initialize = _.once(createApplication); initialize(); // Anwendung wird nur einmal erstellt

nachher

Diese Methode gibt eine neue Version der Funktion zurück. Diese Funktion wird erst nach einer bestimmten Anzahl von Aufrufen ausgeführt. Sie wird hauptsächlich verwendet, um zu bestätigen, dass eine Reihe von Vorgängen abgeschlossen sind.

Code kopieren Der Code lautet wie folgt:

var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }); // Nachdem alle Notizen gespeichert wurden, wird renderNote ausgeführt nur einmal ausführen

wickeln

Diese Methode verwendet eine Funktion als Parameter, übergibt sie an eine andere Funktion und gibt schließlich eine neue Version der ersteren zurück.

Code kopieren Der Code lautet wie folgt:

var hello = function(name) { return "hello: " name; }; hello = _.wrap(hello, function(func) { return "before, " func("moe") ", after"; }); (); // 'vorher, hallo: moe, nachher'

Komponieren

Diese Methode akzeptiert eine Reihe von Funktionen als Parameter und führt sie der Reihe nach von hinten nach vorne aus. Das laufende Ergebnis der vorherigen Funktion wird als laufender Parameter der nächsten Funktion verwendet. Mit anderen Worten, konvertieren Sie die Form von f(g(),h()) in f(g(h())).

Code kopieren Der Code lautet wie folgt:

var meet = function(name){ return "hi: " name; var exclaim = function(statement){ return Statement "!" ); // 'Hallo: moe!'

Werkzeugmethoden

Vorlage

Diese Methode wird zum Kompilieren von HTML-Vorlagen verwendet. Es akzeptiert drei Parameter.

Code kopieren Der Code lautet wie folgt:

_.template(templateString, [Daten], [Einstellungen])

Die Bedeutung der drei Parameter ist wie folgt:

templateString: Vorlagenzeichenfolge
Daten: Eingabevorlagendaten
Einstellungen: Einstellungen

templateString

Der Vorlagenstring templateString ist eine gewöhnliche HTML-Sprache, in der Variablen in der Form <%= ... %> eingefügt werden. Das Datenobjekt ist für die Bereitstellung des Werts der Variablen verantwortlich.

Code kopieren Der Code lautet wie folgt:

var txt = "

<%= Wort %>

Code kopieren Der Code lautet wie folgt:

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

Hallo Welt

Code kopieren Der Code lautet wie folgt:

„

Wenn der Wert der Variablen fünf Sonderzeichen enthält (& < > ” ‘ /), muss er mit <%- … %> maskiert werden.

Code kopieren Der Code lautet wie folgt:

var txt = "

<%- Wort %>

Code kopieren Der Code lautet wie folgt:

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

H & W

JavaScript-Befehle können in der Form <% … %> eingefügt werden. Das Folgende ist ein Beispiel für eine Urteilsaussage.

Code kopieren Der Code lautet wie folgt:

var txt = "<% var i = 0; if (i<1){ %>" "<% _.template(txt, { Wort: „Hallo Welt“}) // Hallo Welt

Zu den gebräuchlichen Verwendungszwecken gehören Schleifenanweisungen.

Code kopieren Der Code lautet wie folgt:

var list = "<% _.each(people, function(name) { %>

<%= name %> <% });“ moe
lockig
Larry“
Wenn die Vorlagenmethode nur den ersten Parameter templateString hat und den zweiten Parameter weglässt, wird eine Funktion zurückgegeben, und in diese Funktion können in Zukunft Daten eingegeben werden.

Code kopieren Der Code lautet wie folgt:

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

Daten

Alle Variablen in templateString sind interne Attribute des obj-Objekts, und das obj-Objekt verweist auf das zweite Parameterdatenobjekt. Die folgenden beiden Aussagen sind äquivalent.

Code kopieren Der Code lautet wie folgt:

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

Wenn Sie den Namen des obj-Objekts ändern möchten, müssen Sie ihn im dritten Parameter festlegen.

Code kopieren Der Code lautet wie folgt:

_.template("<%if (data.title) { %>Title: <%= title %><% } %>", null,        { Variable: "data" });

Da die Vorlage beim Ersetzen von Variablen intern die with-Anweisung verwendet, wird der obige Ansatz schneller ausgeführt.

Zusammenfassung gängiger Methoden von Underscore.js_Others