7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Einfaches Laden von Skripten mit yepnope.js

Scroll to top
Read Time: 13 mins

German (Deutsch) translation by Valentina (you can also view the original English article)

Der Ressourcenlader yepnope.js wurde Ende Februar 2011 offiziell von Alex Sexton und Ralph Holzmann veröffentlicht und bietet asynchrones, bedingtes Laden und Vorladen von JavaScript- und CSS-Ressourcen. Dies macht die Verwaltung von abhängigem, bedingtem Code zum Kinderspiel.

Wiederveröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im März 2011 veröffentlicht.

Dieser raffinierte Ressourcenlader, der nur 1,6 KB minimiert und gzippt ist, wird jetzt mit Modernizer gebündelt und eignet sich hervorragend zum Laden von Polyfills, zum Vorladen oder "Primen" des Benutzer-Cache oder als einfacher asynchroner Ressourcenlader / Filter!

Für diejenigen unter Ihnen, die mit Polyfills nicht vertraut sind, handelt es sich im Wesentlichen um Plugins oder Shims, die die Verwendung neuer oder zukünftiger Technologien in älteren Browsern ermöglichen, z. B. Web-SQL-Datenbanken, CSS3-Transformationen usw.

Yepnope unterstützt jetzt auch eine Reihe von Präfixen und Filtern, die, wenn sie der Ressourcen-URL vorangestellt werden, eine weitere Ebene der Feinabstimmung oder Anpassung zu seiner Kernfunktionalität hinzufügen. Als ob dies nicht schon großartig wäre, bietet Ihnen yepnope auch einen Mechanismus, um Ihre eigenen Präfixe und Filter zu definieren. Schauen wir uns an, was yepnope.js kann!


Hintergrund – Asynchrones Laden von Skripten

YepNopeYepNopeYepNope

Bevor wir uns mit Yepnope und seinen Funktionen befassen, ist es wichtig zu verstehen, wie das asynchrone Laden von Skripten funktioniert, warum es nützlich ist und wie es sich vom Laden von Vanilla-Skripten unterscheidet.

Asynchrone Tutorial beseitigen die inhärente blockierende Natur eines Skripts.

Normalerweise blockieren JavaScript-Dateien, die mit dem <script>-Tag geladen werden, das Herunterladen von Ressourcen sowie das Rendern von Elementen innerhalb der Webseite. Auch wenn die meisten modernen Browser dazu neigen, das parallele Herunterladen von JavaScript-Dateien zu unterstützen, müssen Bilddownloads und Seitenrendering immer noch warten, bis die Skripte vollständig geladen sind. Im Gegenzug erhöht sich die Zeit, die ein Benutzer auf die Anzeige der Seite warten muss.

Hier kommen asynchrone Lader ins Spiel. Mit einer von mehreren verschiedenen Ladetechniken entfernen sie die inhärente Blockierungsnatur eines Skripts, die das parallele Herunterladen von JavaScripts und Ressourcen ermöglicht, ohne das Seitenrendering zu beeinträchtigen. In vielen Fällen kann dies die Ladezeiten der Seite – teilweise drastisch – verkürzen.

Die meisten Lader behalten die Reihenfolge bei, in der Skripte ausgeführt werden, während sie einen Callback bereitstellen, wenn das Skript geladen und bereit ist. 

Das asynchrone Laden ist jedoch nicht ohne Einschränkungen. Wenn Skripts auf herkömmliche Weise geladen werden, wird Inline-Code nicht geparst oder ausgeführt, bis die externen Skripts sequenziell vollständig geladen sind. Dies ist beim asynchronen Laden nicht der Fall. Tatsächlich werden Inline-Skripte normalerweise geparst/ausgeführt, während die Skripte noch heruntergeladen werden. Auf ähnliche Weise lädt der Browser auch Ressourcen herunter und rendert die Seite, während die Skripte geladen werden. Auf diese Weise können wir zu Situationen gelangen, in denen Inline-Code, der möglicherweise davon abhängt, dass ein Skript / eine Bibliothek geladen wird, ausgeführt wird, bevor seine Abhängigkeit bereit ist oder bevor / nachdem das DOM selbst fertig ist. Daher behalten die meisten Lader die Reihenfolge bei, in der Skripte ausgeführt werden, während sie einen Rückruf bereitstellen, wenn das Skript geladen und bereit ist. Dies ermöglicht es uns, jeden abhängigen Inline-Code als Callback auszuführen, ggf. innerhalb eines DOM-fähigen Wrappers.

Außerdem kann das DOM bei einer kleinen oder gut optimierten Seite tatsächlich fertig sein oder sogar geladen werden, bevor die Skripte selbst fertig geladen sind! Wenn die fragliche Seite also nicht fortschreitend verbessert wird, da sie für das Styling stark auf JavaScript angewiesen ist, kann es zu einem FOUC oder einem Flash von nicht gestyltem Inhalt kommen. In ähnlicher Weise können Benutzer sogar ein kurzes FUBC oder einen Flash von unverhaltenem Inhalt erleben. Es ist wichtig, diese Dinge im Hinterkopf zu behalten, wenn Sie einen Skript-/Ressourcenlader verwenden.


Schritt 1 - Das yepnope-Testobjekt

Das yepnope-Testobjekt hat sieben grundlegende Eigenschaften, von denen jede optional ist. Dieses Objekt beinhaltet den eigentlichen Test, Ressourcen, die als Ergebnis des Tests geladen werden, Ressourcen, die unabhängig vom Test geladen werden sowie Callbacks. Hier ist ein Blick auf die Requisiten des Yepnope-Testobjekts:

  • test:

    Ein boolescher Wert, der die Bedingung darstellt, die wir testen möchten.

  • yep:

    Eine Zeichenfolge oder ein Array / Objekt von Zeichenfolgen, die die URLs der zu ladenden Ressourcen darstellen, wenn der Test wahr ist.

  • nope:

    Eine Zeichenfolge oder ein Array / Objekt von Zeichenfolgen, die die URLs der zu ladenden Ressourcen darstellen, wenn der Test falsch ist.

  • load:

    Eine Zeichenfolge oder ein Array / Objekt von Zeichenfolgen, die die URLs der zu ladenden Ressourcen darstellen, unabhängig vom Testergebnis.

  • both:

    Eine Zeichenfolge oder ein Array / Objekt von Zeichenfolgen, die die URLs der zu ladenden Ressourcen darstellen, unabhängig vom Testergebnis. Dies ist im Grunde syntaktischer Zucker, da seine Funktion im Allgemeinen die gleiche wie die load-Funktion ist.

  • callback:

    Eine Funktion, die für jede Ressource aufgerufen wird, wenn sie sequentiell geladen wird.

  • complete:

    Eine Funktion, die einmal aufgerufen wird, wenn alle Ressourcen geladen wurden.

Um eine Vorstellung von der Syntax zu bekommen, werfen wir nun einen Blick auf die einfachste mögliche Verwendung von yepnope: das Laden einer einzelnen Ressource.

... oder vielleicht ein Array von Ressourcen laden.

Wie wäre es mit einem Objektliteral, damit wir später benannte Rückrufe verwenden können?

Denken Sie daran, dass diese Ressourcen beim Herunterladen und Rendern der Seite asynchron geladen werden.


Schritt 2 - Bedingungen - Testen für die Funktionen der Zukunft!

So können wir Ressourcen asynchron laden! Das ist großartig, aber was ist, wenn einige Seiten eine bestimmte Ressource nicht benötigen? Oder was ist, wenn eine Ressource nur in einem bestimmten Browser benötigt wird, der keine hochmoderne neue Technologie unterstützt?

Kein Problem! Hier kommt der zugrunde liegende Zweck von yepnope in den Fokus. Mit der Eigenschaft test können wir Ressourcen je nach Bedarf bedingt laden. Nehmen wir beispielsweise an, dass die Modernizer-Bibliothek geladen ist.

Für diejenigen unter Ihnen, die mit Modernizer nicht vertraut sind, ist es eine raffinierte Testsuite, die zum Erkennen der Unterstützung von HTML5- und CSS3-Funktionen in Browsern verwendet wird.

Modernizer fügt dem html-Element der Seiten entsprechende Klassennamen hinzu, die die unterstützten und nicht unterstützten Funktionen darstellen, z. B. "js flexbox no-canvas" usw. Darüber hinaus können Sie innerhalb Ihres Codes auf jeden der Modernizer-Tests zugreifen, die boolesche Werte einzeln zurückgeben.

Lassen Sie uns also mit Modernizer die Unterstützung von hashchange-Ereignissen sowie die Unterstützung des Sitzungsverlaufs testen!

Hier sehen Sie unseren Test:

Dieser Test gibt natürlich nur dann true zurück, wenn der Browser beide Funktionen unterstützt.


Schritt 3 – Ressourcen bedingt laden

Nachdem unsere Testbedingung festgelegt wurde, definieren wir nun, welche Ressourcen basierend auf dem Ergebnis dieses Tests geladen werden sollen. Mit anderen Worten, wenn Sie eine bestimmte Ressource nur laden müssen, wenn dem Browser eine Funktion fehlt oder der Test fehlschlägt, können Sie diese Ressource einfach in der nope-Klausel definieren. Umgekehrt können Sie Ressourcen laden, wenn der Test erfolgreich ist, innerhalb der yep-Klausel.

Angenommen, der Browser unterstützt eine dieser beiden Funktionen nicht, laden wir das jQuery-Hashchange-Plugin von Ben Alman, das hashchange- und History-Unterstützung in älteren Browsern ermöglicht, die keine dieser Funktionen unterstützen.

Laden wir das Hashchange-Plugin hoch:

Im obigen Beispiel verwenden wir die yep-Eigenschaft nicht, da wir nur ein Shim bereitstellen, falls es benötigt wird.

Um die yep-Klausel zu veranschaulichen, testen wir jedoch die CSS3-Transformationsunterstützung und laden dann ein Stylesheet für Browser, die Transformationen unterstützen, und ein Vanilla-Stylesheet für Browser, die dies nicht tun. Außerdem laden wir ein jQuery-Plugin, das auch CSS3-Transformationen nachahmt.

Verwenden Sie sowohl yep als auch nope:

Beachten Sie, dass in beiden Beispielen alle Ressourcen asynchron geladen werden, während der Rest der Seite heruntergeladen und gerendert wird!


Schritt 4 – Laden von Ressourcen unabhängig von den Testbedingungen

Yepnope bietet auch die Möglichkeit, Ressourcen unabhängig von den Testergebnissen über die Eigenschaft load zu laden. Die load-Funktion lädt unabhängig vom test-Ergebnis immer alle Ressourcen, die ihr zugeführt werden. In ähnlicher Weise lädt die both-Requisite, die wiederum im Wesentlichen nur syntaktischer Zucker ist, Ressourcen unabhängig vom Testergebnis, oder genauer gesagt, bei jedem Ergebnis.

Standardmäßig wird geladen:

Laden unter beiden Bedingungen, syntaktischer Zucker:

In beiden obigen Beispielen werden Ressourcen asynchron geladen, egal was passiert.


Schritt 5 - Callbacks - Abhängiger Code nach dem Laden

Wie bereits erwähnt, können wir Inline-Code nicht auf die übliche Weise schreiben, wenn dieser Code davon abhängt, dass eines der Skripts geladen wird. Daher verwenden wir die Callback-Funktion von yepnope, die für jede Ressource einmal ausgelöst wird, nachdem sie geladen wurde. Die Callback-Funktion akzeptiert drei Parameter, die wie folgt belegt sind:

  • url

    Diese Zeichenfolge repräsentiert die URL der Ressource, die geladen wurde

  • result

    Ein boolescher Wert, der den Status der Last darstellt.

  • key

    Bei Verwendung eines Arrays oder Objekts von Ressourcen stellt dies den Index oder den Eigenschaftsnamen der geladenen Datei dar

Schauen wir uns einen einfachen Callback mit dem Hashchange-Plugin-Beispiel von vorhin an. Wir verwenden die bind-Methode von jQuery, um einen Handler an das Hashchange-Ereignis des window zu binden:

Ein einfacher Rückruf:

Unabhängig davon, in welchem Zustand sich das DOM befindet, wird dieser Callback, der sich in diesem speziellen Fall innerhalb eines dokumentbereiten Wrappers befindet, ausgelöst, sobald die Ressource geladen wird.

Nehmen wir jedoch an, wir laden mehr als ein Skript und müssen beim Laden für jedes Skript einen Rückruf auslösen. Die Angabe des Codes, den wir auf die obige Weise ausführen müssen, würde eine Redundanz schaffen, da der Rückruf jedes Mal ausgelöst wird, wenn eine Ressource geladen wird. Yepnope bietet jedoch eine großartige Möglichkeit, Rückrufe für jede Ressource unabhängig von anderen Rückrufen zu verarbeiten.

Indem wir ein Objektliteral verwenden, um die Ressourcen zu definieren, die wir laden, können wir innerhalb des Callbacks auf jeden Ressourcenschlüssel einzeln verweisen.

Schauen wir uns ein Beispiel an, in dem wir jQuery sowie das jQuery-Hashchange-Plugin laden, das davon abhängt, dass jQuery zuerst geladen wird. Dieses Mal verwenden wir jedoch Objektliterale!

Mit dem obigen Beispiel als Referenz können Sie Ihre eigenen Callbacks für jede Ressourcenauslastung geordnet implementieren.


Schritt 6 – Abschließen – Wenn alles gesagt und getan ist!

Schließlich haben wir den complete Callback, der nur einmal aufgerufen wird, nachdem alle Ressourcen geladen wurden. Wenn Sie beispielsweise eine Webanwendung "bootstrapping" und der auszuführende Code von allen geladenen Dateien abhängt, anstatt für jede Ressource einen callback anzugeben, schreiben Sie Ihren Code innerhalb des complete  Callback, sodass es nur einmal ausgelöst wird, nachdem alle Abhängigkeiten geladen wurden. Im Gegensatz zur callback-Funktion benötigt complete keine Parameter und hat auch keinen Zugriff auf die url-, result- oder key-Props.

Der complete Callback:

Der complete Callback ist also im Wesentlichen für alles nützlich, was getan werden muss, nachdem alle Ressourcen geladen sind.


Schritt 7 - Yepnope-Plugins, Präfixe und mehr!

Yepnope bietet uns noch ein weiteres nettes kleines Feature: Präfixe und Filter! Die von yepnope bereitgestellten Standardpräfixe, die immer dem Anfang einer Ressourcen-URL vorangestellt werden, werden verwendet, um eine Datei als CSS zu definieren, eine Ressource vorab zu laden oder auf Internet Explorer oder eine seiner Versionen abzuzielen. Werfen wir einen Blick:

  • css!

    Dieses Präfix wird verwendet, um yepnope zu zwingen, eine Ressource als Stylesheet zu behandeln. Standardmäßig behandelt yepnope .css-Dateien als Stylesheets und alles andere als JavaScript-Datei. Wenn Sie CSS also dynamisch bereitstellen, würde dieses Präfix yepnope zwingen, diese Ressource als Stylesheet zu behandeln.

  • preload!

    Mit diesem Präfix können Sie eine Ressource laden / zwischenspeichern, ohne sie auszuführen.

  • ie!

    Unter Umständen müssen Sie bestimmte Ressourcen nur laden, wenn Sie mit Internet Explorer oder einer bestimmten Version von Internet Explorer arbeiten. Daher helfen Ihnen die ie-Präfixe dabei, das Laden von Ressourcen gezielt auf ie oder bestimmte Versionen davon abzuzielen. Hier ist eine Liste der unterstützten ie-Präfixe, wobei gt für "Versionen größer als" und lt für "Versionen kleiner als" steht.

    • Internet Explorer: ie!
    • Internet Explorer nach Versionsnummer: ie5!, ie6!, ie7!, ie8!, ie9!
    • Internet Explorer-Versionen größer als: iegt5!, iegt6!, iegt7!, iegt8!
    • Internet Explorer-Versionen kleiner als: ielt7!, ielt8!, ielt9!

    Alle diese Filter sind verkettebar und dienen insofern als eine Art OR-Operator, dass die Ressource geladen wird, wenn einer von ihnen als true ausgewertet wird. Wenn wir also auf ie7 und ie8 abzielen müssen, würden wir der URL der Ressource einfach die entsprechenden Filter wie folgt voranstellen:

Erstellen Sie Ihre eigenen Filter!

Bei Bedarf bietet yepnope auch die Möglichkeit, mit den Methoden addFilter und addPrefix eigene Filter und Präfixe zu erstellen. Jeder von Ihnen erstellte Filter oder jedes Präfix wird an ein resourceObject übergeben, das eine Reihe nützlicher Requisiten enthält. Denken Sie jedoch daran, das resourceObject zurückzugeben, wenn dies erforderlich ist. Hier ist ein Blick auf das resourceObject:

  • url:

    Die URL der Ressource, die geladen wird.

  • prefixes

    Das Array der angewendeten Präfixe.

  • autoCallback

    Ein Callback, der nach dem Laden jedes Skripts ausgeführt wird, getrennt von den anderen.

  • noexec

    Ein boolescher Wert, der das Vorladen ohne Ausführung erzwingt.

  • instead

    Eine erweiterte Funktion, die dieselben Parameter wie der Lader verwendet.

  • forceJS

    Ein boolescher Wert, der erzwingt, dass die Ressource als Javascript behandelt wird.

  • forceCSS

    Ein boolescher Wert, der erzwingt, dass die Ressource als Stylesheet behandelt wird.

  • bypass

    Ein boolescher Wert, der bestimmt, ob die aktuelle Ressource geladen wird

Nehmen wir zum Beispiel an, Sie möchten die Möglichkeit haben, das Laden von Ressourcen zwischen Ihrem CDN und Ihrem Webserver im Handumdrehen umzuschalten. Können wir das trotzdem machen!? Ja! Lassen Sie uns zwei Präfixe erstellen, eines zum Laden vom CDN und das andere zum Laden von Ihrem Webserver.

Mit diesen Präfixen können wir jetzt ganz einfach zwischen unserem CDN und dem Webserver wechseln!


Schritt 8 - Ein paar Vorbehalte

Der bedingte Lader von Yepnope ist also mit einer Reihe nützlicher Funktionen ausgestattet, während er eine sehr kleine Stellfläche beibehält! Es gibt jedoch einige Dinge, die Sie vor der Verwendung beachten sollten.

  • No document.write 

    Wie bei jedem asynchronen Ladeprogramm können Sie document.write nicht verwenden.

  • Internet Explorer unter 9 und Ausführung von Callback 

    Internet Explorer-Versionen unter neun garantieren nicht, dass Rückrufe sofort nach dem Auslösen des entsprechenden Skripts ausgeführt werden.

  • Seien Sie vorsichtig mit dem DOM

    Ihr Skript kann geladen und ausgeführt werden, bevor das DOM bereit ist. Wenn Sie also das DOM manipulieren, ist es ratsam, einen DOM-fähigen Wrapper zu verwenden.

  • Sie sollten noch kombinieren wo es geht

    Nur weil Sie einen asynchronen Loader verwenden, heißt das nicht, dass Sie Ihre Ressourcen nicht nach Möglichkeit kombinieren sollten.

  • Asynchrone Lastgrenzen für Internet Explorer

    Ältere Versionen von Internet Explorer können nur zwei Ressourcen aus derselben Domäne gleichzeitig laden, während andere Versionen bis zu sechs Ressourcen laden können. Wenn Sie also mehrere Dateien laden, sollten Sie eine Subdomain oder ein CDN verwenden.


Abschluss - Gedanken zu yepnope.js

Alles in allem fand ich Yepnope ein großartiges Dienstprogramm! Es unterstützt nicht nur das asynchrone Laden von Skripten und Stylesheets, sondern bietet Ihnen auch eine schöne, saubere Möglichkeit, HTML5- und CSS3-Polyfills bedingt zu laden. Der Callback-Mechanismus ist gut durchdacht und die Möglichkeit, eigene Präfixe und Filter hinzuzufügen, ist einfach großartig! In Bezug auf die Leistung fand ich yepnope etwas auf Augenhöhe mit anderen Loadern, wie LABjs von Getify Solutions und require.js von James Burke. Natürlich ist jeder Loader anders und entspricht einem anderen Bedarf, aber wenn Sie es noch nicht getan haben, empfehle ich Ihnen, yepnope.js auszuprobieren!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.