Objektorientiertes Javascript

Der erste Artikel dieser Art soll sich mit der objektorientierten Verwendung von Javascript beschäftigen – und ist für alle jene bestimmt die Javascript nur als nette kleine Ergänzung kennen, um z.B. beim Klick auf einen Button eine Fehlermeldung auszugeben.

In meinem ersten Artikel für „phphatesme.com“ soll es um die objektorientierten Ansätze von Javascript gehen. Der Artikel erhebt keinen Anspruch darauf, ein vollständigerer Guide für die objektorientierte Entwicklung mit Javascript in Webentwicklungen zu sein. Viel eher will ich euch zeigen, zu was Javascript alles fähig ist – und wo die Vorteile dieser Art von Entwicklung liegen.

Anfangen möchte ich gerne mit einem praktischen Beispiel. In PHP:

class MyWindow
{
	private $title = '';
	private $size = null;

	public function __construct($newTitle)
	{
		$this->title = $newTitle;
	}

	public function setSize($width, $height)
	{
		$this->size = array('width' => $width, 'height' => $height);
	}
}

Klassen in Javascript funktionieren so leider nicht. Javascript kennt weder die Keywords „public“ noch „private“ noch einen Konstruktor. Bevor ich euch jetzt weiter auf die Folter spanne, hier die gleiche Klasse – in Javascript:

function MyWindow(newTitle)
{
	var title = '';
	var size = null;

	this.setSize = function(width, height)
		{
			size = {width: width, height: height};
		}

	title = newTitle;
}

Und schon habt ihr es geschafft. Dem aufmerksamen Leser ist mit Sicherheit nicht entgangen, dass das erste Schlüsselwort des Codeschnippels „function“ ist. Und hier kommen wir schon zum Knackpunkt der Objektorientierung in Javascript: Es wird nicht zwischen Objekten und Funktionen unterschieden.

Der mit Abstand größte Vorteil der objektorientierten Javascript-Programmierung ist die bessere Speicherkontrolle. Gerade bei modularen Websites kann es aufgrund von Caches notwendig sein, dass alle Skriptdateien im Vorfeld geladen werden. Muss der Browser nun alle Funktionen im globalen Sichtbarkeitsbereich erstellen, braucht das neben Speicher auch CPU-Zeit. Erstellt man jedoch Objekte, z.B. auch einfach nur „Controller“-Objekte, werden die Methoden erst bei der Instanziierung des Objekts „angelegt“. Um das allgemeiner zu formulieren: Der Code innerhalb des äußeren „function“-Schlüsselworts wird erst beim Aufruf dieser Funktion ausgeführt.

Um den Begriff „Controller“ in diesem Zusammenhang etwas genauer zu erklären, möchte ich euch einfach ein kleines Skript vorstellen, welches z.B. dazu dienen könnte, einen „Artikel weiterempfehlen“-Layer einzublenden:

function articleAdviseController(divId)
{
	var divElement = null;

	this.show = function()
		{
			divElement.style.display = 'block';
		}

	this.hide = function()
		{
			divElement.style.display = 'none';
		}

	divElement = document.getElementById(divId);
}

Zu guter Letzt noch ein kleiner Ausblick auf den nächsten Artikel, in dem ich speziell auf das Thema „Sichtbarkeit“ von Eigenschaften und Methoden eingehen möchte.