Wenn Du über neue Weblog-Einträge Bescheid wissen möchtest, dann abonniere einfach den Atom-Feed oder folge mir bei Twitter.

✗

10 Tipps zu jQuery

Durch Peter Kröner bin ich auf eine interessante Präsentation von Paul Irish gestoßen. In der Präsentation weist Paul auf 10 Dinge hin, die ihm beim Durchlesen der jQuery-Source aufgefallen sind.

Ich kann jedem Interessierten nur empfehlen sich das Video anzuschauen.

Im Folgenden möchte ich auf ein paar Dinge hinweisen, die ich auch noch nicht kannte und die mir speziell aufgefallen sind:

Selbstaufrufende Funktionsdefinition

(function myfunc(param) {

    // Funktionsrumpf hier einfügen

})(myvar);

In obigem Code wird eine (anonyme) Funktion namens myfunc(param) erstellt, die direkt im Anschluss mit dem Parameter myvar aufgerufen wird.

Zeitgesteuerte Wiederholungen

Wenn man ein Ereignis oder eine Funktion nach einer bestimmten Zeitspanne immer wieder wiederholen will, gibt es in JavaScript die Methode setInterval(func, delay). Nachteilig ist aber, dass die Funktion funcimmer nach der Ablauf der Zeitspanne delay aufgerufen wird, egal ob func längere Zeit zur Ausführung benötigt als delay. So kann es zum „Stau“ kommen.

setInterval(function() {
    myfunc();
}, 100);

Wenn myfunc() im Beispiel länger als 100 Millisekunden zur Ausführung benötigt, wird trotzdem nach 100 Millisekunden myfunc() erneut aufgerufen, usw. Doch mit der eben definierten selbstaufrufenden Funktionsdefinition kann man dem entgegenwirken:

(function myloop() {

    myfunc();
    setTimeout(myloop, 100);

})();

myfunc() wird nun erst vollständig abgearbeitet und erst dann nach einer Wartezeit von 100 Millisekunden wird myloop() und damit myfunc() erneut aufgerufen.
Einen Nachteil hat die Lösung aber trotzdem in meinen Augen: myloop() wird rekursiv aufgerufen und erzeugt dadurch natürlich einen Overhead der bei häufiger periodischer Ausführung nicht zu unterschätzen ist.

Elementfilter

In jQuery lassen sich relativ einfach alle Elemente eines bestimmten Typs finden. $(':password') findet beispielsweise alle Passwortfelder. Doch diese Methode ist sehr langsam, weil per Definition alle Elemente innerhalb des DOM durchgegangen werden und geprüft wird, ob die Elemente vom Typ password sind (also quasi $('*:password')).
Beschleunigen lässt sich das ganze, indem man ein wenig spezifischer wird. Den Typ password können nur Input-Felder haben. Also ist es sinnvoll, die Auswahl ein wenig einzuschränken. $('input:password') sucht nur nach Input-Felder vom Typ password, was wesentlich schneller ist.

Das Gleiche gilt auch für die Filter text, radio, checkbox, file, password, submit, image, reset und button.

JSON-Parsing

JavaScipt Object Notation ist ein einfaches Datenaustauschformat auf der Basis von anonymen JavaScript-Objekten. In JavaScript kann man so ein JSON-Objekt theoretisch einfach über eval() auswerten. Aber wie die sicherheitsbewussten unter euch wissen, ist eval() evil!
jQuery nutzt deshalb nativ die browsereigenen JSON-Parsing-Methoden. Für den Fall, dass diese nicht existieren (bspw. in älteren Browsern), haben sich die jQuery-Entwickler eine andere trickreiche Implementierung überlegt, ohne auf eval() zurückgreifen zu müssen:

var x = (new Function('return ' + jsonobj))()

Es wird schlicht ein neues Funktionsobjekt erzeugt, welches dann das JSON-Objekt zurückgibt. Auf diese Weise haben wir auch JSON geparsed, aber ohne Sicherheitsbedenken. Denn im Gegensatz zu eval() darf das Funktionsobjekt nur auf seinen eigenen Namensraum und Gültigkeitsbereich zugreifen und nicht auf den globalen. Daher kann es nicht zum Überschreiben von Variablen, Objekten, usw. kommen. (siehe Kommentare) Trickreich, stimmt’s?

jQuery-Performance

Abschließend möchte ich auch noch auf einen Vortrag von Paul Irish zum Thema „jQuery Anti-Patterns for Performance & Compression“ hinweisen, der einiges noch einmal aufgreift und vertieft. Für jeden jQuery-Entwickler ein Muss!

26. Juli 2010, am frühen Nachmittag · 2 Kommentare · code, funktion, javascript, jquery, linktipp, optimierung, performance

Kommentare

31. Juli 2010, 23:39 UhrKommentar von ChrisB
Auf diese Weise haben wir auch JSON geparsed, aber ohne Sicherheitsbedenken. Denn im Gegensatz zu eval() darf das Funktionsobjekt nur auf seinen eigenen Namensraum und Gültigkeitsbereich zugreifen und nicht auf den globalen. Daher kann es nicht zum Überschreiben von Variablen, Objekten, usw. kommen. Trickreich, stimmt’s?
Sehe ich nicht ganz so - man nehme mal folgendes Script (und teste es bspw. über http://jconsole.com/),
var jsonobj = "{ x : 'blah', y : new String(window.confirm=42) }"; alert(window.confirm); var x = (new Function('return ' + jsonobj))(); alert(window.confirm); alert(typeof window.confirm); window.confirm();
Während das erste alert noch function confirm() { [native code] } ausgibt, sagt das zweite nur noch 42, das dritte dann number - und zum Abschluss gibt's dann noch die Fehlermeldung TypeError: 'window.confirm' is not a function
Sieht mir so aus, als ob es doch zum Überschreiben von Variablen, Objekten usw. kommen kann.
03. August 2010, 17:44 UhrKommentar von Christian
OK, den Zugriff auf "superglobale" Objekte wie window habe ich nicht bedacht. Dabei besteht auch weiterhin ein Sicherheitsrisiko.
Eigentlich hatte ich mich an einfachereren Fällen orientiert.
var z = 42; var jsonobj = "{ x : z, y : 32}"; var z = eval('(' + jsonobj + ')'); alert(z.x) var y = (new Function('return '+jsonobj))(); alert(y.x);
Die erste Ausgabe wäre 42 (Zugriff auf globale Variable z). Die zweite Ausgabe wäre [object Object]. Wobei ich nicht weiß, warum y.x ein Objekt sein soll.

Pingbacks

22. August 2010Pingback von Selbstaufrufende JavaScript-Funktionen | techspread
„[…]Im Grunde genommen wird hier nichts anderes gemacht, als eine normale Methode zu definieren. Diese Klammert man ein und ruft sie danach sofort per () auf. Diese und weitere JavaScript-Tricks habe ich bei Christian Gürtler gefunden, der es wiederum aus dem Video 10 Things I Learned from the jQuery Source entnommen hat. P.S.: Nebenbei bin ich darüber gestolpert, dass Google nun Version 3 seiner Maps API freigegeben hat, damit wird alles leichter und besser. Vor allem muss man nun nicht mehr einen API-Key einbinden, sodass man z.B. WordPress-Plugins einfach verteilen kann.[…]“

10 Tipps zu jQuery

Selbstaufrufende Funktionsdefinition

Zeitgesteuerte Wiederholungen

Elementfilter

JSON-Parsing

jQuery-Performance

Kommentare

Pingbacks

Mitreden? Dann jetzt kommentieren!

Was’n das?

Abonnieren

Neue Kommentare

Neue Einträge

Lesenswert

Werbung