Share
Da sich JavaScript langsam aus dem Browser herausbewegt, sind mehrere Tools entstanden, die die Robustheit von JavaScript erheblich verbessern.
Ein solches Werkzeug heißt Underscore.js und wir werden es uns heute ansehen. Lass uns anfangen!
Was genau macht Underscore??
Underscore ist eine Utility-Belt-Bibliothek für JavaScript, die eine Menge der funktionalen Programmierungsunterstützung bietet, die Sie in Prototype.js (oder Ruby) erwarten würden, ohne jedoch die integrierten JavaScript-Objekte zu erweitern.
Eine der schönsten Sachen bei der Arbeit in Python oder Ruby sind die ausgefallenen Konstrukte Karte das macht das Leben viel einfacher. Die derzeitige Version von JavaScript ist leider relativ einfach, wenn es um Low-Level-Utilities geht.
Wie Sie weiter oben lesen, ist Underscore.js eine nette kleine JavaScript-Bibliothek, die mit nur 4kb eine lächerliche Menge an Funktionalität bietet.
"Genug Lachen über die Bibliothek", kann ich Sie sagen hören. Du hast Recht! Werfen wir einen Blick auf den Unterstrich in Aktion, bevor ich mit dem Yapping fortfahre.
Nehmen wir an, Sie haben ein zufälliges Feld von Testergebnissen und benötigen eine Liste mit denjenigen mit mindestens 90 Punkten. Sie würden normalerweise so etwas aufschreiben:
var Scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; für (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (Scores [i]); console.log (topScorers);
Es ist ziemlich einfach und sogar mit der Optimierung ist es ziemlich wortreich für das, was wir versuchen zu tun.
Schauen wir uns an, 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, Funktion (Score) return score> scoreLimit;); console.log (topScorers);
Ich weiß nichts von dir, aber ich hatte gerade einen Nerdgasmus. Das ist etwas unglaublich prägnant und lesbarer Code genau dort.
Nun, alles hängt davon ab, was Sie zu tun versuchen. Wenn Sie JavaScript nur darauf verwenden, nur mit dem DOM herumzuspielen, ist die Antwort meistens nein, da jQuery das meiste tut, was Sie tun möchten.
Ja.
Auf der anderen Seite, wenn Sie mit nicht-DOM-Code oder sogar mit komplexem Code arbeiten, denken Sie an MVC-Front-End-Code. Underscore ist ein absoluter Segen.
Ein Teil der von der Bibliothek bereitgestellten Funktionen wird langsam in die ECMA-Spezifikationen einbezogen, ist jedoch nicht in allen Browsern verfügbar, und der Code für Cross-Browser ist ein weiterer Albtraum für sich. Underscore bietet Ihnen eine schöne Reihe von Abstraktionen, die überall funktionieren.
Wenn Sie eine leistungsorientierte Person sind, wie Sie sollten, greift Underscore auf native Implementierungen zurück, sofern verfügbar, um sicherzustellen, dass die Leistung so optimal wie möglich ist.
Holen Sie sich einfach die Quelle hier, fügen Sie sie in Ihre Seite ein und Sie können loslegen.
Wenn Sie einen großen Einrichtungsprozess erwartet haben, werden Sie sehr enttäuscht sein. Holen Sie sich einfach die Quelle hier, fügen Sie sie in Ihre Seite ein und Sie können loslegen.
Underscore erstellt und stellt seine gesamte Funktionalität über ein einziges Objekt im globalen Bereich bereit. Dieses Objekt ist der Titelunterstrich _.
Wenn Sie sich fragen, ja, das ist ziemlich ähnlich, wie jQuery mit dem Dollar [$] Symbol arbeitet. Genau wie bei jQuery können Sie diesen Charakter neu zuordnen, wenn Sie in Konflikte geraten. Oder wenn Sie wie ich sind und die Tilde irrational lieben.
Während im offiziellen Marketing-Klappentext für die Bibliothek angegeben wird, dass sie die Unterstützung für die Programmierung unterstützt, gibt es tatsächlich eine andere Möglichkeit.
Nehmen wir unseren früheren Code als Beispiel:
var Scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (Scores, Funktion (Score) return score> scoreLimit;); console.log (topScorers);
Diese Methode oben ist der funktionale oder prozedurale Ansatz. Sie können auch eine einfachere, wahrscheinlich offensichtliche, objektorientierte Vorgehensweise verwenden.
var Scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _ (Scores) .select (Funktion (Score) return score> scoreLimit;); console.log (topScorers);
Es gibt keine wirklich 'richtige' Vorgehensweise, aber bedenken Sie, dass Sie die jQuery-artige Methode mit der letzteren Methode verketten können.
Unterstrich bietet etwas mehr als 60 Funktionen, die eine Reihe von Funktionen umfassen. Im Kern können sie in Gruppen von Funktionen eingeteilt werden, die folgende Funktionen erfüllen:
Lassen Sie uns einen Blick darauf werfen, was jeder macht und gegebenenfalls einen oder zwei meiner Favoriten aus jedem Abschnitt.
Eine Sammlung kann entweder ein Array oder ein Objekt sein, ein assoziiertes Array in JavaScript, wenn ich semantisch korrekt sein soll.
Unterstrich bietet eine Vielzahl von Methoden, die für Sammlungen verwendet werden. Wir haben das gesehen wählen Methode früher. Hier sind ein paar mehr nützliche.
Nehmen wir an, Sie haben ein kleines, kleines Array mit Schlüsselwertpaaren und möchten aus jedem nur eine bestimmte Eigenschaft extrahieren. Mit Underscore ist das ein Kinderspiel.
var Tuts = [Name: 'NetTuts', Nische: 'Web Development', Name: 'WPTuts', Nische: 'WordPress', Name: 'PSDTuts', Nische: 'PhotoShop', Name: 'AeTuts', Nische: 'After Effects']; var niches = _.pluck (Tuts, 'niche'); console.log (Nischen); // ["Webentwicklung", "WordPress", "PhotoShop", "After Effects"]
Verwenden zupfen ist so einfach wie das Zielobjekt oder das Zielfeld zu übergeben sowie die zu wählende Eigenschaft. Hier nehme ich nur die Nische für jeden Standort heraus.
Map erstellt aus einer Sammlung ein Array, in dem jedes Element durch eine Funktion mutiert oder anderweitig geändert werden kann.
Nehmen wir das vorige Beispiel und erweitern es ein wenig.
Accentsconagua
var Tuts = [Name: 'NetTuts', Nische: 'Web Development', Name: 'WPTuts', Nische: 'WordPress', Name: 'PSDTuts', Nische: 'PhotoShop', Name: 'AeTuts', Nische: 'After Effects']; var names = _ (Tuts) .pluck ('name'). map (Funktion (Wert) Rückgabewert + '+'); console.log (Namen); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Da ich bemerkte, dass den Namen am Ende das Pluszeichen fehlt, füge ich sie im extrahierten Array hinzu.
Sie sind hier nicht auf eine einfache Verkettung beschränkt. Sie können den übergebenen Wert nach Ihren Wünschen ändern.
alles ist nützlich, wenn Sie überprüfen müssen, ob jeder Wert in einer Sammlung bestimmte Kriterien erfüllt. Zum Beispiel, um zu überprüfen, ob ein Schüler in jedem Fach bestanden hat.
Var Scores = [95, 82, 98, 78, 65]; var hasPassed = _ (Scores) .all (Funktion (Wert) Rückgabewert> 50;); console.log (hasPassed); // wahr
Underscore hat eine Reihe von Funktionen, die ausschließlich mit Arrays arbeiten, was sehr zu begrüßen ist, da JavaScript im Vergleich zu anderen Sprachen nur sehr wenige Methoden für Arrays bietet.
Diese Methode analysiert im Grunde ein Array und entfernt alle doppelten Elemente, sodass Sie nur eindeutige Elemente erhalten.
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]
Dies ist äußerst nützlich, wenn Sie sehr große Datensätze analysieren und die Duplikate aussortieren müssen. Beachten Sie, dass nur die erste Instanz eines Elements gezählt wird, sodass die ursprüngliche Reihenfolge beibehalten wird.
Eine äußerst praktische Methode, mit der Sie einen Bereich oder eine Liste mit Nummern erstellen können. Schauen wir uns ein superschnelles Beispiel an.
var tens = _.range (0, 100, 10); console.log (zehn); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
Die Parameter der Methode sind in der Reihenfolge Startwert, Endwert und Schrittwert. Wenn Sie sich fragen, führt die Verwendung eines negativen Schrittwerts zu einem abnehmenden Bereich.
Diese Methode vergleicht zwei Arrays miteinander und gibt die Liste der Elemente zurück, die in allen durchgeführten Arrays gefunden werden, d. H. Eine Schnittmenge in der Mengenlehre.
Lassen Sie uns das vorherige Beispiel erweitern, um zu sehen, wie das funktioniert.
var tens = _.range (0, 100, 10), eights = _.range (0, 100, 8), fünf = _.range (0, 100, 5); var common = _.intersection (Zehner, Achter, Fünfer); console.log (allgemein); // [0, 40, 80]
Einfach richtig? Sie übergeben einfach die Liste der Arrays, um sie zu vergleichen, und Underscore erledigt den Rest.
Neben dem ziemlich erwartet ist
Hier sind einige meiner Favoriten.
Haben Sie ein massives Objekt, bei dem Sie nur die Schlüssel oder nur die Werte benötigen? Mit Underscore ist das so einfach.
var Tuts = NetTuts: 'Webentwicklung', WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; var keys = _.keys (Tuts), Werte = _.values (Tuts); console.log (Schlüssel + Werte); // NetTuts, WPTuts, PSDTuts, AeTutsWeb-Entwicklung, WordPress, PhotoShop, After Effects
Diese Methode ist sehr nützlich, wenn Sie Objekte mit vernünftigen Standardwerten erstellen müssen, wenn eines bei der Erstellung nicht verwendet wird.
var tuts = NetTuts: 'Webentwicklung'; var defaults = NetTuts: 'Web Development', Nische: 'Education'; _.defaults (Tuts, Standardwerte); Console.log (Tuts); // Object NetTuts = "Webentwicklung", niche = "Education"
Underscore, wie es sich anhört, verfügt über Funktionen, die an Funktionen arbeiten. Die meisten Funktionen sind in der Regel ziemlich kompliziert zu erklären, daher werfen wir einen Blick auf die einfachsten Funktionen.
diese ist ein schwer fassbarer Teil von JavaScript und neigt dazu, viele Entwickler wirklich verwirrt zu lassen. Diese Methode soll es etwas einfacher machen.
var o = Begrüßung: "Howdy", f = Funktion (Name) return this.greeting + "" + Name; ; var greet = _.bind (f, o); grüße ("Jess") Es ist ein bisschen verwirrend, also bleib bei mir hier. Mit den Bindefunktionen können Sie grundsätzlich den Wert von behalten diese wann und wo immer die Funktion aufgerufen wird.
Dies ist besonders nützlich, wenn Sie mit Event-Handlern arbeiten diese wird entführt.
Underscore bietet eine Vielzahl von Funktionen. Da wir uns ziemlich in der Zeit befinden, schauen wir uns nur den Biggie an.
Es gibt bereits eine Unmenge an Template-Lösungen, aber Underscore macht einen Blick auf die Lösung wert, indem er bei der Implementierung recht klein ist und dabei recht mächtig ist.
Schauen wir uns ein Beispiel an.
var data = site: 'NetTuts', template = 'Willkommen! Du bist am <%= site %>'; var parsedTemplate = _.template (Vorlage, Daten); console.log (parsedTemplate); // Herzlich willkommen! Sie sind bei NetTuts
Zunächst erstellen wir die Daten, um die Vorlage aufzufüllen, gefolgt von der Vorlage selbst. Standardmäßig verwendet Underscore Trennzeichen im ERB-Stil, dies ist jedoch vollständig anpassbar.
Wenn diese vorhanden sind, können wir einfach die Vorlage Weitergabe unserer Vorlage und der Daten. Wir speichern das Ergebnis in einer separaten Zeichenfolge, die später zur Aktualisierung des Inhalts verwendet werden kann.
Denken Sie daran, dass dies eine äußerst einfache Demonstration der Vorlage von Underscore ist. Sie können in der Vorlage einen beliebigen JavaScript-Code verwenden, indem Sie die Trennzeichen. Wenn Sie komplexe Objekte, z. B. JSON-Quellen, durchlaufen müssen, können Sie sich mit den ausgezeichneten Sammlungsfunktionen von Underscore verbinden, um Vorlagen schnell zu erstellen.
jQuery und Underscore gehen Hand in Hand.
Nein, nein, du hast alles falsch verstanden! Wenn überhaupt, ergänzen sich jQuery und Underscore gut und gehen Hand in Hand. Ja wirklich!
Sehen Sie, jQuery macht ein paar Dinge extrem gut. DOM-Manipulation und Animation sind hier vor allem. Es behandelt nichts auf den höheren oder niedrigeren Ebenen. Wenn Frameworks wie Backbone oder Knockout sich mit den übergeordneten Problemen befassen, greift Underscore alle relativ nackten an.
Für noch mehr Perspektiven hat jQuery außerhalb des Browsers wenig Sinn, da der größte Teil seiner Funktionalität mit dem DOM zu tun hat. Unterstriche können dagegen problemlos im Browser oder auf der Serverseite verwendet werden. In der Tat hat Underscore die größte Anzahl von Knotenmodulen, die davon abhängig sind.
Nun, das war es für heute. In Anbetracht des Umfangs von Underscore haben wir hier die Oberfläche kaum zerkratzt. Schauen Sie sich die Bibliothek an und lassen Sie mich wissen, wenn Sie Fragen in den Kommentaren haben. Vielen Dank fürs Lesen!
