Maison > interface Web > js tutoriel > le corps du texte

Modèle d'observateur en Javascript

php中世界最好的语言
Libérer: 2018-03-13 17:51:53
original
1450 Les gens l'ont consulté

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'
Copier après la connexion

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'
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal