Florian Herlings, freier Webentwickler aus Düsseldorf.

Vorschlag zur Strukturierung von Javascript-Quelltext

Objektorientierung in Javascript war schon immer anders als in anderen Sprachen. Das Typsystem in Javascript ist so flexibel, dass man Klassen basierte Objekt-Orientierung nachstellen kann (vgl. „Defining classes and inheritance“ auf prototypejs.org), schick sieht dies dann aber nicht mehr aus (außer man bedient sich moderner Tools wie coffeescript). Zudem ist es möglich, alle Vorteile von Klassen basierten Systemen durch Javascripts Prototyp-Vererbung nachzustellen. Meiner persönlichen Meinung führt dies aber nicht zu lesbarem oder gar schönem Javascript-Code (vgl. „Vererbung über Prototypen“ in der deutschen Wikipedia).

Ein großer Vorteil von Javascripts Typsystem ist jedoch, dass man auch „normale“ Objekte in Javascript direkt mit Funktionen beladen kann. Dadurch kann man sehr einfach (und übersichtlich) Effekte erreichen, wie sie beispielsweise in Scala mit Singleton-Objekten erreicht werden können (vgl „Programming Scala“: „The Scala Object System“). Meiner Erfahrung nach sind Singleton-Objekte gerade für die Frontend-Programmierung interessant, da es oft eben nur einen Warenkorb, ein Formular oder einen API-Endpoint gibt und ein Klassen basiertes System eher im Weg stehen würde.

Beispielcode

Da es (zumindest für mich) immer einfacher ist, Code-Strukturierung direkt als Code zu sehen, habe ich ein kleines Beispiel vorbereitet. Es ist eine stark vereinfachte Version von Code, den ich schon oft in „legacy“-Projekten vorgefunden habe.

Grundsätzlich ist mit dem Code nichts falsch und er ist durchaus funktional: Um zu verhindern, dass die Variablen, die für alle Funktionen zur Verfügung stehen müssen in den globalen Namensraum laufen wurde der gesamte Code in eine Wrapper-Funktion verpackt und alle Variablen und Funktionen wurde mit dem Prefix slider_ versehen.

Listing 1
(function()
{
  var slider_counter,
      slider_num_elements;
 
  function slider_init()
  {
    slider_count = 0;
    slider_num_elements = 12;
  }
 
  function slider_previous()
  {
    slider_counter--;
    if (slider_counter < 0) slider_counter = 0;
  }
 
  function slider_next()
  {
    slider_counter++;
    if (slider_counter > slider_num_elements) slider_counter = slider_num_elements;
  }
 
  function slider_display()
  {
    //display current element
  }
 
  //Start slider
  slider_init();
  slider_next();
  slider_display();
 
}).call(this);

Strukturierungs-Vorschlag

Mein Refactoring-Vorschlag für Code wie diesen ist, ihn in Javascript-Objekte zu packen. Auf diese Weise hat man Code und Daten eng miteinander verbunden, ohne unschöne Wrapper-Funktionen oder unnötige Abhängigkeiten zu externen Bibliotheken einzubauen.

Listing 2
var Slider = 
{
  'counter': false,
  'num_elements': false,
 
  'init': function()
  {
    Slider.counter = 0;
    Slider.num_elements = 12;
  },
 
  'previous': function()
  {
    Slider.counter--;
    if (Slider.counter < 0) Slider.counter = 0;
  },
 
  'next': function()
  {
    Slider.counter++;
    if (Slider.counter > Slider.num_elements) Slider.counter = Slider.num_elements;
  },
 
  'display': function()
  {
    //display current element
  }
}
 
//Start slider
Slider.init();
Slider.next();
Slider.display();

Vorteile

Neben der streitbar besseren Lesbarkeit und der schöneren Verbindung von Code und zugehörigen Daten erreicht man durch diese Strukturierung jedoch einen Vorteil, auf den ich keineswegs mehr verzichten möchte: Strukturiert man seinen Code auf diese Art und weise, kann man zu jedem Zeitpunkt mittels eines Debuggers oder einer Webconsole bequem und nachvollziehbar Daten des Objekts ändern oder Funktionan aufrufen.

Will man zum Beispiel ausprobieren was passiert, wenn man die Methode slider_next 100 Mal aufruft, so muss man dies img Fall des ursprünglichen Codes (Listing 1) im Code ändern (eventuell auf den Server laden) und im Browser aktualisieren. Der Grund hierfür ist, dass man mit Tools wie z.B. dem Firebug die Methode slider_next im globalen Kontext nicht aufrufen kann.

Die hier (Listing 2) aufgeführte Objekt-Methode ermöglicht jedoch problemlos die Eingabe von Slider.next(); in die Javascript-Konsole und das Ermitteln des Resultats ist ebenso bequem möglich:

Lerne mehr auf CodeScouts.de