JavaScript Observer Pattern (klassisch)_Javascript-Tipps

Das Observer-Muster, auch Observer-Muster genannt, ist eines der 23 von GoF vorgeschlagenen Software-Designmuster. Das Observer-Muster ist eines der Verhaltensmuster. Seine Funktion besteht darin, dass es bei einer Änderung des Status eines Objekts automatisch andere zugehörige Objekte benachrichtigen und den Objektstatus automatisch aktualisieren kann.

Konzept des Beobachtermusters

Der Beobachtermodus ist einer der Verhaltensmodi. Seine Funktion besteht darin, andere zugehörige Objekte automatisch zu benachrichtigen und den Objektstatus automatisch zu aktualisieren.
Das Observer-Muster bietet ein Mittel zur synchronen Kommunikation für zugehörige Objekte, um die Zustandssynchronisierung zwischen einem Objekt und anderen davon abhängigen Objekten aufrechtzuerhalten.

Beobachtermodusrolle:

Thema (beobachtet)
Das beobachtete Objekt. Wenn sich der zu beobachtende Zustand ändert, müssen alle Beobachterobjekte in der Warteschlange benachrichtigt werden. Das Subjekt muss eine Warteschlangenliste von Beobachterobjekten pflegen (hinzufügen, löschen, benachrichtigen).
ConcreteSubject
Die konkrete Erkenntnis der beobachteten Person. Enthält einige grundlegende Attributzustände und andere Operationen.
Beobachter
Schnittstelle oder abstrakte Klasse. Wenn sich der Status des Subjekts ändert, wird das Observer-Objekt über eine Rückruffunktion benachrichtigt.
ConcreteObserver
Konkrete Umsetzung des Beobachters. Nach der Benachrichtigung werden einige spezifische Geschäftslogikverarbeitungen abgeschlossen.

Das Beobachtermuster (auch Publisher-Subscriber-Muster genannt) ist eines der am häufigsten verwendeten Muster, einschließlich der Dom-Ereignisse, mit denen wir normalerweise in Kontakt kommen und dom Ein Beobachtermuster.

div.onclick = function click (){
alert ( ”click' )
}

Solange Sie das Klickereignis des Divs abonnieren, wird der Funktionsklick ausgelöst.

Was ist also das Beobachtermuster? Schauen wir uns zunächst das Beobachtermuster im Leben an.

Es gibt ein berühmtes Sprichwort in Hollywood: „Ruf mich nicht an, ich rufe dich an.“ Dieser Satz erklärt die Besonderheiten des Beobachtermusters. Wobei „ich“ der Herausgeber und „Sie“ der Abonnent ist.

Ein anderes Beispiel: Als ich zu einem Vorstellungsgespräch in das Unternehmen kam, sagte jeder Interviewer nach dem Vorstellungsgespräch zu mir: „Bitte hinterlassen Sie Ihre Kontaktinformationen und wir benachrichtigen Sie, wenn es Neuigkeiten gibt.“ Hier ist „Ich“ der Abonnent und der Interviewer der Herausgeber. So muss ich nicht jeden Tag oder jede Stunde nach den Interviewergebnissen fragen. Die Initiative zur Kommunikation liegt beim Interviewer. Und ich muss nur Kontaktinformationen angeben.

Das Beobachtermuster kann durchaus eine Entkopplung zwischen zwei Modulen erreichen. Angenommen, ich entwickle im Team ein HTML5-Spiel. Wenn das Spiel startet, müssen einige Bildmaterialien geladen werden. Nach dem Laden dieser Bilder wird die Spiellogik ausgeführt. Angenommen, dies ist ein Projekt, das die Zusammenarbeit mehrerer Personen erfordert, und mein Kollege A hat einen Bildlader „loadImage“ geschrieben

Der Code für LoadImage lautet wie folgt

loadImage( imgAry, function(){
Map.init();
Gamer.init();
} )

Nachdem das Bild geladen, die Karte gerendert und die Spiellogik ausgeführt wurde, fiel mir eines Tages plötzlich ein, dass ich eine Soundfunktion hinzufügen sollte Code an den Bildlader senden.

loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )

Aber der Kollege A, der dieses Modul geschrieben hat, ist auf eine Auslandsreise gegangen. Hallo. Wo ist Ihre LoadImage-Funktion? Gibt es irgendwelche Nebenwirkungen, nachdem ich sie geändert habe? Was wäre passiert, wenn wir es so hätten schreiben können:

loadImage.listen( ”ready', function(){
Map.init();
})
loadImage.listen( ”ready', function(){
Gamer.init();
})
loadImage.listen( ”ready', function(){
Sount.init();
})

Nachdem LoadImage abgeschlossen ist, ist es egal, was in Zukunft passiert, da seine Arbeit abgeschlossen ist. Als nächstes muss nur noch ein Signal veröffentlicht werden.

loadImage.trigger( ”ready' );

Dann werden Objekte, die auf das „ready“-Ereignis von „loadImage“ hören, benachrichtigt. Dem Interviewer ist es völlig egal, wohin die Interviewer gehen, nachdem sie die Interviewergebnisse erhalten haben Für die Durchführung des Vorstellungsgesprächs sammeln Sie die Lebensläufe der Kandidaten. Wenn die Ergebnisse des Vorstellungsgesprächs vorliegen, werden Sie nacheinander entsprechend der Telefonnummer im Lebenslauf benachrichtigt

Nachdem wir über so viele Konzepte gesprochen haben, geben wir eine konkrete Umsetzung an. Der Umsetzungsprozess ist eigentlich sehr einfach. Der Interviewer wirft den Lebenslauf in die Schachtel und ruft einen nach dem anderen an Es ist der richtige Zeitpunkt, sie über das Ergebnis zu informieren

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}

Verwenden Sie abschließend den Beobachtermodus, um eine kleine TV-Anwendung für Erwachsene zu erstellen.

//订阅者
var adultTv = Event();
adultTv .listen( ”play', function( data ){
alert ( “今天是谁的电影” + data.name );
});
//发布者
adultTv .trigger( ”play', { ‘name': ‘麻生希' } )