JavaScript-Designmuster-Beobachtermuster (Publisher-Subscriber-Muster)

JavaScript-Designmuster-Beobachtermuster (Publisher-Subscriber-Muster)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:35:42

Original

1088 Leute haben es durchsucht

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.

Code kopieren Der Code lautet wie folgt:

div.onclick = Funktion click (){

Alarm („Klick“)

}

Solange Sie das Klickereignis des Div 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, es handelt sich um ein Projekt, das die Zusammenarbeit mehrerer Personen erfordert. Ich habe die Module „Gamer“ und „Map“ abgeschlossen und mein Kollege A hat einen Bildlader „loadImage“ geschrieben.

Der Code für LoadImage lautet wie folgt:

Code kopieren Der Code 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 plötzlich ein, dass ich dem Spiel eine Soundfunktion hinzufügen sollte Bildlader.

Code kopieren Der Code lautet wie folgt:

loadImage( imgAry, function(){

Map.init();

Gamer.init();

Sound.init();

} )

Aber der Kollege A, der dieses Modul geschrieben hat, ist auf eine Auslandsreise gegangen. Hallo. Kann ich sie ändern? unruhig. Was wäre, wenn wir es so hätten schreiben können:

Code kopieren Der Code lautet wie folgt:

loadImage.listen( ”ready’, function(){

Map.init();

})

loadImage.listen( ”ready’, function(){

Gamer.init();

})

loadImage.listen( ”ready’, function(){

Sound.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.

Code kopieren Der Code lautet wie folgt:

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

Code kopieren Der Code lautet wie folgt:

Ereignisse = function() {

var listen, log, obj, one, remove, trigger, __this;

obj = {};

__this = this;

listen = function( key, eventfn ) { //Wirf deinen Lebenslauf in die Box, der Schlüssel sind deine Kontaktinformationen.

var stack, _ref; //stack ist eine Box

stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];

return stack.push( eventfn );

};

one = function( key, eventfn ) {

entfernen(Schlüssel);

return listen( key, eventfn );

};

entfernen = Funktion( Schlüssel ) {

var _ref;

return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;

};

trigger = function() { //Der Interviewer ruft an, um den Interviewer zu benachrichtigen

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;

}

}

zurück {

hör zu: hör zu,

eins: eins,

entfernen: entfernen,

Auslöser: Auslöser

}

}

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

Code kopieren Der Code lautet wie folgt:

//Abonnenten

var adultTv = Event();

adultTv .listen( ”play', function( data ){

Alert („Wessen Film ist heute“ data.name );

});

//Veröffentlicht von 

adultTv .trigger( „play“, { „name“: „Aso Nozomi“ } )