© saicle/Shutterstock.com
PHP Magazin
Drei Regeln und das richtige Timing für sauberen jQuery-Code

JavaScript aufgeräumt

Dann und wann sitzt jeder Programmierer vor einem Stück altem Quelltext, von dem er nicht einmal sicher ist, ob er vielleicht selbst der Autor war. Dazu kommt der Auftrag, eine bestimmte Änderung umzusetzen. Diese Aufgabe steht zunächst hinter dem eigentlichen Verstehen des bestehenden Codes zurück. Entwickler verwenden hierbei scherzhaft die so genannten WTFs/min („What the fuck?!“ pro Minute) als Maß zur Beurteilung der Quelltextverständlichkeit. Gerade bei JavaScript können die WTFs/min schnell ansteigen. Ein neuartiges Projekt namens jquery-timing verspricht Abhilfe als Plug-in in jQuery-Programmen. Ihm gelingt es zusammen mit drei einfachen Programmierregeln, jQuery-Code erheblich zu vereinfachen und von seinem überflüssigen Ballast zu befreien.

Peter Liske


Als Skriptsprache unterstützt JavaScript verschiedene Techniken, um mit wenig Code schnell komplexe Programmabläufe zu realisieren. Ein sehr wertvolles Feature ist die Eigenschaft von JavaScript-Funktionen, gleichzeitig als Variable ansprechbar zu sein. Damit können Funktionen selbst als Parameter in anderen Funktionsaufrufen übergeben werden. Man spricht dabei von so genannten Callback-Funktionen. Das folgende Beispiel verwendet die Methode setTimeout zusammen mit einem Callback-Parameter:

function meineFunktion() { $('p').text('Hallo Welt');}setTimeout(meineFunktion, 3000);

Der Aufruf der Funktion meineFunktion() erfolgt hier noch nicht zu der Zeit, wenn der JavaScript-Interpreter den Quelltext abarbeitet. Stattdessen wird diese Funktion erst drei Sekunden später aufgerufen. Der Inhalt der Callback-Funktion ist ein einfacher jQuery-Befehl, der für ein HTML-Element vom Typ Paragraph den enthaltenen Text zu „Hallo Welt“ ändert. Das Beispiel ändert also nach drei Sekunden den Text eines Paragraph-Elements. In diesem Beispiel wird die Funktionsvariable meineFunktion nur einmal verwendet, weswegen man sie genau so gut als anonyme Funktion einbinden kann. Namenskollisionen könnten hässliche Bugs verursachen, sodass gerade in größeren Projekten reichlich Gebrauch von anonymen Funktionen gemacht wird. Mit einer anonymen Funktion verkürzt sich das Beispiel zu:

setTimeout(function(){ $('p').text('Hallo Welt');}, 3000);

Bei diesem kleinen Codebeispiel fällt es sicherlich auch nach Jahren noch leicht, dessen Funktionsweise korrekt zu verstehen. Interessanter wird der Fall, wenn eine ganze Kette von Callbacks gebildet wird.

Wie JavaScript-Code im Laufe der Zeit unüberschaubar wird

Ausgehend vom Beispiel zuvor sei dem Entwickler nach einiger Zeit die Aufgabe zugetragen, noch einen Hervorhebungseffekt für den geänderten Paragraph-Text einzubauen. Er wählt dazu eine geeignete CSS-Klasse highlight, die nach einer kurzen Zeitdauer von zwei Sekunden wieder zurückgenommen wird. Den Quelltext modifiziert er zu:

setTimeout(function(){ // Effekt nach 3 Sekunden $('p').text('Hallo Welt').addClass('highlight'); setTimeout(function(){ // Effekt nach 2 weiteren Sekunden $('p').removeClass('highlight'); }, 2000);}, 3000);

Kurz vor Livestellung dieses kleinen Effekts entscheiden sich die Designer, noch eine weitere Verzögerung von einer Sekunde einbauen zu lassen. Diesmal zwischen dem Ändern des Textes und dem Beginn der optischen Hervorhebung. Im gleichen Stil wie zuvor ände...

PHP Magazin
Drei Regeln und das richtige Timing für sauberen jQuery-Code

JavaScript aufgeräumt

Dann und wann sitzt jeder Programmierer vor einem Stück altem Quelltext, von dem er nicht einmal sicher ist, ob er vielleicht selbst der Autor war. Dazu kommt der Auftrag, eine bestimmte Änderung umzusetzen. Diese Aufgabe steht zunächst hinter dem eigentlichen Verstehen des bestehenden Codes zurück. Entwickler verwenden hierbei scherzhaft die so genannten WTFs/min („What the fuck?!“ pro Minute) als Maß zur Beurteilung der Quelltextverständlichkeit. Gerade bei JavaScript können die WTFs/min schnell ansteigen. Ein neuartiges Projekt namens jquery-timing verspricht Abhilfe als Plug-in in jQuery-Programmen. Ihm gelingt es zusammen mit drei einfachen Programmierregeln, jQuery-Code erheblich zu vereinfachen und von seinem überflüssigen Ballast zu befreien.

Peter Liske


Als Skriptsprache unterstützt JavaScript verschiedene Techniken, um mit wenig Code schnell komplexe Programmabläufe zu realisieren. Ein sehr wertvolles Feature ist die Eigenschaft von JavaScript-Funktionen, gleichzeitig als Variable ansprechbar zu sein. Damit können Funktionen selbst als Parameter in anderen Funktionsaufrufen übergeben werden. Man spricht dabei von so genannten Callback-Funktionen. Das folgende Beispiel verwendet die Methode setTimeout zusammen mit einem Callback-Parameter:

function meineFunktion() { $('p').text('Hallo Welt');}setTimeout(meineFunktion, 3000);

Der Aufruf der Funktion meineFunktion() erfolgt hier noch nicht zu der Zeit, wenn der JavaScript-Interpreter den Quelltext abarbeitet. Stattdessen wird diese Funktion erst drei Sekunden später aufgerufen. Der Inhalt der Callback-Funktion ist ein einfacher jQuery-Befehl, der für ein HTML-Element vom Typ Paragraph den enthaltenen Text zu „Hallo Welt“ ändert. Das Beispiel ändert also nach drei Sekunden den Text eines Paragraph-Elements. In diesem Beispiel wird die Funktionsvariable meineFunktion nur einmal verwendet, weswegen man sie genau so gut als anonyme Funktion einbinden kann. Namenskollisionen könnten hässliche Bugs verursachen, sodass gerade in größeren Projekten reichlich Gebrauch von anonymen Funktionen gemacht wird. Mit einer anonymen Funktion verkürzt sich das Beispiel zu:

setTimeout(function(){ $('p').text('Hallo Welt');}, 3000);

Bei diesem kleinen Codebeispiel fällt es sicherlich auch nach Jahren noch leicht, dessen Funktionsweise korrekt zu verstehen. Interessanter wird der Fall, wenn eine ganze Kette von Callbacks gebildet wird.

Wie JavaScript-Code im Laufe der Zeit unüberschaubar wird

Ausgehend vom Beispiel zuvor sei dem Entwickler nach einiger Zeit die Aufgabe zugetragen, noch einen Hervorhebungseffekt für den geänderten Paragraph-Text einzubauen. Er wählt dazu eine geeignete CSS-Klasse highlight, die nach einer kurzen Zeitdauer von zwei Sekunden wieder zurückgenommen wird. Den Quelltext modifiziert er zu:

setTimeout(function(){ // Effekt nach 3 Sekunden $('p').text('Hallo Welt').addClass('highlight'); setTimeout(function(){ // Effekt nach 2 weiteren Sekunden $('p').removeClass('highlight'); }, 2000);}, 3000);

Kurz vor Livestellung dieses kleinen Effekts entscheiden sich die Designer, noch eine weitere Verzögerung von einer Sekunde einbauen zu lassen. Diesmal zwischen dem Ändern des Textes und dem Beginn der optischen Hervorhebung. Im gleichen Stil wie zuvor ände...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang