Erste Schritte mit Unscore.js

Key Takeaways

• Underscore.js ist eine JavaScript -Bibliothek, die funktionale Dienstprogramme für eine Vielzahl von Anwendungsfällen bereitstellt, Code leichter zu lesen und zu schreiben und Funktionen anzubieten, die nicht immer in nativem JavaScript verfügbar sind.
• Die Bibliothek enthält gängige Methoden wie _.each () zum Schreiben lesbarer Schleifen, _.template () für intuitive und unkomplizierte Vorlagen und _.Filter () zum Filtern von Arrays mit einer Booleschen Funktion.
.
• .
• Undercore.js ist leicht und wird von vielen bekannten Projekten verwendet, darunter USA Today, LinkedIn und Khan Academy.

Eine Demo -Anwendung unter Verwendung von Unscore.js, JQuery und der Spotify -Web -API zeigt, wie die Bibliothek zum Abholen und Anzeigen von Daten von einer API verwendet werden kann und ermöglicht Benutzern die Filterergebnisse.

Dieser Artikel wurde von Agbonghama Collins und Ryan Chenkie geprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

Unscore.js ist eine JavaScript -Bibliothek, die von Jeremy Ashkenas verfasst wurde und die eine Vielzahl von Anwendungsfällen für funktionale Dienstprogramme bietet, auf die wir als Entwickler bei einem Webprojekt stoßen können.

_.isEmpty({});
// true

Es ist Code, das leichter zu lesen ist:

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

es macht Code, das einfacher zu schreiben ist:

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

Es bietet Funktionen, für die es keine 1: 1 -native Methode gibt:

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

Es kann sogar als Vorlagenmotor für sich genommen verwendet werden:

Undercore ist eine leichte Bibliothek (nur 5,7 KB, minified und gziped) und wird von einer Vielzahl von großen Namensprojekten verwendet, wie z. B.
• USA Today
• linkedIn

Khan Academy

Lassen Sie uns nun genauer werden und in seine Hauptfunktionen eintauchen.

Die guten Teile

In diesem Tutorial werde ich drei der häufigsten Methoden von Undercore hervorheben:
• _. Jeweils ()
• _. Template ()

_. Filter ()

Ich werde erklären, wie sie einzeln verwendet werden, und binden Sie sie dann zusammen, um eine Demo -Anwendung zu erstellen, die Sie am Ende des Tutorials finden können. Wie immer ist der Code für diese Demo auf Github verfügbar.

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

Wenn Sie den Beispielen folgen möchten, müssen Sie eine Kopie der Bibliothek abrufen, z. B. von Ihrem Lieblings -CDN:

Und wenn Sie auf dem Weg Hilfe benötigen oder nur noch neugierig sind, mehr herauszufinden, vergessen Sie nicht, dass die Dokumentation von Undercore umfangreich ist. Es hat auch eine große und aktive Gemeinschaft, was bedeutet, dass Hilfe leicht zu finden ist.

_. Jeweils: Schreiben Sie lesbare Schleifen

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

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

Es gibt kein einzelnes Projekt, das diesem Snippet irgendwann im Code nichts ähnelt:

Unterstrich ermöglicht es Ihnen, gleichwertige Code mit einer Syntax zu schreiben, die lesbarer ist:

_.isEmpty({});
// true

ordentlich, was? _.each () nimmt zwei Parameter:

• das Array (oder Objekt), um zu iterieren.
• Eine Rückruffunktion.

für jedes Element in unserem Array _.each () wird die Rückruffunktion aufgerufen (in der Dokumentation als iTeratee bezeichnet). Innerhalb des Rückrufs erhalten wir Zugriff auf weitere drei Parameter:

• Der Wert des Arrays für den aktuellen Iterationsindex (Künstler). Zum Beispiel würden wir für das Snippet oben "Pharrel Williams" für die erste Iteration erhalten.
• Die Anzahl der aktuellen Iteration (Index), die in unserem Fall von 0 bis 2.
variiert wird
• Das Array, das wir durchführen (Künstler).

Wie Sie sehen können, ist der Code lesbarer und wir können auf die einzelnen Elemente im Array zugreifen, ohne dass Künstler [i] erforderlich sind, wie wir in dem Beispiel gesehen haben, dass eine für Schleife verwendet wurde.

Siehe den Stift _.each von sitepoint (@sitepoint) auf CodePen.

Als nächstes werden wir sehen, wie sich der Vorlagenmotor verhält.

_. Template (): intuitiv und unkompliziert

Seit dem Anstieg der einzelnen Seitenanwendung ist eine zuverlässige Frontend -Templating -Engine zu einem grundlegenden Bedarf an unserem Arbeitsstapel geworden.

Unterstrich liefert einen Vorlagenmotor, der für diejenigen, die mit Sprachen wie PHP oder Ruby on Rails vertraut sind, ziemlich vertraut erscheinen.

Aus unserem vorherigen Snippet werden wir demonstrieren, wie _.template () funktioniert. Wir werden dies tun, indem wir unserem Code ein paar Zeilen hinzufügen, wie unten gezeigt:

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

Hier rufen wir die Funktion _.Template () mit einem String -Argument auf, das einige Daten in Grenzwerten enthält (). Wenn _.template () auf diese Weise aufgerufen wird, gibt wir eine Funktion zurück, die wir immer wieder verwenden können.

Wir können unsere neue Funktion mit ArtistTemplate () aufrufen und sie als Argument ein Objektliteral übergeben. Dadurch wird die Zeichenfolge zurückgegeben, die wir ursprünglich an _.template () übergeben haben, um alle Objekteigenschaften zu ersetzen, die den freien Variablen der Vorlage entsprechen. In unserem Fall wird durch den Wert im Künstlerattribut des Objekts ersetzt.

Die Templating -Engine von

Underscore erlaubt nicht nur, dass einzelne Werte ersetzt werden, sondern auch die Ausführung von Skripten in der Vorlage selbst. Mit einer einzigen Modifikation können wir unseren Snippet noch leistungsfähiger machen.

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

Wir haben unseren Anruf zu _.each () in die Zeichenfolge aufgenommen, die unsere Vorlage darstellt, die uns dazu bringt, die Art und Weise zu ändern, wie die Vorlage aufgerufen wird. Da wir jetzt in der Funktion _.template () iterieren, können wir das vollständige Künstler -Array an ArtistTemplate () übergeben (zuvor haben wir die einzelnen Künstler übergeben). Die Ausgabe dieses Codes ist der gleiche wie im vorherigen Beispiel.

Wenn wir JavaScript -Code bewerten möchten, müssen wir unseren Code nur zwischen statt .

umgeben.

Da das von _.Template generierte Vorlage aufgerufen wird, können wir unseren Snippet noch einen Schritt weiter gehen und eine Vorlage von innen aufrufen, indem wir die -Tags verwenden. Auf diese Weise können wir wiederverwendbare Vorlagen vornehmen, da wir eine andere Wrapper -Vorlage für unsere Künstlerliste haben und einfach die Vorlage für jedes der enthält Elemente aufrufen können.

Siehe den Stift _.template () von sitepoint (@sinepoint) auf CodePen.

Schauen wir uns schließlich die Funktion _.Filter () an.

_. Filter (): Alles, was Sie brauchen, ist eine boolesche Funktion

_. Filter () empfängt ein Array und eine Rückruffunktion als Argumente. Anschließend wird die Funktion für jedes der Elemente im Array aufgerufen und ein neues Array zurückgegeben, das die Elemente enthält, für die die Funktion auf etwas Wahres bewertet wurde.

Unsere Rückruffunktion erhält auch drei Argumente, wie im Fall _.each (): das Element im Array, das dem aktuellen Iterationsindex, dem Index der Iteration und dem Array selbst entspricht.

Um dies zu klären, nehmen wir ein paar Änderungen an unserem Snippet vor.

_.isEmpty({});
// true

Wie Sie vielleicht vermutet haben, erhalten wir in unserer Vorlage ['ACDC'] als Array -Argument. Hier ist eine Demo von dem, was wir bisher haben.

Siehe den Stift _.Filter () von sitepoint (@sinepoint) auf CodePen.

genug gesagt. Lassen Sie uns die Dinge für etwas zum Laufen bringen, das etwas mehr Sinn macht.

unsere Demo -Anwendung

Vergessen Sie nicht, der Code für diese Demo ist auf GitHub verfügbar.

Wir erstellen eine kleine Anwendung, die eine API verbraucht, die erhaltenen Informationen anzeigt und es dem Benutzer ermöglicht, das zu filtern, was gezeigt wird. Zu diesem Zweck werden wir:

verwenden

• unterstrich.js
• jQuery
• Die Spotify -Web -API

Insbesondere wird die Anwendung einige Künstlerinformationen von Spotify und unter Verwendung von Unterscore _.Template, _.each und _.Filter abgerufen.

Um dies zu tun, werden wir unseren Code in drei verschiedene Module teilen:

• _isawesome.config: Hält die Informationen, die wir in der Anwendung verwenden werden.
• _isawesome.template: Kümmert sich um die Vorlagenkompilierung.
• _isawesome: Dies ist das Hauptmodul, das für die Reaktion auf Benutzeraktionen und die Aktualisierung der Benutzeroberfläche verantwortlich ist.

Alle von ihnen folgen dem Modulmuster.

Konfigurationsmodul

Das Konfigurationsmodul enthält die IDs der zu verwendenden Vorlagen zusammen mit der URL der API, die wir abfragen werden, sowie die IDs der Künstler, die wir von Spotify erhalten möchten. Auf diese Weise können wir mehr Künstler hinzufügen, indem wir dem Array nur weitere Elemente hinzufügen.

Vorlagenmodul

Dieses Modul ist das für das Kompilieren der Vorlagen verantwortlich, indem GetTemplates () im Konfigurationsmodul aufgerufen wird.

Hauptmodul

Dieses Modul ist für das Senden der AJAX -Anforderung an die URL verantwortlich, die wir aus dem Konfigurationsmodul erhalten, und den Inhalt mit den Vorlagen aus dem Vorlagenmodul zu rendern.

Abgesehen davon kümmert sich dieses Modul auch um das Filtern der Elemente basierend auf dem vom Benutzer geklickten Filter.

Beide Filter und unsere Vorlagen sind Teil des HTML.

Um die Filterung zu implementieren, werden wir uns auf HTML 5 -Datenattribute und die Datenschnittstelle von JQuery verlassen. Dies ist eher eine Frage der Bequemlichkeit, aber wenn Sie dies nativ tun möchten, ist die Browserunterstützung sehr gut.

Dies ist das Markup der Schaltflächen, mit denen wir die Filterung durchführen:

_.isEmpty({});
// true

Dies ist ein Beispiel für ein Objekt, das wir an unsere Filterfunktion weitergeben:

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

wir haben die HTML für unsere Vorlagen als Teil unseres Index.html in einem -Tag, das wir verhindern, dass wir seinen Typ auf etwas anderes als den üblichen Text/JavaScript einstellen. Nur aus Gründen der Konsistenz werden wir es auf Unterstrich/Vorlage einstellen.

Wir haben zwei Vorlagen. Die erste enthält die Liste der Künstler, während der zweite die einzelnen Künstler enthalten, die angezeigt werden sollen. Wie wir oben gesehen haben, werden wir das verwenden, was wir eingebettete Vorlagen nennen. Wir rufen eine Vorlage ('item-tPl') von einem anderen ('Item-List') an.

.

Am Ende der Datei werden wir unsere Bibliotheken und unsere drei Skripte einbeziehen. Um es visuell ansprechender zu machen, haben wir einige grundlegende Stile im Kopf.

Und das war's.

Siehe den Stift unterstreicht die Großartigkeit von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

Undercore ist eine Freude, mit der Sie arbeiten können, und wie ich gezeigt habe, können Sie saubere, lesbare und leicht zu machende Code schreiben.

Es gibt ein paar weitere Dinge, die wir unserer Anwendung hätten hinzufügen können (z. B. unsere Filter dynamisch mit _.pluck () generiert haben), aber ich denke, wir haben genug, um loszulegen.

wie wäre es mit dir? Haben Sie mit Underscore gearbeitet? Würdest du bereit sein, einen Versuch zu probieren? Haben Sie eine Alternative (d. H. Lodash) ausprobiert, die ähnliche Fähigkeiten bietet? Lassen Sie mich in den Kommentaren unten wissen.

häufig gestellte Fragen (FAQs) zu Unscore.js

Was ist der Hauptzweck von unterstrich.js? Es ist so konzipiert, dass es eine Ergänzung zu den integrierten Funktionen in JavaScript darstellt und zusätzliche Funktionen und die Produktivität verbessert. Es bietet über 100 Funktionen, einschließlich derjenigen, die sich mit Arrays, Objekten, Funktionen und mehr befassen. Diese Funktionen helfen dabei Unterstich.js, Sie müssen es zunächst in Ihr Projekt aufnehmen. Sie können dies tun, indem Sie die Bibliothek von der offiziellen Website herunterladen und in Ihrer HTML -Datei verknüpfen oder eine CDN verwenden. Sobald es in Ihr Projekt aufgenommen wurde, können Sie seine Funktionen verwenden, indem Sie sie mit dem Unterstrich (_) aufrufen, gefolgt vom Funktionsnamen. >

Undercore.js bietet eine breite Palette von Funktionen, aber einige der nützlichsten umfassen:

1. _.Each: Mit dieser Funktion können Sie über ein Array- oder Objektelemente iterieren.

1. _.Map: Diese Funktion erstellt ein neues Array, indem jedes Element in einem Array oder Objekt mit einer Funktion transformiert wird.

1. _.Filter: Diese Funktion gibt ein neues Array mit allen Elementen zurück, die einen Wahrheitstest bestehen.

1. _.Find: Diese Funktion gibt das erste Element zurück, das einen Wahrheitstest besteht.

1. _.Reduce: Diese Funktion reduziert ein Array oder Objekt auf einen einzelnen Wert, indem ich eine Funktion iterativ anwenden. Ja, Unscore.js ist so konzipiert, dass er mit anderen JavaScript -Bibliotheken kompatibel ist. Es erweitert keine integrierten JavaScript-Objekte, sodass es nicht mit anderen Bibliotheken oder Skripten in Konflikt steht, die auf Ihrer Seite ausgeführt werden. , Unterstrich.js wird aktiv gepflegt und regelmäßig aktualisiert. Die Bibliothek ist Open-Source, was bedeutet, dass Entwickler aus der ganzen Welt zu ihrer Entwicklung und Verbesserung beitragen. Und Lodash bietet ähnliche Funktionen, aber es gibt einige Unterschiede. Lodash ist ein Superset von Underscore.js, was bedeutet, dass es die Funktionalität von Undercore.js und mehr enthält. Unscore.js ist jedoch kleiner und leichter und macht es zu einer guten Wahl für Projekte, bei denen Leistung ein Problem darstellt. Unscore.js kann in einer node.js -Umgebung verwendet werden. Sie können es mit NPM, dem Node.js -Paket -Manager, installieren, indem Sie den Befehl „NPM installieren unterstrich“ ausführen.

Was ist der "Unterstrich" in unterstrich.js? Es ist eine Konvention in JavaScript, das Unterstrich für Nutzungsbibliotheken zu verwenden.

Kann ich zur Entwicklung von unterstrichen.js? Jeder kann zu seiner Entwicklung beitragen. Sie können Fehlerberichte einreichen, neue Funktionen vorschlagen oder sogar Code beisteuern. Die offizielle Website bietet umfassende Dokumentation, und es gibt zahlreiche Tutorials und Artikel online. Darüber hinaus gibt es mehrere Bücher und Online -Kurse, die unterstreichen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Unscore.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!