Modèle d'observateur en Javascript

Cette fois, je vous présente le Mode Observateur de Javascript, quelles sont les Notes du Mode Observateur de Javascript, voici des cas pratiques, prenons un regardez ensemble Jetez un oeil.

Le modèle observateur (également connu sous le nom de publication-abonnement) définit une relation de dépendance un-à-plusieurs entre les objets, de sorte que lorsque l'état d'un objet change, tous les objets qui en dépendent sont notifiés et automatiquement actualisés. .

Lorsque l'utilisateur effectue certaines opérations sur la page Web (comme cliquer), il doit effectuer certains événements planifiés (tels que la soumission d'un formulaire, le saut de page)

Avantages : Entre l'éditeur et l'abonné Couplage réduit entre les objets

Inconvénients : affaiblit la relation entre les objets, ce qui n'est pas propice à la maintenance et à la compréhension du code

Idées d'implémentation

Déterminer le éditeur

Définir la liste de cache des éditeurs, stocker la fonction de rappel avertir les abonnés

publier des messages et exécuter la fonction de rappel de la liste de cache en séquence

implémentation simple

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'

Modèle d'observateur parfait

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'

Le modèle d'observateur peut être utilisé pour la communication inter-modules, l'abonnement aux événements et aux statuts des utilisateurs et le déclenchement de l'exécution du traitement logique correspondant.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Modèle de proxy de Javascript

Modèle de stratégie de Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!