Der Observer-Modus (auch als Publisher-Subscriber-Modus bezeichnet) sollte einer der am häufigsten verwendeten Modi sein. Es wird in vielen Sprachen weit verbreitet, einschließlich der DOM -Ereignisse, mit denen wir uns normalerweise wenden. Es ist auch ein Beobachtermodus, der zwischen JS und DOM implementiert ist.
Die Codekopie lautet wie folgt:
div.onclick = function click () {
alert ("klicken ')
}
Solange Sie das Klickereignis der DIV abonnieren, wird der Funktionsklick ausgelöst.
Was ist der Beobachtermodus? Schauen wir uns den Observer -Modus im Leben an.
In Hollywood gibt es ein berühmtes Sprichwort. "Ruf mich nicht an, ich rufe dich an." Dieser Satz erklärt die Vor- und Nachteile eines Beobachtermusters. Unter ihnen ist "I" der Verlag und "You" ist der Abonnent.
Lassen Sie mich Ihnen ein weiteres Beispiel geben. Als ich zu einem Interview in die Firma kam, würde jeder Interviewer zu mir sagen, nachdem ich fertig war: "Bitte hinterlassen Sie Ihre Kontaktinformationen, und wir werden Sie benachrichtigen, wenn es Neuigkeiten gibt." Hier ist "I" der Abonnent und der Interviewer ist der Verlag. Ich muss also nicht jeden Tag oder jede Stunde nach den Interviewgebnissen fragen, und die Initiative in der Kommunikation liegt in den Händen des Interviewers. Und ich muss nur Kontaktinformationen bereitstellen.
Der Beobachtermodus kann die Entkopplung zwischen den beiden Modulen sehr gut erreichen. Wenn ich ein HTML5 -Spiel in einem Team entwickelt habe, musste zu Beginn des Spiels ein Bildmaterial geladen werden. Die Spiellogik wird erst nach dem Laden dieser Bilder ausgeführt. Angenommen, dies ist ein Projekt, bei dem mehrere Personen arbeiten müssen. Ich habe die Gamer- und Kartenmodule abgeschlossen und mein Kollege hat ein Image Loader LoadImage geschrieben.
Der Code von LoadImage lautet wie folgt:
Die Codekopie lautet wie folgt:
loadImage (imgary, function () {
Map.init ();
Gamer.init ();
})
Wenn das Bild geladen wird, wird die Karte gerendert und die Spiellogik ausgeführt. Nun, das Programm läuft gut. Plötzlich erinnerte ich mich, dass ich dem Spiel eine Tonfunktion hinzufügen sollte. Ich sollte den Bildlader eine Codezeile hinzufügen lassen.
Die Codekopie lautet wie folgt:
loadImage (imgary, function () {
Map.init ();
Gamer.init ();
Sount.init ();
})
Aber mein Kollege A, der dieses Modul schrieb, machte sich auf Auslandsausflug. Also rief ich ihn an, hey. Wo ist Ihre Loadimage -Funktion? Kann ich es ändern? Wird es nach dem Veränderung irgendwelche Nebenwirkungen geben? Wie Sie denken, passierten alle Arten von unruhigen Dingen. Wenn wir zu Beginn auf diese Weise schreiben könnten:
Die Codekopie lautet wie folgt:
loadImage.listen ("Ready ', function () {
Map.init ();
})
loadImage.listen ("Ready ', function () {
Gamer.init ();
})
loadImage.listen ("Ready ', function () {
Sount.init ();
})
Nach Abschluss der Lastimage kümmert es sich nicht darum, was in Zukunft passieren wird, da seine Arbeit erledigt ist. Als nächstes veröffentlicht es nur ein Signal.
Die Codekopie lautet wie folgt:
loadImage.trigger ("Ready ');
Dann erhalten die Probanden, die das 'Ready' -Ereignis von LoadImage angehörten, Benachrichtigungen. Genau wie beim letzten Interviewbeispiel. Der Interviewer kümmert sich nicht darum, wo die Interviewer nach Erhalt der Interviewergebnisse essen werden. Er ist nur dafür verantwortlich, die Lebensläufe der Interviewer gemeinsam zu sammeln. Wenn die Interviewergebnisse hervorgehen, werden sie sie nach der Telefonnummer im Lebenslauf einzeln benachrichtigen.
Nachdem wir über so viele Konzepte gesprochen haben, können wir eine bestimmte Implementierung erreichen. Der Implementierungsprozess ist eigentlich sehr einfach. Der Interviewer wirft den Lebenslauf in eine Box, und dann ruft der Interviewer einzeln auf, um die Ergebnisse zur richtigen Zeit zu benachrichtigen.
Die Codekopie lautet wie folgt:
Ereignisse = function () {
var Hören, Protokoll, obj, eins, entfernen, auslösen, __This;
obj = {};
__This = dies;
Listen = Funktion (Schlüssel, EreignisFn) {// Wirf den Lebenslauf in die Box, die Taste sind die Kontaktinformationen.
var stack, _ref; // Stack ist eine Box
Stack = (_ref = obj [Schlüssel])! = NULL? _ref: obj [key] = [];
return stack.push (EventFn);
};
Eine = Funktion (Schlüssel, Ereignisfn) {
entfernen (Schlüssel);
return listen (key, eventFn);
};
remove = function (taste) {
var _ref;
return (_ref = obj [key])! = null? _ref.length = 0: void 0;
};
Trigger = function () {// Der Interviewer ruft auf, um den Interviewer zu benachrichtigen
var fn, stack, _i, _len, _ref, key;
key = array.prototype.shift.call (Argumente);
Stack = (_ref = obj [Schlüssel])! = NULL? _ref: obj [key] = [];
für (_i = 0, _len = stack.length; _i <_len; _i ++) {
fn = stack [_i];
if (fn.apply (__This, Argumente) === false) {
false zurückgeben;
}
}
zurückkehren {
Hören Sie: Hören Sie, hören Sie,
eins: eins,,
entfernen: entfernen,
Auslöser: Trigger
}
}
Verwenden Sie schließlich den Beobachtermodus, um eine kleine Anwendung für Fernsehsender für Erwachsene zu treffen.
Die Codekopie lautet wie folgt:
// Abonnenten
var aduldtv = event ();
aduldtv .listen ("Play ', Funktion (Daten) {
Alert ("Wessen Film ist heute" + data.name);
});
//Herausgeber
aduldtv .trigger ("play ', {' name ':' ki aso '})