AdServer – Javascript-Helfer delegate

Fast jeder, der in Javascript schon einmal setTimeout() verwendet hat, war auch schon mit dem Problem konfrontiert, wie man der Methode ein oder mehrere Parameter übergeben kann.

function Hinweis() {
alert("Hallo");
}
window.setTimeout("Hinweis()", 10000);

Das hier ist kein Problem. Aber was wie geht es, wenn man der Methode einen Parameter übergeben möchte.

/*
* Ausgabe personalisieren
*/
function Hinweis(name) {
alert("Hallo " + name);
}
// ups. so geht das nicht mehr
window.setTimeout("Hinweis()", 10000);

Was wir nun benötigen ist eine Möglichkeit der Methode Hinweis einen Parameter mitzugeben. Dafür bietet Javascript verschiedene Möglichkeiten.


// 1. Möglichkeit
window.setTimeout("Hinweis('Peter');", 1000);
// 2. Möglichkeit
function Hinweis2() { Hinweis('Peter'); }
window.setTimeout("Hinweis2()", 1000); // Variante 1
window.setTimeout(Hinweis2, 1000); // Vaiante 2
// 3. Möglichkeit
window.setTimeout(function () { Hinweis('Peter'); }, 1000);

Meiner Meinung nach ist die 3. Möglichkeit, also das Verwenden einer anonymen Funktion, die eleganteste. Allerdings wahrscheinlich auch die, auf die gerade Anfänger nicht direkt kommen werden. Aber dafür gibt es ja das Internet.

Für dieses Problem habe ich in meine Sammlung von nützliche Javascript-Helfern die delegate-Methode aufgenommen. Damit ist es möglich, ganz einfach Stellvertreter für die verschiedensten Methode zu erstellen und somit einiges an Schreibarbeit einzusparen.


function delegate(func, obj, args) {
var params = args || arguments;
var f = function() {
var target = arguments.callee.target;
return func.apply(target, params);
};
f.target = obj;
f.func = this;
return f;
}

Verwendet werden kann die Methode dann folgendermaßen:

function nameundalter (name, alter) {
alert("Hallo " + name);
alert("Wie fühlt man sich mit " + alter);
}
window.setTimeout(delegate(nameundalter, this, ['Peter', 32]));

Ist das nicht einfach!

Eine weiter Möglichkeit ist es, das Javascript Objekt Funktion um diese Methode zu erweitern:

if (!Function.prototype.delegate) Function.prototype.delegate = function (obj, args) {
var params = args || arguments;
var f = function() {
var target = arguments.callee.target;
var func = arguments.callee.func;
return func.apply(target, params);
};
f.target = obj;
f.func = this;
return f;
}
window.setTimeout(nameundalter.delegate(this, ['Peter', 32]));

Dadurch kann man noch etwas mehr abkürzen. Bei der Javascript Sammlung für den AdServer habe ich allerdings auf die Erweiterung des Function Objekts verzichtet, da man nie sicher sein kann, in welchen Seiten das AdServer-Script eingebunden wird. Vielleicht gibt es dort schon diverse Erweiterungen, die man durch solchen Code beeinträchtigen würde.

Ich selbst habe diese Methode jetzt schon in verschiedenen Projekten verwendet und halte sie für eine der hilfreichsten Javascript-Helfer überhaupt.

Fork me on GitHub

Verwandte Themen:

  1. AdServer – Javascript-Helfer onload

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>