Als Webentwickler hat man heutzutage immer mehr mit umfangreichen Anwendungen zu tun, in denen die Logik über mehrere unstrukturierte JavaScript-Dateien verteilt ist. Dies können sowohl interne Skripte als auch Fremdbibliotheken sein. Auf die Variablen- und Funktionsnamen der letzteren Ausprägung hat man als Entwickler selbst keinen Einfluss. Folglich können schwer auffindbare Namenskonflikte entstehen, welche zwangsläufig zu einer gravierenden Unübersichtlichkeit führen und schlecht wartbar sind. In diesem Zusammenhang ist es sehr wichtig zu wissen, dass alle Variablen und Funktionen im globalen window-Objekt des Browsers gesammelt werden und manipulierbar sind. In Sprachen wie C# und Java wird dieses Verhalten über Features wie Packages und Namespaces unterbunden. Beides existiert in ES5 nicht! Wir sollten uns deshalb Gedanken darüber machen, wie sich Variablen, Objekte etc. strukturieren lassen.

Im Netz wird in diesem Zusammenhang Das Emulieren Von Namespaces durch das sogenannte Namespace-Entwurfsmuster empfohlen. Dieses Pattern fasst zusammengehörige Variablen und Funktionen, getreu dem Singleton-Entwurfsmuster, zusammen und dient als ein einfacher Container. Das sorgt für einen Grad an Struktur und ermöglicht die Flucht aus dem globalen Gültigkeitsbereich. Solange das entsprechende Objekt einen global eindeutigen Namen hat, führt dieses Vorgehen zu keinen Namenskonflikten. Einen entscheidenden Nachteil hat das Namespace-Entwurfsmuster. Es sind zwar die Probleme der Namenskonflikte gelöst, nicht aber, die der Sichtbarkeit von Variablen und Funktionen. Objekte sollten jedoch, getreu dem Motto Datenkapselung, nur so viel an Informationen nach außen hin preisgeben, wie unbedingt notwendig.

Das Revealing-Module-Entwurfsmuster, welches auf dem Namespace-Entwurfmuster basiert, löst das Problem der Datenkapselung durch die Verwendung von IIFE’s. Unter einer Immediately Invoked Function Expression versteht man eine Funktion, die nach der Deklaration direkt aufgerufen wird. Dabei findet die direkte Ausführung nur ein einziges Mal statt. Manche von euch wissen evtl. bereits worauf das Ganze hinaus läuft: Variablen, die in einer IIFE definiert werden, sind nur innerhalb der gesamten Funktion sichtbar. Das trifft im JavaScript im Prinzip auf alle Arten von Funktionen zu und wird als Function-Level-Scope bezeichnet. Um es genauer zu formulieren: IIFE’s ermöglichen das Emulieren von Block-Scopes. Ich spreche hier bewusst vom Emulieren, denn ES5 kennt keinen Block-Scope. Aber genug der Theorie, Schauen Wir Uns mal ein Beispiel an.

In unserem Beispiel emulieren wir ein Modul mit dem Namen SuperHero und einem eigenen privaten Sichtbarkeitsbereich. Unsere Implementierung hat dabei zwei Parameter. Den richtigen, streng geheimen sowie den öffentlichen Namen unseres Superhelden. Im Kontext einer IIFE besteht die Möglichkeit ein Objekt zurückzugeben, das die öffentliche API darstellt und Methoden und Eigenschaften außerhalb unseres Moduls sichtbar macht. Die Methoden dieses öffentlichen Objekts haben Zugriff auf alle Eigenschaften und Funktionen des Moduls. In anderen Worten ausgedrückt, alle Eigenschaften und Methoden werden erstmal privat und im Rückgabeobjekt öffentlich gemacht. Ein wichtiger Punkt ist, dass die Methoden des Rückgabeobjekts keine Kopie, sondern lediglich eine Referenz auf die entsprechende Variable zurückgeben. Deswegen spricht man in diesem Zusammenhang ebenfalls vom Singleton. Schauen wir uns als nächstes den Beweis an.

Das Beispiel zeigt einen Auszug aus einem window-Objekt einer beliebigen Stack-Overflow Seite. Nach der Ausführung unserer IIFE sehen wir, dass unser Superhero in einem eigenen Unterscope definiert ist. Lediglich die Methode getName() ist dabei öffentlich zugänglich.

Nach der Ausführung der Methode ist zu sehen, dass der öffentliche Name „Superman“ zurückgegeben wird. Der Zugriff auf den streng geheimen Namen ist nicht möglich. Genial oder? Falls ihr übrigens ein anderes Modul, wie z.B. jQuery, in eurem Modul nutzen wollt, könnt ihr dieses als Parameter übergeben.

Folgend die Vorteile des Revealing-Module-Patterns nochmals zusammengefasst:

• Strukturierung/Wartbarkeit/Übersichtlichkeit
• Datenkapselung
• Modularisierung
• Unterstützung in sämtlichen Browsern ohne spezielle Compiler

Der Beitrag It’s #FrontendFriday – Strukturiere deinen Code in JavaScript unter der Verwendung von ES5 erschien zuerst auf Business -Software- und IT-Blog - Wir gestalten digitale Wertschöpfung.