Verfasst von: bletra | 16. November 2009

JavaScript: Objekte und private/public Eigenschaften und Methoden

JavaScript kennt keine eigentlichen Klassen, aber Objekte und Prototypen. Prototype kann man bei Wikipedia nachlesen, ist ein Entwurfsmuster aus der Kategorie Erzeugungsmuster. Neue Instanzen werden aufgrund von Vorlagen (Prototype) erzeugt. Viele Skripte verwenden ausschließlich eine Fülle von Funktionen, die miteinander interagieren. Bei kleineren Projekten ist dies sicher legitim. Arbeiten mehrere an einem Projekt oder soll das Projekt langfristig gewartet werden, ist es sinnvoll, Funktionen zu entwickeln, die Dinge verstecken und allgemeiner einzusetzen sind.

Ich möchte dies an einer einfachen Bücherliste verdeutlichen: Im einfachsten Fall haben Sie ein Eingabefeld mit der id „buch“ für einen Titel und zwei Knöpfe „hinzufügen“ und „zeigen“.

Screenshot Buchliste

Typischer Ansatz:

var buecher = new Array();
function add() {
  buecher[buecher.length] = document.getElementById("buch").value;
}
function show() {
  alert(buecher.join());
}

Ok? Zunächst stört mich die alert-Box. Eine Ausgabe mit DOM innerhalb des HTML-Codes ziehe ich vor. Auch verwendet die Funktion „add“ hardcoded die „id“ des Eingabefeldes. Wenn ich nun mehrere solche Funktionen habe und ich möchte eine ähnliche Funktionalität in einer anderen Seite einbauen, muss ich Zeile für Zeile durchgehen und schauen, ob der Code noch passt – sprich ich fange besser von Neuem an und verwende nur mein erworbenes Wissen wieder 😉

Es geht auch anders: Ich kann ein Objekt erzeugen, das im Konstruktor ids von entsprechenden Feldern bekommt. Auch in JavaScript gibt es das Schlüsselwort this. Alles, was mit this. definiert wird ist „public“, alles, was mit var deklariert wird ist „private“ – auch Funktionen!
Wir können das Beispiel also Umschreiben zu einem wiederverwendbaren Objekt, das wir in eine separate Datei auslagern können.

function CustomerReference(idBookList, idTitle) {
	/* private */
	var bookList = new Array();
	var nodeBookList = document.getElementById(idBookList);
	var nodeBookTitle = document.getElementById(idTitle);
	/* public */
	this.Add = function () {
		bookList[bookList.length] = nodeBookTitle.value;
		nodeBookTitle.value = ""; //so sieht die Benutzerin, dass etwas passiert ist
	};
	this.Show = function () {
		if(nodeBookList.firstChild) {
			nodeBookList.firstChild.nodeValue = bookList.join();
		}
		else {
			//Wenn ein Tag leer ist, dann ist firstChild undefined, also false
			nodeBookList.appendChild(document.createTextNode(bookList.join()));
		}
	};
}

Und die zugehörige HTML-Datei kann diese Vorlage nun instanziieren.

<script type="text/javascript">
var custRefs = null;
window.onload = ini;
function ini() {
	custRefs = new CustomerReference("booklist", "buch");
}
</script>
...
<form action="#">
	<div>
		<label for="buch">Titel:</label><input type="text" name="buch" id="buch" />
		<input type="button" value="hinzufügen" onclick="custRefs.Add();" /><br />
		<input type="button" value="zeigen" onclick="custRefs.Show();" />
		<p>Bücherliste:<span id="booklist"></span></p>
	</div>
</form>

Dies ist, wie eingangs erwähnt, der erste simple Wurf. Denkbare Erweiterungen: Doppelte Einträge verhindern, die Liste sortiert ausgeben, neben dem Buchtitel noch ISBN, Preis etc. verwalten.

Es lassen sich natürlich nicht nur private Eigenschaften definieren, sondern auch private Methoden. Dabei ist jedoch zu beachten, dass in einer privaten Methode der Zugriff auf öffentliche Methoden und Eigenschaften nur durch einen Kunstgriff möglich ist:

function example() {
  var self = this;
  function show() {
    //kein Zugriff auf this, aber:
    alert(self.Greeting);
  }
  this.Greeting = "Hallo";
}

Im nächsten Artikel werde ich die Vererbung genauer ansehen.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: