Entwickeln in JavaScript

Inhaltsverzeichnis

Auch mit JavaScript lässt es sich sauber und objektorientiert entwickeln. Nicht umsonst mausert sich die Sprache zur wichtigsten Option auf allen erdenklichen Zielplattformen. Doch es gilt auch Fallstricke zu beachten. Der Artikel zeigt wie es geht.

JavaScript ist durch die Omnipräsenz von Browsern auf allen erdenklichen Geräten auf dem Weg zur wichtigsten Programmiersprache. Die inzwischen etablierten JavaScript-Frameworks haben enorm zu diesem Status beigetragen, da sie den Entwickler weitgehend von den immer noch vorhandenen Browser-Inkonsistenzen befreien und komplizierte Aufgaben wie DOM-Manipulation oder AJAX-Requests im Vergleich zu nativem JavaScript deutlich erleichtern.

Für den dynamischen Austausch von Textinformationen in Webanwendungen hat sich das kompakte JSON-Format etabliert, das Daten in JavaScript-Objekten sammelt, die bei der Ausführung nicht mehr geparst werden müssen. Weiterhin sind wesentliche HTML5 zugeordnete Funktionen wie Geolocation, Zeichnungen via Canvas oder auch die Unterstützung mehrerer Threads über WebWorker ein Teil von JavaScript. Dennoch haftet der Sprache ein eher schlechtes Image an: Sie gilt als langsam, unstrukturiert und ungeeignet für die objektorientierte Programmierung.

Dieser Artikel zeigt, wie die bestehenden Nachteile weitgehend umgangen und eine saubere Grundlage für die Entwicklung von JavaScript-lastigen Anwendungen gelegt wird. Weiterhin werden aktuelle Entwicklungsumgebungen und -werkzeuge vorgestellt.

Objekte & Variablen

Einer der Nachteile von JavaScript ist die Tatsache, dass die Sprache auf globalen Variablen basiert. Globale Variablen sind gefährlich, weil sie schnell unbeabsichtigt überschrieben werden und in (sehr) großen Anwendungen zu Performance-Engpässen führen können. Schwerwiegender ist aber der Verlust der Übersichtlichkeit – es wird schnell unklar, wann wo was definiert wurde.

Um die damit verbundenen Auswirkungen möglichst gering zu halten, empfiehlt es sich, nur eine einzige globale Variable anzulegen. Sie sollte ein Singleton-Objekt sein, dass alle notwendigen Variablen und Werte enthält. Ein Singleton wird in JavaScript verwendet, um mehrere Attribute und Methoden in einem Objekt zu sammeln. Durch den Einsatz des Singleton-Objekts erreicht man quasi nebenbei ein echtes Namespacing, dass den Code zwar etwas vergrößert, aber entschieden besser lesbar macht.

var Application = {};

Application.Config = {
  name: "Jan",
  role: "developer",
  getName: function() {
    return this.name;
  }
};

Die Eigenschaften in diesem Objekt, beziehungsweise das Objekt selbst, sind nicht vor dem Überschreiben geschützt. Das ist in JavaScript auch prinzipiell nicht möglich – um es zu verhindern hilft nur die Konvention, Variablen niemals direkt zu setzen, sondern über entsprechende Methoden darauf zuzugreifen. Dafür bieten sich die aus der objektorientierten Programmierung bekannten Getter und Setter an. Hier ein denkbarer Ansatz:

var Application = {};

Application.Config = (function() {
  var myVariables = {
    name: "Jan",
    role: "developer"
  };
  return {
    getVariable: function(key) {
      if(typeof myVariables[key] !== 'undefined') {
        return myVariables[key];
      } else {
        return false;
      }
    },
    setVariable: function(key, value) {
      myVariables[key] = value;
    }
  };
})();

Der Vorteil des Konstrukts ist die Kapselung der enthaltenen Variablen – sie lassen sich nur von den im Objekt definierten Funktionen lesen und verändern. Ein Direktaufruf von Application.Config.name = "Jörg"; funktioniert zwar, ändert aber keine der vordefinierten Variablen. Stattdessen ist Application.Config.setVariable("name", "Jörg"); zu verwenden.

Mit diesem Ansatz lassen sich genauso "echte" private Variablen realisieren (Setter gibt immer false zurück) oder auch Konstanten definieren (Setter setzt jede Variable einmalig). Dazu hier ein – fast identisches – Beispiel für Konstanten:

Application.Config = (function() {
  var myConstants = {
    ID: null,
    BROWSER: null
  };
  return {
    getConstant: function(key) {
      if(typeof myConstants[key] !== 'undefined') {
        return myConstants[key];
      } else {
        return false;
      }
    },
    setConstant: function(key, value){
if (myConstants[key] === null && typeof myConstants[key] !== "undefined") {
        myConstants[key] = value;
      } else {
        return false;
      }
    }
  };
})();

Konstanten sind auch nützlich, um Laufzeit-Informationen zu speichern, die vor dem Start der Anwendung nicht bekannt sind, etwa die Browserversion. Da sich diese Werte während der Laufzeit nicht verändern, dürfen auch die entsprechenden Variablen nicht überschrieben werden.