Introduction détaillée au modèle d'observateur des modèles de conception JavaScript

Javascript est actif dans un environnement piloté par des événements, tels que la réponse de la souris, les rappels d'événements, les requêtes réseau, etc. Le mode 观察者, également connu sous le nom de 发布者-订阅者（publisher-subscriber）模式, gère la relation entre les objets, leurs comportements et leurs états, et gère la relation entre les personnes et les tâches.

1. Le modèle d'observateur le plus courant

1.1 Écouteur d'événement

document.body.addEventListener('click', function () {
    console.log('you clicked me, poor guy!')
});

Il s'agit du modèle d'observateur le plus simple et le plus courant, à l'exception de click En plus de load, blur, drag, focus, mouseover, etc. Un écouteur d'événements (écouteur) est différent d'un gestionnaire d'événements (gestionnaire). Dans un écouteur d'événements, un événement peut être associé à plusieurs écouteurs, et chaque écouteur traite indépendamment le message surveillé. Le gestionnaire d'événements est responsable de l'exécution et du traitement de l'événement ; . Après la fonction associée, un événement peut avoir une fonction de gestionnaire :

var dom = $('.dom');
var listener1 = function(e){
    //do one thing
}
var listener2 = function(e){
    //do another thing
}
addEvent(dom,'click',listener1);
addEvent(dom,'click',listener2);

Dans cet exemple d'écouteur d'événement, listener1 et listener2 sont tous deux des écouteurs pour les éléments dom. leurs fonctions respectives seront exécutées ;

var dom = document.getElementById('dom');
var handler1 = function(e){
    //do one thing
}
var handler2 = function(e){
    //do another thing
}
dom.onclick = handler1;
dom.onclick = handler2;

Dans l'exemple de ce gestionnaire d'événements, handler1 ne sera pas exécuté, seul handler2 sera exécuté, ce qui est une opération d'affectation.

1.2 Animation

Le mode observateur est largement utilisé dans l'animation. Le début, la fin, la pause, etc. de l'animation nécessitent qu'un observateur détermine le comportement et l'état de l'objet.

//定义动画
var Animation = function(){
    this.onStart = new Publisher;  //关于Publisher的设计将在1.3节介绍
    this.onComplete = new Publisher;
    this.onTween = new Publisher;
}
//定义一个原型方法
Animation.prototype.look = function(){
    this.onStart.deliver('animation started!');
    this.onTween.deliver('animation is going on!');
    this.onComplete.deliver('animation completed!');  
};

//实例一个box对象
var box = new Animation();

//定义三个函数作为subscribers
var openBox = function(msg){
    console.log(msg)
}
var checkBox = function(msg){
    console.log(msg)
}
var closeBox = function(msg){
    console.log(msg)
}

//订阅事件
openBox.subscribe(box.onStart);
checkBox.subscribe(box.onTween);
closeBox.subscribe(box.onComplete);

//调用方法
box.look()

//animation started!
//animation is going on!
//animation completed!

1.3 Construction d'Observer

Tout d'abord, il faut un éditeur. Définissez d'abord un constructeur et un tableau pour qu'il enregistre les informations sur l'abonné :

function Publisher(){
    this.subscribes = [];
}

L'éditeur a pour fonction de publier des messages, et définit une fonction prototype de diffusion :

Publisher.prototype.deliver = function(data){
    this.subscribes.forEach(function(fn){
        fn(data);
    });
    return this;
}

Suivant , construisez la méthode d'abonnement :

Function.prototype.subscribe = function(publisher){
    var that = this;
    var alreadyExists = publisher.subscribes.some(function(el){
        return el === that;
    });
    if(!alreadyExists){
        publisher.subscribes.push(this);
    }
    return this;
}

Ajoutez la méthode d'abonnement directement au prototype de fonction afin que toutes les fonctions puissent appeler cette méthode. De cette façon, la construction est terminée. Pour les méthodes d'utilisation, veuillez vous référer au cas d'utilisation de 1.2 Animation.
Une explication plus intuitive (prenez onStart comme exemple) : Lorsque l'objet box exécute la méthode look, exécutez onStart.deliver(), publiez l'événement onStart et diffusez notification'animation started!', à ce moment, onStart, qui a écouté openBox, écoute les informations diffusées par l'événement et les imprime.

1.4 Une autre façon de construire un observateur

Cette méthode imite le mécanisme de traitement des événements de nodejs, et le code est relativement concis :

    var scope = (function() {
    //消息列表
    var events = {};
    return {
        //订阅消息
        on:function(name,hander){
            var index = 0;  //记录消息时间的索引
            if(events[name]){  
                //消息名已存在，将处理函数放到该消息的事件队列中
                index = events[name].push(hander) - 1; 
            }else{
                events[name] = [hander];
            }
            //返回当前消息处理事件的移除函数
            return function(){
                events[name].splice(index,1);
            }
        },
        //关闭消息
        off:function(name){
            if(!events[name]) return;
            //消息存在，删除消息
            delete events[name];
        },
        //消息发布
        emit:function(name,msg){
            //消息不存在，不处理
            if(!events[name]) return;
            //消息存在，将该事件处理队列中每一个函数都执行一次
            events[name].forEach(function(v,i){
                v(msg);
            });
        }
    }
})();

var sayHello = scope.on('greeting',function(msg){
    console.log('订阅消息：' + msg);
});

var greeting = function(msg){
    console.log('发布消息：' + msg);
    scope.emit('greeting', msg);
}

greeting('hello Panfen!')

1.5 Observation dans l'implémentation de nodejs plan du mode observateur

Il existe un module d'événements dans nodejs pour implémenter le mode observateur. Vous pouvez vous référer à l'API Nodejs-Events pour parler du mode observateur. La plupart des modules ont un module d'événements intégré, vous pouvez donc directement utiliser submit pour lancer. events et ainsi de suite pour écouter les événements, ou définissez-le d'abord comme suit :

var EventEmitter = require('events').EventEmitter;
var life = new EventEmitter();
life.setMaxListeners(11);       //设置最大监听数，默认10

//发布和订阅sendName
life.on('sendName',function(name){
    console.log('say hello to '+name);
});
life.emit('sendName','jeff');

//发布和订阅sendName2
function sayBeautiful(name){
    console.log(name + ' is beautiful');
}
life.on('sendName2',sayBeautiful);
life.emit('sendName2','jeff');

Méthodes courantes :

• hasConfortListener : utilisé pour déterminer si l'événement émis a été émis. un auditeur

• removeListener : Supprimer l'auditeur

• listenerCount : Le nombre total de tous les auditeurs pour cet événement

• removeAllListeners : Supprimez tous (ou un) les auditeurs de l'événement

Résumé 1.6

Le modèle d'observateur établit la logique de 推送 et 收听 , applicable Pour les situations dans lesquelles vous souhaitez séparer le comportement humain du comportement des applications. Par exemple : lorsque l'utilisateur clique sur un onglet de la barre de navigation, un sous-menu contenant plus d'options s'ouvrira. Généralement, l'utilisateur choisira d'écouter directement l'événement de clic s'il sait quel élément. L'inconvénient est que ce n'est pas le cas. identique à l'événement click. Les événements sont directement liés entre eux. Une meilleure approche consiste à créer un objet onTabChange observable et à associer plusieurs implémentations d'observateurs.

Articles connexes :

Explication détaillée du modèle de conception JavaScript classique, le modèle de stratégie

Le modèle de conception JavaScript classique, le simple Exemple de code de modèle d'usine

Explication détaillée du modèle de conception JavaScript classique modèle singleton

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!