Auf fremdes Event reagieren/fremdes Event abonnieren

[Questioner]

Hi Leute,

ich versuche mein Problem mal an einem Beispiel zu erklären.

Ich habe ein Objekt "Filter" und ein Objekt "Elemente", von denen ich jeweils mehrere Instanzen bilden möchte.
Nun soll jede Objektinstanz von "Filter" ein Event "filter" bereitstellen, auf welches eine "Elemente"-Instanz hören/reagieren soll...

Beispiel-Code (nicht funktional):

function Filter(name) {
[INDENT]...
this.name = name;

this.setFilterValue = function(value){
[INDENT]this.value = value;
[B][I]Auslösung Event filterUpdate[/I][/B]
[/INDENT]
};
...[/INDENT]
};

function Elemente() {
.[INDENT]..
[I][B]this.gefiltert[/B][/I] = function(filter){
[INDENT]alert("filter.name");[/INDENT]
}
...[/INDENT]
};


var fA = new Filter("FilterA");
var fB = new Filter("FilterB");

var e1 = new Element();
e1.[I][B]abboniereEvent(fA.filterUpdate, gefiltert)[/B][/I];

var e2 = new Element();
e2.[I][B]abboniereEvent(fA.filterUpdate, gefiltert)[/B][/I];

var e3 = new Element();
e3.[B][I]abboniereEvent(fB.filterUpdate, gefiltert)[/I][/B];


fA.setFilterValue(1);
[I]-> e1.gefiltert() -> "FilterA"
-> e2.gefiltert() -> "FilterA"[/I]

fB.setFilterValue(1);
[I]-> e3.gefiltert() -> "FilterB"[/I]

Ich hoffe es ist klar, was ich vorhabe?!

Sobald das Filter-Objekt ein Event feuert, sollen andere Objekte (hier Elemente), die das Event abonniert haben, darauf reagieren. In OOP-Sprachen gibt es so ein Konstrukt natürlich, aber auch bei JS?!

Natürlich könnte ich in dem Filter-Objekt auch ein Array an Elemente-Instanzen pflegen und diese bei "Auslösung des Events" antriggern, jedoch soll keine feste Verbindung zwischen Filter und Element bestehen, sodass ein Element auch jederzeit und ohne weitere Verbindlichkeiten gelöscht werden kann.

Oder gibt es sonst Lösungsansätze?
Wichtig wäre mir, dies alles ohne irgendwelche Frameworks zu realiseren.

Vielen Dank und beste Grüße
Q

 

[Dormilich]

In OOP-Sprachen gibt es so ein Konstrukt natürlich, aber auch bei JS?!

Warum sollen Design Patterns auf OOP beschränkt sein*? Das Observer Pattern funktioniert in JS genauso gut wie in C++.

* - es ist ja gerade der Sinn dieser Patterns, dass sie für alle Programmiersprachen gelten

 

[Questioner]

Erstmal Danke für die Antwort, aber vielleicht habe ich in meiner Ausführung nicht ganz deutlich herausgestellt, worauf ich hinaus möchte...

Im Grunde nutze ich in anderen Programmiersprachen für mein Vorhaben Events:
- Objekt A stellt ein Event bereits
- Objekt B registriert eine Methode für das Event
- Objekt A feuert das Event
- Objekt B führt die Methode aus

In JS hat es mir aber den Anschein, dass
1. man Events nicht kappseln kann, da sie einen globalen Namen haben und immer vom Root-Element ausgehen (problematisch bei mehreren Instanzen eines "Objekts")

2. das Feuern des Events auf dem Objekt stattfindet, welches eigentlich auf das Event hören/reagieren soll...

Beispiel:

var event = new Event('blubb');
objekt.addEventListener('blubb', objekt.tuwas, false); //blubb ist ein globaler Name, eine Differenzierung der Instanzen scheint mir nicht möglich
objekt.dispatchEvent(event); //elem soll das Event ausführen... Das mache ich aber auf dem objekt selbst bzw. brauche es im Zugriff...

Und das verstehe ich eben nicht... Ich will ja ein Event, auf das sich mehrere Objekte registrieren können, und die alle reagieren, sobald das Event gefeuert wird. Wenn ich das Event für jedes Objekt explizit dispatchen muss, kann ich mir das ganze Eventhandling sparen und gleich die registrierte Methode ausführen...

Der Code hat doch den gleichen Sinn, wie das Beispiel oben:

objekt.tuwas();

Oder anders: Meine Vorstellung:

var event1 = new Event();
var event2 = new Event();

objekt1.addEventListener(event1, function(){alert("Ich bin Objekt 1");});
objekt2.addEventListener(event1, function(){alert("Ich bin Objekt 2");});
objekt3.addEventListener(event1, function(){alert("Ich bin Objekt 3");});

objekt4.addEventListener(event2, function(){alert("Ich bin Objekt 4");});
objekt5.addEventListener(event2, function(){alert("Ich bin Objekt 5");});

event1.dispatch();
-> Ausgabe:
Ich bin Objekt 1
Ich bin Objekt 2
Ich bin Objekt 3

event2.dispatch();
-> Ausgabe:
Ich bin Objekt 4
Ich bin Objekt 5

Wie gesagt, wenn ich für jedes Objekt das Event manuell feuern muss...

objekt1.dispatchEvent(event1);
objekt2.dispatchEvent(event1);
objekt3.dispatchEvent(event1);

objekt4.dispatchEvent(event2);
objekt5.dispatchEvent(event2);

...kann ich ja gleich die entsprechende Methode aufrufen...

objekt1.tuwas();
objekt2.tuwas();
objekt3.tuwas();

objekt4.tuwas();
objekt5.tuwas();

Kurz: Was hat es für einen Sinn, das Event an dem Objekt zu feuern, das eigentlich auf das Event reagieren soll?! Müsste man nicht das Event selbst feuern und alle registrierten Objekte bzw. Methoden werden getriggert?!

Also entweder habe ich Events in meiner bisherigen Karriere völlig falsch verstanden und eingesetzt, oder ich habe die Events in JS noch nicht richtig verstanden, oder aber in JS funktioniert das anders...
Ich denke aber es liegt eher an Zweiterem, denn bei einem click-, change-, input-, resize-, onload-, xy-Event, registriere ich doch auch eine Methode für ein objektspezifisches Event und es werden alle Methoden ausgeführt, die sich dafür registriert haben...

Das Observer Pattern ist ja gerade das, was ich beschrieben habe... Selbst ein Array pflegen und durchlaufen... Genau das sollen mir eigene Events aber doch abnehmen...