Analyser les principes et les fonctions du modèle d'observateur JavaScript

Cet article présente principalement les principes et les méthodes d'implémentation du modèle d'observateur JavaScript (publication/abonnement), analyse brièvement les principes et les fonctions du modèle d'observateur JavaScript et fournit les compétences d'implémentation du modèle d'observateur sous forme d'exemples. Ce qui est nécessaire Les amis peuvent se référer à

Les exemples de cet article décrivent les principes et les méthodes d'implémentation du modèle d'observateur Javascript (publication/abonnement). Partagez-le avec tout le monde pour référence, comme suit :

Le modèle d'observateur est également appelé modèle de publication-abonnement. Il définit une relation un-à-plusieurs, permettant à plusieurs objets observateurs de surveiller un certain objet de sujet. en même temps. Tous les objets observateurs sont avertis lorsque l'état de l'objet sujet change. Il est composé de deux types d'objets, les sujets et les observateurs. Le sujet est chargé de publier les événements, et l'observateur observe le sujet en s'abonnant à ces événements. L'éditeur et l'abonné sont complètement découplés et ne connaissent pas l'existence de l'autre. . Partagez simplement le nom d'un événement personnalisé.

Dans Nodejs, le support natif de ce mode est implémenté via EventEmitter. Le mécanisme d'écoute d'événements en Javascript peut être compris comme un modèle d'observateur.

Ce qui suit est un PubSub personnalisé pour JS. La lecture attentive du code suivant vous aidera à comprendre le modèle d'observateur. Veuillez consulter github pour le code associé.

function PubSub() {
 this.handlers = {};
}
PubSub.prototype = {
  // 订阅事件
  on: function(eventType, handler){
    var self = this;
    if(!(eventType in self.handlers)) {
      self.handlers[eventType] = [];
    }
    self.handlers[eventType].push(handler);
    return this;
  },
   // 触发事件(发布事件)
  emit: function(eventType){
    var self = this;
    var handlerArgs = Array.prototype.slice.call(arguments,1);
    for(var i = 0; i < self.handlers[eventType].length; i++) {
     self.handlers[eventType][i].apply(self,handlerArgs);
    }
    return self;
  },
  // 删除订阅事件
  off: function(eventType, handler){
    var currentEvent = this.handlers[eventType];
    var len = 0;
    if (currentEvent) {
      len = currentEvent.length;
      for (var i = len - 1; i >= 0; i--){
        if (currentEvent[i] === handler){
          currentEvent.splice(i, 1);
        }
      }
    }
    return this;
  }
};
var pubsub = new PubSub();
var callback = function(data){
  console.log(data);
};
//订阅事件A
pubsub.on(&#39;A&#39;, function(data){
  console.log(1 + data);
});
pubsub.on(&#39;A&#39;, function(data){
  console.log(2 + data);
});
pubsub.on(&#39;A&#39;, callback);
//触发事件A
pubsub.emit(&#39;A&#39;, &#39;我是参数&#39;);
//删除事件A的订阅源callback
pubsub.off(&#39;A&#39;, callback);
pubsub.emit(&#39;A&#39;, &#39;我是第二次调用的参数&#39;);

Exécuter les résultats.

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!