Organisation von JavaScripten: Voraussetzungen und Überblick

JavaScript auslagern und extern am Dokumentende einbinden

Vermeiden Sie auf ins HTML eingebetteten JavaScript-Code. Verzichten Sie auf Inline-Event-Handler und script-Elemente, die direkt JavaScript enthalten. Binden Sie externe Scripte mit <script src="…"></script> ein. Aus Performance-Gründen sollten Sie dieses script-Element ans Dokumentende setzen, direkt vor den schließenden </body>-Tag.

Scripte bei DOM Ready initialisieren

Initialisieren Sie Ihre Script zu dem Zeitpunkt, wenn das HTML-Dokument eingelesen wurde und das DOM vollständig verfügbar ist. Dieser Zeitpunkt wird üblicherweise DOM ready genannt. Siehe Scripte beim Laden des Dokuments ausführen. Die üblichen JavaScript-Frameworks stellen dafür Methoden bereit. Intern arbeiten diese hauptsächlich mit dem DOMContentLoaded-Event. Wenn Sie kein Framework verwenden, gibt es auch lose Helferfunktionen für diesen Zweck, z.B. ContentLoaded von Diego Perini.

Beispiel jQuery:

$(function () {
  // …
});

Übergabe einer Funktion über ihren Namen:

$(funktion);

DOM-Zugriffe über Selektor-Engines

Nutzen Sie JavaScript-Selektor-Engines, um auf das Dokument über CSS-artige Selektoren zuzugreifen und Elemente auszuwählen. Alle verbreiteten Frameworks bringen solche mit, sie sind aber auch separat erhältlich (z.B. Sizzle).

Beispiel jQuery:

$(function () {
  // Liefert alle li-Elemente im Element mit der ID produktliste
  $('#produktliste li')
});

Zeitgemäßes Event-Handling

Nach den Ansprechen der Elemente können Sie Event-Handler registrieren. Dazu benötigen Sie eine leistungsfähige Event-Handling-Komponente, die sicherstellt, dass mehreren Handler für einen Typ registriert werden können und die Ihnen die Event-Verarbeitung durch Nivellierung von Browserunterschieden vereinfacht. Eine solche ist in den üblichen Frameworks eingebaut, alternativ können Sie eine lose addEvent-Helferfunktionen nutzen.

Beispiel jQuery:

$(function () {
  $('#produktliste li').click(function (e) {
    // … Verarbeite Ereignis …
  });
});

Zum effizienten Event-Handling gehört Event Delegation hinzu. Die Grundidee ist, dass Ereignisse bei einer ganzen Schar von Elementen durch ein darüberliegendes Element verarbeitet werden. Dazu macht man sich das Event Bubbling und Event Capturing zunutze. Beispielsweise jQuery bietet dafür die Methode on().

Klassenbasierte Objektorientierung in anderen Programmiersprachen

Viele verbreitete Programmiersprachen arbeiten zumindest teilweise objektorientiert und besitzen ausgereifte konventielle Konzepte zur Strukturierung von Programmen. Das sind vor allem Klassen und ferner Module, Pakete bzw. Namensräume.

Klassen werden üblicherweise mittels einer Deklaration beschrieben und können daraufhin verwendet werden. Sie bestehen aus Konstruktoren, Methoden und Eigenschaften. Sie können von anderen Klassen erben und diese erweitern. Von Klassen lassen sich beliebig viele Instanzen anlegen – oder nur eine Instanz im Falle von Singletons. Die Sichtbarkeit bzw. Verfügbarkeit von Methoden und Eigenschaften kann über Schlüsselwörter geregelt werden. So wird z.B. zwischen öffentlichen und privaten Eigenschaften und Methoden unterschieden. Eigenschaften können als nur lesbare Konstanten definiert werden. Darüber hinaus erlauben einige Programmiersprachen die Definition von Interfaces, ein Anforderungskatalog mit Methoden, die eine Klasse bereitstellen muss. Verbreitet sind ferner statische Methoden (Klassenmethoden) sowie Getter- und Setter-Methoden, die beim Lesen bzw. Schreiben von Eigenschaften aufgerufen werden.

Diese konventionelle klassenbasierte OOP sieht beispielsweise in PHP 5.3 folgendermaßen aus:

namespace Beispielnamensraum;

interface IBeispielInterface
{
  public function oeffentlicheMethode();
}

class Beispielklasse implements IBeispielInterface
{
  function __construct() {
    echo "Konstruktor\n";
  }

  public $oeffentlich = 'Öffentliche Eigenschaft';
  private $privat = 'Private Eigenschaft';

  public function oeffentlicheMethode() {
    echo "Öffentliche Methode\n";
    $this->privateMethode();
  }
  private function privateMethode() {
    echo "Private Methode\n";
    echo $this->privat . "\n";
  }

  const konstante = 'Klassenkonstante';
  public static $statisch = 'Statische Eigenschaft (Klasseneigenschaft)';
  public static function statischeMethode() {
    echo "Statische Methode (Klassenmethode)\n";
    echo self::$statisch . "\n";
    echo self::konstante . "\n";
  }
}

class AbgeleiteteKlasse extends Beispielklasse
{
  function __construct() {
    parent::__construct();
    print "Konstruktor von AbgeleiteteKlasse\n";
  }

  public function zusatzmethode() {
    echo "Zusatzmethode von AbgeleiteteKlasse\n";
    parent::oeffentlicheMethode();
  }
}

$instanz = new Beispielklasse();
$instanz->oeffentlicheMethode();
echo $instanz->oeffentlich . "\n";

echo Beispielklasse::statischeMethode();

$instanz2 = new AbgeleiteteKlasse();
$instanz2->zusatzmethode();

Dieses Beispiel soll hier nicht näher beschrieben werden, sondern nur den Hintergrund illustrieren für diejenigen, die solche oder ähnliche klassenbasierte OOP bereits kennen.

Die besagten Konzepte bilden in eine Richtschnur: Hält sich ein Programmierer an diese Konventionen, so ist mehr oder weniger garantiert, dass das Programm von anderen grob verstanden und wiederverwendet werden kann und nicht mit anderen Programmen in die Quere kommt. Selbst Sprachen, die nicht konsequent objektorientiert arbeiten, bekommen eine einheitliche Struktur dadurch, dass die Programmierer ihren Code in Namensräumen und Klassen organisieren.

JavaScript ist nicht fixiert auf Klassen

ECMAScript 3, der JavaScript zugrunde liegende Webstandard, besitzt diese Features nicht. Der Nachfolger ECMAScript 5 verbessert die eigentümlichen Fähigkeiten, bietet etwa Methoden zur Datenkapselung. Erst ECMAScript 6 führt Klassendeklarationen ein, die jedoch lediglich eine Kurzschreibweise für Konstruktoren und Prototypen ist und sich stark von der klassenbasierten Objektorientierung anderer Programmiersprachen unterscheidet.

JavaScript bringt von Haus aus keine »einzig wahre« Programmiertechnik für objektorientierte Programmierung mit. Das kann man als Nachteil auffassen, aber auch als Vorteil. Weil JavaScript ein vorgegebenes Gerüst zu fehlen scheint, fehlt Einsteigern die Orientierung. Es gibt nicht den einen vordefinierten Weg, ein Programme in JavaScript zu strukturieren. Stattdessen muss man sich selbst über die sinnvolle Organisation von JavaScripten Gedanken machen.

Glücklicherweise ist JavaScript so leistungsfähig, dass sich die Strukturen wie Klassen und Namensräume bzw. Module durchaus umsetzen lassen. Die Klassendeklarationen in ECMAScript 6 vereinfacht den Einstieg für diejenigen, die bereits andere, klassenbasierte Programmiersprachen beherrschen. Zusatzbibliotheken ermöglichen die Anwendung komplexere OOP-Konzepte in JavaScript.

Dabei sollten allerdings nicht die Eigenarten und besonderen Fähigkeiten von JavaScript vergessen werden. Im Gegensatz zu manchen streng klassenbasierten Sprachen ist JavaScript äußerst dynamisch und besitzt funktionale Aspekte. JavaScript-Kenner empfehlen, die Fähigkeiten von JavaScript zu nutzen, anstatt bloß klassenbasierte OOP überzustülpen. Mit diesen Möglichkeiten ist JavaScript nicht unbedingt schlechter und defizitär – es ist lediglich ein anderer, nicht minder interessanter und brauchbarer Ansatz.