Dieses Mal bringe ich Ihnen Javascripts Beobachtermodus. Was sind die Hinweise zum Javascript-Beobachtermodus? Das Folgende sind praktische Fälle Schauen Sie zusammen. Schauen Sie mal rein.
Das Beobachtermuster (auch als Publish-Subscribe-Muster bekannt) definiert eine Eins-zu-viele-Abhängigkeitsbeziehung zwischen Objekten, sodass alle davon abhängigen Objekte benachrichtigt und automatisch aktualisiert werden, wenn sich der Status eines Objekts ändert . .
Wenn der Benutzer einige Vorgänge auf der Webseite ausführt (z. B. Klicken), muss er oder sie einige vorgegebene Ereignisse ausführen (z. B. Formularübermittlung, Seitensprung)
Vorteile : Zwischen dem Herausgeber und dem Abonnenten Reduzierte Kopplung zwischen Objekten
Nachteile: Schwächt die Beziehung zwischen Objekten, was der Codepflege und dem Verständnis nicht förderlich ist
Implementierungsideen
Bestimmen Sie die Herausgeber
Herausgeber-Cache-Liste definieren, speichern Rückruffunktion Abonnenten benachrichtigen
Nachrichten veröffentlichen und Cache-Listen-Rückruffunktion nacheinander ausführen
einfache Implementierung
let event = {}; event.list = [];//增加订阅者event.listen = function(fn){ event.list.push(fn); }//发布消息event.trigger = function(){ for(var i = 0,fn; fn = this.list[i++];) { fn.apply(this,arguments); } }let click = function(){ console.log('event:click'); }let hover = function(){ console.log('event:hover'); } event.listen(click); event.listen(hover); event.trigger();//打印:‘event:click’'event:hover'
perfektes Beobachtermuster
let Event = (function(){ var list = {}, listen, trigger, remove; listen = function(key,fn){ list[key] = list[key]||[]; list[key].push(fn); }; trigger = function(){ var key = Array.prototype.shift.call(arguments), fns = list[key]; if(!fns || fns.length === 0) { return false; } for(var i = 0, fn; fn = fns[i++];) { fn.apply(this,arguments); } }; remove = function(key,fn){ var fns = list[key]; if(!fns) { return false; } if(!fn) { fns && (fns.length = 0); }else { for(var i = fns.length - 1; i >= 0; i--){ var _fn = fns[i]; if(_fn === fn) { fns.splice(i,1); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); Event.listen('click', function(type) { console.log('event: ' + type +' click'); }); Event.trigger('click' , 'button');//打印'event: button click'
Das Beobachtermuster kann für die Kommunikation zwischen Modulen, das Abonnieren von Benutzerereignissen und -status und das Auslösen der Ausführung der entsprechenden Logikverarbeitung verwendet werden.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Strategiemuster von Javascript
Das obige ist der detaillierte Inhalt vonBeobachtermuster in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!