JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

Funktions-Verschachtelung um eins, so dass nur noch 18.000 Name Lookups übrig bleiben (zwei verschachtelte Funktions-Ebenen und der globale Gültigkeitsbereich zu je 6.000 Aufrufen), aber dann wird in der innersten Funktion ein weiterer Trick genutzt:
function fillTable( names ) { var e = esc; // jetzt Aufruf von e() anstatt esc() in der inneren Schleife
}
    Jetzt werden die 6.000 Aufrufe von
e()
jeweils mit einem einzelnen Name Lookup aufgelöst. Das reduziert die Name Lookups auf 12.000. Kein Wunder, dass man dadurch eine zehntel Sekunde sparen kann.

Das DOM mit .innerHTML schneller aktualisieren
    Problem
    Sie erzeugen einen großen HTML-Block und nutzen
$('#mydiv').html(myhtml);
, um ihn in das DOM einzufügen. Sie haben ein Profiling durchgeführt und festgestellt, dass die Methode
.html()
länger brauchtals erwartet.
    Lösung
    Nutzen Sie
$('#mydiv')[0].innerHTML = myhtml;
für schnelle Aktualisierungen des DOM – wenn Sie keine der Besonderheiten benötigen, die
.html()
anbietet.
    Diskussion
    Die Methode
.html()
nutzt die Eigenschaft
.innerHTML
, umden HTML-Code in das DOM einzufügen, aber sie führt vorher noch ein paar Schritte durch. In den meisten Fällen ist das egal, aber bei Performance-kritischem Code können Sie ein bisschen Zeit sparen, indem Sie die Eigenschaft
.innerHTML
direkt nutzen.
    Die interne jQuery-Methode
.clean()
kümmert sich um diese Verarbeitung. Schauen Sie sich den Quellcode zu
.clean()
an, dann sehen Sie, dass da so einiges passiert, um den HTML-Code zu »säubern«.
    ----
    Note
    Die einfachste Möglichkeit, die meisten Methoden im Quellcode von jQuery zu finden, ist eine Suche nach dem Methodennamen mit einem
:
dahinter. Um zum Beispiel die Methode
.clean()
zu finden, suchen Sie im unkomprimierten jQuery-Quellcode nach
clean:
.
    ----
    Der Code in Tabellen schneller laden sorgt bei diesem Säubern für ein wenig Stress. Der HTML-Code dieses Rezepts enthält eine ganze Reihe von

-Tags. Es gibt in
.clean()
einen regulären Ausdruck, der alle selbst-schließenden Tags (Tags, die mit
/>
enden und daher kein schließendes Tag benötigen) findet und prüft, ob sich diese Tags in der eingeschränkten Menge der HTML-Tags befindet, die selbst-schließend sein können. Wenn dies nicht der Fall ist, wird der HTML-Code in ein Paar aus öffnendem und schließendem Tag umgewandelt.
    Schreiben Sie zum Beispiel
$('#test').html('

');
, dann wird dieser ungültige HTML-Code automatisch in
$('#test').html('

');
konvertiert. Das Schreiben von Code wird dadurch einfacher, wenn Sie aber einen sehr langen HTML-String mit vielen selbst-schließenden Tags haben, muss
.clean()
sie alle prüfen – selbst wenn diese Tags wie das

im anderen Rezept gültig sind.
    Die Methode
.html()
ersetzt jeden vorhandenen Inhalt und kümmert sich darum, Speicherlecks zu vermeiden, indem alle Eventhandler entfernt werden, die Sie einem der zu ersetzenden Elemente per jQuery zugewiesen haben. Wenn der zu ersetzende Inhalt irgendwelche Eventhandler, sollten Sie bei
.html()
bleiben. Falls Sie nur den Code benötigen, um die Eventhandler aufzuräumen, jedoch auf die restliche HTML-Behandlung verzichten können, dann ist es eventuell auch möglich,
$('#test').empty()[0].innerHTML = myhtml;
zu nutzen.
    Zusammengefasst: Wenn Sie sicher wissen, dass Ihr Code in Bezug auf Events oder andere Inhalte nicht von jQuery aufgeräumt werden muss, können Sie (bei entsprechender Vorsicht) direkt
.innerHTML
verwenden. Ansonsten bleiben Sie sicherheitshalber bei
.html()
.

Debuggen? Sprengen Sie die Ketten
    Problem
    Eine Kette von jQuery-Methode führt irgendwo in einem der Glieder zu einem Fehler. Der HTML-Code sieht wie folgt aus:

    vorher

    nachher

    Hier der JavaScript-Code (als Teil eines Button-Click-Eventhandlers):
$('.foo').css({ fontsize: '18px' }).find('.bar').show();
    Lassen Sie den Code laufen, dann wird die Schriftgröße nicht gesetzt und das verborgene Element nicht angezeigt.
    Sie haben Firebug oder einen anderen JavaScript-Debugger, aber es ist schwer, sich im Code zurechtzufinden. Wie finden Sie heraus, wo die Kette ein Problem hat?
    Lösung
    Teilen Sie die Kette in die einzelnen Bestandteile auf und speichern Sie jedes jQuery-Objekt in einer Variablen:
// $('.foo').css({ fontsize: '18px' }).find('.bar').show();
var $foo = $('.foo');
$foo.css({ fontsize: '18px' });
var $bar = $foo.find('.bar');
$bar.show();
    Jetzt