Dieser Artikel ist Teil einer Serie:

  1. Mootools im Überblick
  2. Dollars und Events
  3. Ein Tutorial mit Objekten
  4. Klassen erstellen und erweitern
  5. Programmieren im Mootools-Stil

Nachdem wir im vergangenen Teil der Serie gesehen haben wie man Mootoools-Objekte benutzt, wird es Zeit, sich um die Erstellung eigener Klassen zu kümmern. Dieser Artikel soll das Klassen- und Vererbungssystem in seinen Grundzügen darstellen. Wer objektorientierte Programmierung kennt, sollte sich diesbezüglich schnell zurechtfinden. Was man mit den Klassen tolles anstellen kann, soll dann Bestandteil des nächsten Teils sein.

Klassen erstellen

Die Klassen in Mootools lassen sich genau so verwenden, wie man es aus anderen (richtigen) objektorientierten Programmiersprachen kennt. Ein simples Beispiel:

var Huhn = new Class({
    pick: function(){
        alert('Pick, pick!')
    }
});

So sieht die simpelste Form einer Mootools-Klasse aus. Unsere neue Klasse Huhn hat mit pick() eine Methode, die sich genau so aufrufen lässt, wie man das von anderen Objekten kennt:

var meinHuhn = new Huhn();
meinHuhn.pick(); // Alert: Pick, pick!

Klassen erweitern

Will man eine bestehende Klasse erweitern, muss man nur in der Extends-Eigenschaft entsprechend notieren:

var Hahn = new Class({
    Extends: Huhn,
    kraeh: function(){
        alert('Kikeriki!');
    }
});

Die Klasse Hahn erbt von der Klasse Huhn alle Eigenschaften und Methoden – in diesem Fall die pick()-Methode. Zusätzlich bringt Hahn noch seine eigene kraeh()-Methode mit:

var meinHahn = new Hahn();
meinHahn.pick();  // Alert: Pick, pick!
meinHahn.kraeh(); // Alert: Kikeriki!

Optionen benutzen

Um in die eigenen Klassen Funktionen aus anderen Klassen nutzbar zu machen, bietet sich die Implements-Eigenschaft an. In diesem Fall wird die Options-Klasse implementiert, die es uns erlaubt, unsere Klassen mit zusätzlichen Optionen zu initialisieren.

var Henne = new Class({
    Extends: Huhn,
    Implements: Options,
    options: {
        startEier: 2
    },
    eier: 0,
    initialize: function(options){
        this.setOptions(options);
        this.eier = this.options.startEier;
    },
    legeEi: function(){
        this.eier++;
    },
    zaehleEier: function(){
        alert(this.eier);
    }
});

Die Henne-Klasse erweitert die Huhn-Klasse und erbt dadurch die pick()-Methode. Sie implementiert die Options-Klasse und macht sich damit die setOptions()-Methode zu Eigen. Außerdem hat Henne mit initialize() eine Constructor-Funktion, die die Variablen verarbeitet, die beim Erstellen der Klasse übergeben werden.

Henne hat mit startEier eine Option, die festlegt, wie viele Eier unser Federvieh als Startkapital bekommt. In der Klasse selbst ist in der 4. Zeile ein Standardwert (2) notiert, der von initialize() überschrieben wird. Das sieht in der Praxis dann so aus:

meineHenne = new Henne();
meineHenne.zaehleEier(); // Alert: 2 (Standardwert)

var meineAndereHenne = new Henne({
    startEier: 5
});
meineAndereHenne.zaehleEier(); // Alert: 5

Die Anzahl der Eier wird in der internen Variable eier gespeichert. Mit der legeEi()-Methode erhöht man den internen Ei-Counter um eins, während der Startwert weiterhin unter options.startEier zu finden ist:

var meineHenne = new Henne({
    startEier: 7
});
meineHenne.legeEi();
meineHenne.legeEi();
meineHenne.zaehleEier(); // Alert: 9
alert(meineHenne.options.startEier); // Alert: 7

Zusätzliche Methoden implementieren

In jede bestehende Klasse kann man nachträglich zusätzliche Methoden implementieren:

Huhn.implement({
    scharr: function(){
        alert('Scharr, scharr!');
    }
});
var meinHuhn = new Huhn();
meinHuhn.scharr(); // Alert: Scharr, scharr

All das geht auch mit den Standardklassen von Mootools! Um mal ein Beispiel ohne Hühner zu nehmen, implementieren wir doch einfach mal eine Methode in die Element-Klasse (die Klasse für alle HTML-Elemente), die die betroffenen Elemente komplett leer macht:

// Vorher: <div id="meinDiv">Ein <code>DIV</code> voller HTML!</div>
Element.implement({
    empty: function(){
        this.set('html', '');
    }
});
$('meinDiv').empty();
// Nacher: <div id="meinDiv"></div>

Und weil, wir erinnern uns, alles in Mootools aus Objekten und Klassen besteht, können wir auch alles im Framework nach unserem Geschmack umkrempeln oder als Basis für eigene Kassen verwenden.

Und wozu das Ganze?

Nun ist es ja ganz nett, dass man Klassen erstellen und modifizieren kann, aber es drängt sich natürlich die Frage auf, wie man das Ganze effektiv nutzen kann. Im nächsten Teil der Serie werden wir wieder tutorialartig ein Beispiel durchgehen, das verdeutlichen wird, wie man sich mit Mootools-Klassen viel Arbeit ersparen kann.