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

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

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

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

loadImage.trigger( ”ready' );

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
}
}

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