Ich habe letzten eine Möglichkeit gesucht, für ein Event-System, Funktionen mit dynamischen Parametern weiterzuleiten. Meine vorherige Lösungen war, dass die Funktion mit einem Array aufgerufen wird, der die Parameter zusammenfasst. Mich hat es aber immer gestört, dass es auf die ersten Blick nicht möglich ist, zu sehen, welche Parameter die Funktion braucht/benutzt.

Das Beispiel ist vereinfacht und gekürzt:

var event = function() {
	var events = {};

	// Nimmt ein Event entgegen
	this.add = function(name, eventFunction) {
    	events[name] = eventFunction;
	};

	// Führt alle Events aus
	this.action = function(data) {
		for (var x in events) {
			events[x](data);
		}
	};
};

// Initialisiert das erste Event-System
var event1 = new event();
// Initialisiert das zweite Event-System
var event2 = new event();

// Fügt die Events hinzu
event1.add('event1', function(data) {
	alert('Hallo '+data['name']+', du bist '+data['year']+' Jahre alt');
};
event2.add('event2', function(data) {
	alert('Arbeiter: '+data['name']+'; Status: '+data['status']);
};

// Führt alle Events mit den Parametern aus
event1.action({'name' : 'Hans', 'year'   : 45});
event2.action({'name' : 'Hans', 'status' : 'Mitarbeiter'});

Wenn man mehrere verschiedene Event-Systeme hat, wird es schell unübersichtlich, welche Funktion welche Parameter im Array braucht. Gerade auch wenn man den Code vom Event-System nicht doppelt oder mehrfach haben möchte.

Die Lösung ist die JavaScript Funktion “.apply()“, diese ist mit der PHP-Funktion “call_user_func_array()” vergleichbar. Die .apply()-Funktion ruft eine Funktion auf und übergibt ein Array als Parameter-Liste. Die Parameter einer Funktion kann man in JavaScript mit der Variable “arguments” auslesen. Diese Variable wird automatisch von jeder Funktion definiert und beinhaltet ein Array mit den Parametern. Der Index des Arrays ist die Postion des Parameters beim Aufruf.

Mit diesem Wissen, können wir das oben genannte Beispiel verbessern:

var event = function() {
	var events = {};

	// Nimmt ein Event entgegen
	this.add = function(name, eventFunction) {
    	events[name] = eventFunction;
	};

	// Führt alle Events aus
	this.action = function() {
		for (var x in events) {
			events[x].apply(null, arguments);
		}
	};
};

// Initialisiert das erste Event-System
var event1 = new event();
// Initialisiert das zweite Event-System
var event2 = new event();

// Fügt die Events hinzu
event1.add('event1', function(name, year) {
	alert('Hallo '+name+', du bist '+year+' Jahre alt');
};
event2.add('event2', function(name, status) {
	alert('Arbeiter: '+name+'; Status: '+status);
};

// Führt alle Events mit den Parametern aus
event1.action('Hans', 45);
event2.action('Hans', 'Mitarbeiter');

Mit dieser kleinen Änderung  ist der Code einfacherer zu lesen bzw. zu verstehen und man behält bei größeren Projekten besser die Übersicht.