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

PHP-Funktion für Wake-on-LAN

Mal wieder eine kleine aber feine PHP-Funktion. Diesmal geht es darum, einen Rechner per Wake-on-LAN-Signal (WOL) über das Netzwerk aufzuwecken. Prinzipiell muss dazu nur eine Verbindung zu einem anderen Rechner im Netzwerk oder einem Router aufgebaut werden, der dann das entsprechende Signal im Netzwerk herumschickt und so den gewünschten Computer aufweckt, sobald dieser das Signal empfängt.

Das Signal ist relativ einfach aufgebaut: 6 Mal der Hexwert FF und anschließend 16 Mal die MAC-Adresse der Netzwerkkarte des zu weckenden Rechners. Dieses sogenannte MagicPacket wird via UDP an Port 0, 7 oder 9 gesendet.

Wenn man die IP-Adresse des Routers nicht kennt, kann auch ein Broadcast (Signal an alle Geräte im Netzwerk) gesendet werden, sofern der Router dies zulässt.

<?php
# MAC-Adresse des zu weckenden Rechners
$mac = '00:00:00:00:00:00';
# IP des Routers (255.255.255.255 für Broadcast)
$ip = 'udp://255.255.255.255';

function wakeup($mac, $router) {
    if(strlen($mac) !== 17)
      return FALSE;

    if(filter_var($router, FILTER_VALIDATE_URL) === FALSE)
      return FALSE;

    $raw = sscanf($mac, '%2x:%2x:%2x:%2x:%2x:%2x');
    $func = create_function('$v', 'return isset($v);');
    $raw = array_filter($raw, $func);

    if(sizeof($raw) !== 6)
      return FALSE;


    # Router-Verbindung aufbauen auf Port 9 mit 4 Sekunden Timeout
    $fp = fsockopen($router, 9, $errnum, $errstr, 4);

    if(is_resource($fp) === FALSE) {
        trigger_error('['.$errnum.'] '.$errstr, E_USER_ERROR);
        return FALSE;
    }


    # Beginn des MagicPacket
    $magicp = "\xFF\xFF\xFF\xFF\xFF\xFF";

    # MAC in ASCII-Zeichen umwandeln
    $hexmac = '';
    foreach($raw AS $c) {
        $hexmac .= chr($c);
    }

    # 16 Mal MAC an MagicPacket anhängen
    $magicp .= $hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac.$hexmac;

    fwrite($fp, $magicp);
    fclose($fp);

    printf('Wake-Up-Signal an %02X:%02X:%02X:%02X:%02X:%02X übertragen!', $raw[0], $raw[1], $raw[2], $raw[3], $raw[4], $raw[5]);
    return TRUE;
}

wakeup($mac, $ip);
?>

Ich benutze diese Funktion um den Server aus der Ferne aus dem Ruhezustand zu holen, um mit ihm arbeiten zu können.

09. Juni 2010, am frühen Abend · 0 Kommentare · code, funktion, netzwerk, php, schnipsel

Einfache Thumbnail-Funktion

Bei meiner Arbeit am Blog stoße ich immer wieder auf Probleme, die eine adäquate Lösung verlangen. Im Web gibt es zahlreiche Funktionen, die diese Probleme lösen (sollen). Doch nicht immer sind diese Funktionen auch nach meinem Geschmack. Deshalb nutze ich meist nur die grundlegenden Ideen dieser Funktionen und schreibe dann einfach meine eigenen.

Daher möchte ich nun einmal die Thumbnail-Funktion vorstellen, die ich hier benutze und die mir schon sehr gut gefällt.

<?php
function create_thumbnail($src_file, $max_x = 60, $max_y = 60) {
    if(extension_loaded('gd') === FALSE)
        return FALSE;

    list($src_x, $src_y, $type) = getimagesize($src_file);

    switch($type) {
        case IMAGETYPE_JPEG:
            $src_img = imagecreatefromjpeg($src_file);
        break;

        case IMAGETYPE_PNG:
            $src_img = imagecreatefrompng($src_file);
        break;

        case IMAGETYPE_GIF:
            $src_img = imagecreatefromgif($src_file);
        break;

        default:
            return FALSE;
    }

    if(is_resource($src_img) === FALSE)
        return FALSE;

    $ratio = min($max_x/$src_x, $max_y/$src_y);

    $thumb_x = round($src_x * $ratio);
    $thumb_y = round($src_y * $ratio);

    if($ratio < 1) {
        $thumb_img = imagecreatetruecolor($thumb_x, $thumb_y);
        imagecopyresampled($thumb_img, $src_img, 0, 0, 0, 0, $thumb_x, $thumb_y, $src_x, $src_y);
    } else {
        $thumb_img =& $src_img;
    }

    $thumb_file = '<Thumbnailordner>/'.$src_file;

    switch($type) {
        case IMAGETYPE_JPEG:
            imagejpeg($thumb_img, $thumb_file, 50);
        break;

        case IMAGETYPE_PNG:
            imagepng($thumb_img, $thumb_file);
        break;

        case IMAGETYPE_GIF:
            imagegif($thumb_img, $thumb_file);
        break;

        default:
            imagejpeg($thumb_img, $thumb_file, 50);
    }

    @imagedestroy($src_img);

    # nur freigeben, wenn ein Thumb nötig war (wegen Referenz)
    if($ratio < 1)
        @imagedestroy($thumb_img);

    return TRUE;
}
?>

Die Schnittstelle gestaltet sich sehr einfach. Übergeben werden nur Pfad und Dateiname der Ursprungsdatei und die maximale Ausdehnung in X- und Y-Richtung der Thumbnail-Datei. Die Ursprungsdatei wird dann proportional verkleinert, je nachdem welche Dimension überschritten wurde.

Die angegebene Funktion ist sicher nicht perfekt. Für Verbesserungsvorschläge bin ich immer offen und werde sie wenn nötig auch gerne einbauen.

Die Funktion steht, wie alle anderen Blog-Inhalte auch, unter einer Creative Commons-Lizenz.

29. Mai 2009, am frühen Nachmittag · 0 Kommentare · code, funktion, php, schnipsel, thumbnail