Beobachtermuster in Javascript

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:

Proxy-Muster von Javascript

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!