Tipps und Tricks zu den Themen: Software- und Webentwicklung

Montag, 15. April 2013

JavaScript Closures und Closure Compiler

Es gibt verschiedene Möglichkeiten JavaScript zu komprimieren. Der Klassiker ist Yahoo!'s YUI-Compressor (minify JavaScript), der in verschiedensten Implementierungen zu finden ist. Daneben sind auch sogenannte "JavaScript Packer" weit verbreitet, bietet allerdings im Vergleich zur reinen "minify"-Variante eine schlechtere *.gzip-Komprimierung. In der Regel werden JavaScript Packer fälschlicherweise dazu eingesetzt um den Code zu schützen.

Wir wollen in diesem Artikel auf den Closure Compiler eingehen, den Google als kostenlosen Web-Service anbietet. Der Closure Compiler ist ein Tool das JavaScript schneller und kleiner macht und im Gegensatz zu vielen anderen Methoden den JavaScript-Code tatsächlich interpretiert und rekompiliert. Damit der Compiler möglichst viel optimieren kann sind einige Dinge zu beachten, auf die wir hier eingehen möchten. Am Ende werden zwei Fliegen mit einer Klappe geschlagen, der Code ist nicht nur kleiner und schneller, sondern gleichzeitig abgesichert gegen häufige Fehlerquellen.

Google Closure Compiler: http://closure-compiler.appspot.com.

1. Häufiger Fehler: Global Namespace
Häufig werden JavaScript-Anweisungen direkt in das Dokument geschrieben, dieser Teil des Scriptes landet somit automatisch im "Global Namespace". Dies ist übrigens auch oft die Ursache von Konflikten, da hier schnell verschiedene JavaScript-Funktionen und -Bibliotheken (auch Browser-Addons) denselben Bezeichner/Variablenname haben können und sich somit gegenseitig überschreiben und folglich einen Absturz des Scripts verursachen.

Nach der Anwendung von Closure Compiler: In diesem Beispiel konnte der Closure Compiler nichts optimieren, da alle Variablen und Funktionen im globalen Namespace liegen.


2. Die Lösung: Closure Functions (Anonyme Funktionen)
Neu hinzugekommen ist hier nur die erste und letzte Zeile. Der Code aus dem ersten Beispiel ist hier von einem sogenannten "Closure-Wrapper" umgeben. Man spricht häufig auch von einer anonymen Funktion. Die äußere, anonymisierende Funktion startet von selbst, daher die jeweils 2 zusätzlichen Klammern.

Nach der Anwendung von Closure Compiler: Der Closure Compiler konnte alle Member optimieren, da Variablen und Funktionen in einem privaten, anonymisierten Namespace liegen und somit nicht nach außen "sichtbar" sind. Weiterhin erkennt der Compiler Service mögliche Vereinfachungen und Abkürzungen. Hier wurde der Function-Call vollständig aufgelöst und mit dem Inhalt dieser Funktion ersetzt (Substitution).


3. Unser Tipp: Globale Objekte in Closures weitergeben
Oberhalb wird das globale Objekt definiert. Der Trick ist dieses Objekt durch eine anonyme Funktion zu initialisieren. Mithilfe der "return"-Anweisung wird eine Referenz vom anonymen Objekt auf das globale Objekt weitergegeben. Somit kann von außen auf innere Funktionen zugegriffen werden.

Solche globalen Objekte lassen sich auch wieder in einer Closure-Funktion übergeben, wie unmittelbar darunter demonstriert. Dadurch kann der Closure Compiler mehr optimieren.

Nach der Anwendung von Closure Compiler:


Keine Kommentare:

Kommentar veröffentlichen