Das Script (Teil1) - Reflektion zum Code

[Felix Riesterer]

Für diejenigen, denen dieser erste Teil des Codes sehr fremd vorkommt, möchte ich hier ein paar Reflektionen anbieten.

Zuerst möchte ich auf Mathias' (alias "mollily"s) SELFHTML-Artikel "Organisation von JavaScripten" verweisen, in dem sehr vieles zur Syntax und zur Logik hinter dem Aufbau eines JavaScripts nachzulesen ist. Diesen "Lehrgang" könnte man als eine konkrete Anwendung vieler der dort genannten Aspekte verstehen.

Nun zu Teilen des Codes im Einzelnen:

var FaderFramework = {

Mit dieser Syntax (einem sogenannten Objekt-Literal) starten wir die Definition unseres großen Objektes. Dabei ist sehr zu beachten, dass am Ende kein Komma steht. Kommata werden benutzt, um innerhalb des Objektes dessen Eigenschaften (oder auch Funktionen/Methoden) voneinander zu trennen - jedoch darf nach der letzten Eigenschaft/Funktion/Methode eben _kein_ Komma mehr stehen, da sonst z.B. im Internet Explorer der JavaScript-Interpreter nach einer weiteren Eigenschaft sucht, diese aber nicht finden kann und deshalb mit einer Fehlermeldung abbricht - was wiederum zur Folge hat, dass unser Objekt dann nicht existiert.

oldWinOnLoad: false, // hier steht später vielleicht eine abgespeicherte Funktion

Hier definiere ich eine Eigenschaft namens "oldWinOnLoad" innerhalb des FaderFramework-Objektes (also "FaderFramework.oldWinOnLoad"), die den Wert false erhält. Da ich mich innerhalb der geschweiften Klammern des Objektliterals befinde, muss ich "FaderFramework." nicht (genauer: darf ich nicht!) davor notieren. Man beachte das Komma am Ende und den Doppelpunkt nach dem Namen der Eigenschaft! Diese beiden Details haben mit der JSON-Syntax zu tun, die hier bei einem Objektliteral zum Einsatz kommt.

Dass ich diese Eigenschaft an dieser Stelle definiere, ist im Grunde unnötig, denn ich definiere diese Eigenschaft später erneut (was diese Definition überschreiben wird), führe sie hier der Übersichtlichkeit wegen aber explizit auf.

Nun kommt der für Anfänger eher verwirrende Teil mit dem "Umbiegen" des "Autostarts" - dem "window.onload". In dieser Eigenschaft des http://de.selfhtml.org/javascript/objekte/window.htm@title=window-Objektes kann eine Funktion (besser: eine Referenz auf eine solche) abgelegt sein, die nach dem vollständigen Laden einer Seite (sprich: wenn alle Bild-, CSS- und sonstige Dateien geladen wurden) ausgeführt wird. Da wir unser Script dort eintragen wollen, dabei aber bereits eingetragene Funktionen nicht überschreiben wollen, müssen wir irgendwie diese Funktion (besser: die Referenz auf sie) speichern, um sie später wieder aufrufen zu können.

~~~javascript

start: function () {

// "this" bezieht sich auf "FaderFramework"
        this.oldWinOnLoad = window.onload; // alte onload-Funktion abspeichern (falls vorhanden)

  
So. Nun haben wir die Referenz auf die eventuell bereits vorhandene Funktion in unserem FaderFramework-Objekt unter der Eigenschaft "oldWinOnLoad" gespeichert. Man beachte, dass oben bei window.onload kein Klammernpaar steht! Das bedeutet, dass wir die Referenz auf die Funktion in window.onload speichern (also die Funktion selbst), nicht etwa deren Rückgabewert. Hätten wir stattdessen  
        `FaderFramework.oldWinOnLoad = window.onload();`{:.language-javascript}  
notiert, wäre in window.onload nur das abgelegt worden, was uns diese Funktion quasi als Ergebnis zurückliefern würde.  
  
Anstatt nun window.onload() aufzurufen (mit dem Klammernpaar!), könnten wir nun auch mit  
        `FaderFramework.oldWinOnLoad()`{:.language-javascript}  
denselben Effekt erreichen. Das ist auch genau das, was wir wollen: Eine Möglichkeit, die ursprünglich in window.onload vorhandene Funktion \_anders\_ aufrufen zu können.  
  
Da wir nun die bisherige Funktion aus window.onload "gerettet" haben, können wir window.onload neu befüllen, ohne dass uns jetzt etwas verloren ginge. Und genau das machen wir jetzt. Mittels einer simplen Zuweisung speichern wir in window.onload eine neue Funktion ab. Da wir ihr aber keinen Namen geben (wozu auch?), unter dem sie irgendwo abgelegt wäre (wie z.B. FaderFramework.init oder window.alert), nennt man sie eine anonyme Funktion.  
  

>         ~~~javascript

// neue (anonyme!) onload-Funktion erstellen um eventuelle alte Funktion(en) zu kapseln  

>         window.onload = function () {  
>             // War bereits eine Funktion in window.onload abgelegt worden?  
>             if (typeof(FaderFramework.oldWinOnLoad) == "function") {  
>                 // hier kann man nicht "this" benutzen, da diese Funktion nicht zu einem größeren Objekt gehört!  
>                 FaderFramework.oldWinOnLoad(); // gespeicherte onload-Funktion ausführen  
>             }  
>   
>             FaderFramework.onload(); // unsere onload-Funktion ausführen  
>         };  
>     },

Jetzt haben wir sichergestellt, dass nach dem Laden der Seite andere "Autostart-Funktionen" ausgeführt werden, und zwar _vor_ unserem "Autostart". Das ist "unobtrusive", sprich unaufdringlich.

Die restlichen Funktionen (besser "Methoden") unseres Objektes sind in diesem ersten Teil nur Platzhalter, um zu zeigen, wie es weitergehen wird.

Bitte unbedingt hier Posten, wenn es Verbesserungen gibt, die hier berücksichtigt werden sollten! Selbstverständlich sind ebenso Verständnisfragen sehr willkommen.

Liebe Grüße,

Felix Riesterer.