So implementieren Sie das Beobachtermuster in JavaScript

Der unten stehende Herausgeber wird Ihnen ein Beispiel für die native JavaScript-Implementierung des Beobachtermusters vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Editor und werfen wir einen Blick darauf

Das Beobachtermuster wird auch Publish-Subscribe-Muster genannt. Es definiert eine Eins-zu-Viele-Beziehung, die es mehreren Beobachterobjekten ermöglicht, ein bestimmtes Themenobjekt gleichzeitig zu überwachen . Dieses Themenobjekt Alle beobachtenden Objekte werden benachrichtigt, wenn sich sein Zustand ändert. Es besteht aus zwei Arten von Objekten, Themen und Beobachtern. Das Thema ist für die Veröffentlichung von Ereignissen verantwortlich, und der Beobachter beobachtet das Thema, indem er diese Ereignisse abonniert. Der Herausgeber und der Abonnent sind vollständig entkoppelt und wissen nicht, dass sie voneinander existieren . Teilen Sie einfach den Namen eines benutzerdefinierten Ereignisses mit.

In Nodejs wird die native Unterstützung für diesen Modus über EventEmitter implementiert.

Der Event-Listening-Mechanismus in JavaScript kann als Beobachtermuster verstanden werden. Binden Sie das Ereignis über Onclick und lösen Sie es dann durch interaktives Verhalten aus oder lösen Sie das Ereignis aktiv aus.

Das Folgende ist ein JS-angepasster PubSub. Wenn Sie den folgenden Code sorgfältig lesen, können Sie das Beobachtermuster besser verstehen.

1. Definieren Sie die Beobachterklasse Pubsub

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }

2. Implementieren Sie das Ereignisabonnement auf

//传入事件类型type和事件处理handle
 on: function (type, handle) {
  if(!this.handles[type]){
   this.handles[type] = [];
  }
  this.handles[type].push(handle);
 }

3. Event-Release-Emittieren implementieren

emit: function () {
  //通过传入参数获取事件类型
 var type = Array.prototype.shift.call(arguments);
  if(!this.handles[type]){
   return false;
  }
 for (var i = 0; i < this.handles[type].length; i++) {
   var handle = this.handles[type][i];
   //执行事件
  handle.apply(this, arguments);
  }
 }

Was erklärt werden muss, ist der Code Array.prototype.shift.call(arguments) Das Argumentobjekt ist ein integriertes Funktionsobjekt, das den beim Aufruf der Methode übergebenen Satz tatsächlicher Parameter abrufen kann.

Die Shift-Methode entfernt den ersten Parameter im Array, den Typtyp.

4. Event-Abmeldung ausschalten

off: function (type, handle) {
  handles = this.handles[type];
  if(handles){
   if(!handle){
    handles.length = 0;//清空数组
  }else{
    for (var i = 0; i < handles.length; i++) {
     var _handle = handles[i];
     if(_handle === handle){
      handles.splice(i,1);
     }
    }
   }
  }
 }

Vollständiger Code:

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }
 Pubsub.prototype={
  //传入事件类型type和事件处理handle
  on: function (type, handle) {
   if(!this.handles[type]){
    this.handles[type] = [];
   }
   this.handles[type].push(handle);
  },
  emit: function () {
   //通过传入参数获取事件类型
  var type = Array.prototype.shift.call(arguments);
   if(!this.handles[type]){
    return false;
   }
 for (var i = 0; i < this.handles[type].length; i++) {
    var handle = this.handles[type][i];
    //执行事件
   handle.apply(this, arguments);
   }
  },
  off: function (type, handle) {
   handles = this.handles[type];
   if(handles){
    if(!handle){
     handles.length = 0;//清空数组
   }else{
 for (var i = 0; i < handles.length; i++) {
      var _handle = handles[i];
      if(_handle === handle){
       handles.splice(i,1);
      }
     }
    }
   }
  }
 }

5. Test

var p1 = new Pubsub();
 p1.on('mm', function (name) {
 console.log('mm: '+ name);
 });
 p1.emit('mm','哈哈哈哈');
console.log('===============');
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log('mm2: '+ name);
 };
 var fn2 = function (name) {
 console.log('mm222: '+ name);
 };
 p2.on('mm2', fn);
 p2.on('mm2', fn2);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2', fn);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2');
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird hilfreich sein Du in der Zukunft.

Verwandte Artikel:

So implementieren Sie sensible Textaufforderungen in Angular

So implementieren Sie die versteckte Anzeige in Angular

Wie man Bilder in js nach links und rechts verschiebt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Beobachtermuster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!