Panoramica del modello di catena delle responsabilità in JavaScript

Un: Panoramica　

Lo schema di responsabilità della catena (Chain of responsibility) è progettato per far sì che molti oggetti abbiano l'opportunità di gestire le richieste, evitando così la relazione di dipendenza tra il mittente della richiesta e il ricevente. Collega questo oggetto in una catena e passa la richiesta lungo questa catena fino a che un oggetto lo gestisce.　

Sembra essere come una coda nella struttura dei dati.　

Ma non confondetele, lo schema di responsabilità della catena non è uguale alla coda, perché lo schema di responsabilità della catena può iniziare a cercare in qualsiasi nodo, mentre la coda deve iniziare dal nodo di testa.　

Ad esempio, l'evento di propagazione degli eventi DOM appartiene allo schema di responsabilità della catena, mentre l'evento di cattura appartiene alla coda.　

Due: Simulazione di propagazione della responsabilità　

Supponiamo di avere tre oggetti: li, ul, div, la loro diagramma delle relazioni è come segue:

Ad esempio, quando attiviamo l'oggetto li, se li non blocca la propagazione, allora passerà all'oggetto ul, e se ul non blocca la propagazione, allora passerà all'oggetto div (ipotizzando che qui div sia il nodo radice). Allo stesso modo, ul, div.　

Vedendo questo, è chiaro che è adatto utilizzare lo schema di responsabilità della catena per scrivere questo tipo di richieste.　

Ma, come si può implementare lo schema di responsabilità della catena in JavaScript?　

Ecco, possiamo costruire la struttura di base tramite la catena di prototipi:　

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

Ogni volta che utilizziamo il costruttore CreateDOM per creare un oggetto, passiamo all'oggetto associato (beh, così è come una coda).　

Then, when we trigger an object and execute the handle method, we can go down along this chain.　

However, it should be noted that when a handle property of an object overrides the handle in the prototype chain, how to continue passing it down?　

It's as simple as using CreateDOM.prototype.handle.call(this);.　

So, the implementation code for li, ul, and div is as follows:　

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);
  };
};

That's all for this article, I hope it will be helpful to everyone's learning, and I also hope everyone will support and cheer for the tutorial.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once confirmed, this site will immediately delete the suspected infringing content.