JQuery Kochbuch (German Edition)

können Sie auch auf der Zeile mit dem Aufruf von
$test.show()
einen Breakpoint setzen und dann mit einem einzelnen »Step Into« in die Methode
.show()
hineinspringen.
    ----
    Diskussion
    Die minifizierte jQuery-Version ist wunderbar geeignet für Live-Sites, aber für die Entwicklung ist sie nicht so hilfreich. Der gesamte Code ist in einer oder zwei Zeilen zusammengefasst, wodurch es nahezu unmöglich ist, mit einem Debugger den Code Schritt für Schritt zu durchlaufen. Zudem wird es durch die häufige Anwendung verketteter Methoden schwieriger, in die jQuery-Methoden hineinzuspringen. Mit den Tipps aus diesem Rezept können Sie den jQuery-Code im Debugger leichter verfolgen – egal ob Sie einen Bug suchen oder nur lernen wollen, wie der Code funktioniert.
    ----
    Note
    Lassen Sie sich durch Ihre Test-affinen Freunde nicht davon abhalten, einen Debugger zu verwenden! Selbst wenn Sie die meisten Fehler durch Unit Tests und auf anderen Wegen finden, lernen Sie den Code doch am besten kennen, indem Sie ihn im Debugger Schritt für Schritt durchgehen und sich die Variablen und Eigenschaften anschauen.
    Wenn Sie den Code hingegen so lesen, müssen ihn in Ihrem Kopf durchlaufen und ein Gedanken-Modell für die Variableninhalte erstellen. Warum sollte dann nicht der Computer den Code durchlaufen und Ihnen zeigen , was in diesen Variablen steckt?
    ----

Weniger Server-Anfragen erzeugen
    Problem
    Sie haben auf Ihrer Seite jQuery und eine ganze Reihe von Plugins eingebunden. Die schiere Anzahl an Server-Anfragen verlängert aber die Ladezeiten Ihrer Seite:








    Nach dem Laden der Seite laden Sie auch noch mit
$.getJSON()
ein paar JSON-Daten herunter, wodurch es zu einer weiteren Server-Anfrage kommt:
$(document).ready( function() {
    $.getJSON( 'myjson.php?q=test', function( json ) {
     $('#demo').html( json.foo );
    });
});
    myjson.php
ist ein Skript auf Ihren Server, dass JSON-Daten wie die folgenden zurückliefert:
{
    "foo": "bar"
}
    Lösung
    Laden Sie jQuery aus Googles Ajax-Bibliothek und fassen Sie all Ihre Pluginsin einer einzigen Datei zusammen:



    Oder Sie fassen den gesamten JavaScript-Code, den Sie am häufigsten brauchen (jQuery, Plugins und Ihren eigenen Code) in einer einzelnen Datei zusammen:

    Egal, welchen Weg Sie wählen – es hilft auch, die
.js
-Dateien zu minifizieren (d.h. alle Kommentare und überflüssigen Whitespace zu entfernen), um die Größe zu verringern. Und stellen Sie sicher, dass Ihr Server bei den herunterzuladenden Dateien die gzip-Komprimierung nutzt.
    Da die Seite durch Ihre eigene Server-Anwendung generiert wird, können Sie die JSON-Daten beim Generieren direkt in die HTML-Seite »brennen«, wobei Sie ein

    Der hervorgehobene Teil des Skripts entspricht dabei den im ursprünglichen Code von
myjson.php
heruntergeladenen Teilen. In den meisten Serversprachen sollte es recht einfach sein, Inhalte auf diese Weise einzubinden.
    Jetzt ist der jQuery-Code, um die JSON-Daten zu nutzen, sehr einfach:
$(document).ready( function() {
    $('#demo').html( myJson.foo );
});
    Damit wird eine weitere Server-Anfrage vermieden.
    Diskussion
    Ein wichtiger Schritt für schnell ladende Seiten ist das Minimieren der HTTP-Anfragen. Es kann auch hilfreich sein, Anfragen an verschiedene Server zu stellen. Browser führen nur eine kleine Zahl paralleler Anfragen an eine Domain (oder Subdomain) durch, wenn Sie jedoch einige der Dateien von einer anderen Domain herunterladen, geschieht dies doch parallel.
    ----
    Note
    Lässt man unterschiedliche