Scratchbook

Das Leben ist immer anders als die Realität.

Javascript objektorientiert

Claude, 30. Juli 2010, 14:24 Uhr

Warning: Use of undefined constant ri_rand_compare - assumed 'ri_rand_compare' (this will throw an Error in a future version of PHP) in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/random-image-widget/random_image.php on line 129 Warning: Use of undefined constant ri_rand_compare - assumed 'ri_rand_compare' (this will throw an Error in a future version of PHP) in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/random-image-widget/random_image.php on line 130 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700 Warning: Invalid argument supplied for foreach() in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700 Warning: Invalid argument supplied for foreach() in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Der Claude hat gestern die Prototyp-basierte Vererbung begriffen – glaubt er zumindest.

Wie es dazu kam? Er wurde vom CCC angefragt: Das Javascript-Blinkenlights sei eine prima Sache; ob man das auch für Arcade– und Stereoscope-Movies verwenden kann?

Arcade: Da kommen 8 Helligkeitsstufen hinzu. Nicht allzuviel Aufwand.

Stereoscope: Das sind 4 (!!) Screens, die synchronisiert ein Blinkenmovie abspielen.
4 Blinkenmovies gleichzeitig…

Tja, wie mach‘ ich das jetzt. Das JS-Blinkenlights ist ein Gebäude, bestehend aus einem Fenstergrid. Das Teil lädt ein XML, hat Frames, Timer und spielt das Filmchen ab.

Jetzt das Ganze mal 4.
Claude möchte aber nicht 3x Code kopieren; sondern einmal ein Gebäude mit den Funktionalitäten erstellen, und das Teil soll dann dupliziert werden und die 4 Screens sollen dann eigenständig laufen. Mit eigenen XMLs, Frames und Timern.

Langsam begreift auch Claude: Jetzt ist es Zeit für objektorientiertes Javascript!

Machen wir mal ein ganz einfaches Beispiel.

HTML

<div class="building">home</div>
<div class="building">namics</div>

Prototyp

Was wir brauchen, ist ein Prototyp. Eine Definition eines Gebäudes mit den Funktionalitäten und eigenständigen Variablen.

var Building = function() {
 
	this.frame = 0;
 
	this.increase = function() {
		this.frame = this.frame + 1;
	}
 
	this.get_frame = function() {
		console.info(this.frame);
	}
 
}

Mein Gebäude hat ein Frame (das aktuelle Bild im Film), eine Funktion zum Erhöhen des Frames und eine Funktion um den aktuellen Frame auszugeben.

this.frame = 0;

„this“ bedeutet: Die Variable „frame“ hängt später nicht mehr am Prototyp „Building“, sondern an dem Gebäude, welches man aus diesem Prototyp erstellt hat. Man spricht da auch von instanzieren und einer Instantvariable.

Alternativ kann ich den Prototyp auch so definieren:

var Building = function(){};
 
Building.prototype.frame = 0;
 
Building.prototype.increase = function(){
    this.frame = this.frame + 1;
}
 
Building.prototype.get_frame = function(){
    console.info(this.frame);
}

Anstatt ein „this“ verwende ich das Schlüsselwort „prototype“, um die Instanzvariablen zu definieren.

Los geht’s:

var home = new Building();

Ich habe ein neues Gebäude erstellt; „home“.

Was ist jetzt da genau passiert?
Die Funktion „Building“ wird aufgerufen, die Werte werden zugewiesen und alles was an einem „this“ oder „prototype“ klebt wandert in das neue Objekt „home“.

Was ist da drin?

Warum hat das jetzt Vorteile?
Diese Variablen sind eigenständig.

Ich könnte ja auch einfach ein „Building“ so erstellen:

var Building = {
	frame: 0,
	increase: function() {
		Building.frame = Building.frame + 1;
	},
	get_frame: function() {
		console.info(this.frame);
	}
}

Und erstellen:

var home = Building;

Aber: Seht ihr das Problem? Das „Building“ ist ja schon ein eigenständiges Objekt. Ich würde es bloss der neuen Variable „home“ zuweisen und die Werte würden einfach dort angezeigt werden.
Das Gebäude „Building“ wäre einfach unter dem anderen Namen „home“ erreichbar.
Und das ist nicht wirklich eigenständig…

Mit dem Prototyp aber kann ich beliebig viele weitere Gebäude erstellen, die alle eigenständig funktionieren.

Also noch eine „namics“:

var namics = new Building();

Dann erhöhe ich das Frame bei „namics“ um 5, bei „home“ um 3.

namics.increase();
namics.increase();
namics.increase();
namics.increase();
namics.increase();
 
home.increase();
home.increase();
home.increase();

Ausgeben:

home.get_frame();
namics.get_frame();

Ergebnis:

Gebäude pimpen

Jetzt bauen wir noch ein bisschen Komfort und Extras ein.
Zum Beispiel könnte ich das entsprechende HTML-Element selektieren, dem Gebäude übergeben und intern das jQuery-Objekt zwischenspeichern:

var Building = function(selector) {
 
	this.$ = $(selector);

…und damit spielen:

var home = new Building('.home');
home.$.fadeOut();

Deluxe-Variante

Ich mache aus allen Gebäuden (class=“building“) ein Gebäude, speichere jedes Gebäude in ein globales Array g.buildings und in ein globales Objekt g.buildings_n, um direkt darauf zuzugreifen. Dann starte ich auf allen Gebäuden den Timer, der jede Sekunde +1 hochzählt. Auf dem Namics-Gebäude starte ich den Timer ein zweites mal, nur um zu beweisen, dass die beiden wirklich völlig unterschiedlich ticken 😉

//global object
var g = g || {};
 
//buildings - providing access to all buildings
g.buildings = [];
g.buildings_n = {};
 
//a building...
var Building = function(ref) {
	this.frame = 0;
	this.$ = $(ref);
	this.name = this.$.text();
	g.buildings.push(this);
	g.buildings_n[this.name] = this;
}
 
Building.prototype.increase = function() {
	this.frame = this.frame + 1;
}
 
Building.prototype.highlight = function() {
	this.$.css('background', 'red');
}
 
Building.prototype.start_timer = function() {
	var that = this;
	setInterval(function() {
		//'this' is now related to setInterval... therefore, we use 'that'
		that.increase();
		that.$.text(that.name + ': ' + that.frame);
	},
	1000);
}
 
//lets build some buildings
$('.building').each(function() {
	new Building(this);
});
 
//loop through all buildings and start the timer
for (var i = 0; i < g.buildings.length; i++) {
	g.buildings[i].start_timer();
}
 
//just start another timer
g.buildings_n.namics.start_timer();

Ergebnis:

Javascript rockt!
Bahn frei für das Stereoscope Projekt.

Warning: count(): Parameter must be an array or an object that implements Countable in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/themes/scratchbook/navigation_bar_bottom.php on line 1