Übersicht über das Chain-of-Responsibility-Pattern in JavaScript

Einsatzbereich　

Das Muster der Verantwortlichkeitskette (Chain of responsibility) ermöglicht es mehreren Objekten, eine Anfrage zu bearbeiten, um die Kopplung zwischen dem Absender und dem Empfänger der Anfrage zu vermeiden. Diese Objekte werden zu einer Kette verbunden und die Anfrage wird entlang dieser Kette weitergegeben, bis ein Objekt sie bearbeitet.　

Es scheint so, als wäre es wie in der Datenstruktur der Liste.　

Aber verwechselt man nicht, die Verantwortlichkeitskette ist nicht gleich der Liste, da die Verantwortlichkeitskette an jedem Knoten beginnen kann, um nach unten zu suchen, während die Liste von der Kopfmarke beginnen muss, um nach unten zu suchen.　

Zum Beispiel gehören die Bubbling-Events im DOM-Eventmechanismus zur Verantwortlichkeitskette, während die Capture-Events zur Liste gehören.　

Zwei, Simulation des Bubblings durch die Verantwortlichkeitskette　

Angenommen, wir haben drei Objekte: li, ul, div. Das Verhältnisdiagramm ist wie folgt:

Zum Beispiel, wenn wir das li-Objekt auslösen, und wenn li den Bubbling nicht verhindert, wird es an das ul-Objekt weitergeleitet. Wenn ul den Bubbling nicht verhindert, wird es an das div-Objekt weitergeleitet (angenommen, hier ist div der Wurzelknoten). Dasselbe gilt für ul und div.　

Hier ist es klar, dass das Muster der Verantwortlichkeitskette geeignet ist, um solche Anforderungen zu schreiben.　

Aber wie kann man das Muster der Verantwortlichkeitskette in JavaScript umsetzen?　

wie folgt, können wir durch den Prototypen der Kette grundlegende Strukturen aufbauen:　

function CreateDOM(obj){
  this.next = obj || null;
};  
CreateDOM.prototype = {
  handle: function(){
    if(this.next){
      this.next.handle();
    }
  }
};

Jedes Mal, wenn wir mit dem CreateDOM-Konstruktor ein Objekt erstellen, geben wir das damit verbundene Objekt hinein (ja, das ist wie eine Liste).　

Wenn wir ein Objekt auslösen und die handle-Methode ausführen, können wir entlang dieser Kette weiterlaufen.　

Aber, beachten Sie, wenn die handle-Eigenschaft eines Objekts den handle in der Prototypenkette überschreibt, wie können Sie weiter nach unten übergeben?　

Mit CreateDOM.prototype.handle.call(this) ist das alles erledigt.　

Also, hier ist der Code, um li, ul und div zu realisieren:　

var li = null; 
  ul = null; 
  div = null;
div = new CreateDOM();
div.handle = function(stopBubble){
  console.log('DIV');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
ul = new CreateDOM(div);
ul.handle = function(stopBubble){
  console.log('UL');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
li = new CreateDOM(ul);
li.handle = function(stopBubble){
  console.log('LI');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir bitten Sie, die呐喊教程 mehr zu unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Falls Sie Inhalte finden, die möglicherweise Urheberrechtsverletzungen darstellen, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und fügen Sie relevante Beweise bei. Sobald überprüft, wird diese Website den beschuldigten Inhalt sofort löschen.)