Overview of JavaScript Responsibility Chain Pattern

Firstly, Overview　

The Chain of Responsibility pattern (Chain of Responsibility) is to make multiple objects have the opportunity to handle requests, thus avoiding the coupling relationship between the sender and receiver of the request. Connect these objects into a chain and pass the request along this chain until one object handles it.　

It seems like the linked list in data structures.　

But, do not mix them up, the Chain of Responsibility is not equal to the linked list, because the Chain of Responsibility can start searching from any node, while the linked list must start from the head node.　

For example, the bubble event in the DOM event mechanism belongs to the Chain of Responsibility, while the capture event belongs to the linked list.　

Secondly, simulate the bubble using the Chain of Responsibility　

Suppose we have three objects: li, ul, div, and the relationship diagram is as follows:

For example, when we trigger the li object, if li does not prevent the bubble, it will be passed to the ul object. When it reaches ul, if it does not prevent the bubble, it will be passed to the div object (assuming here div is the root node). Similarly, ul, div.　

It is clear here that it is suitable to use the Chain of Responsibility pattern to write such requirements.　

But, how to implement the Chain of Responsibility pattern in JavaScript?　

As follows, we can construct the basic architecture through the prototype chain:　

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

Every time we use the CreateDOM constructor to create an object, we pass in the associated object (well, it's very linked list-like).　

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

But, be aware that when a handle property of an object overrides the handle in the prototype chain, how to continue down the chain?　

It's just CreateDOM.prototype.handle.call(this);.　

So, the code for implementing 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.

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, nor has it been manually edited, nor does it assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report violations by email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.