In-depth understanding of the JavaScript series (38): The responsibility chain model of design patterns

Introduced

The responsibility chain pattern (Chain of responsibility) is to enable multiple objects to have the opportunity to process the request, thus avoiding the coupling between the sender and the recipient of the request. Link the object to a chain and pass the request along the chain until an object is processed by him.

That is, after the request, starting with the first object, the object in the chain receives the request to either handle it personally or forward it to the next candidate in the chain. The object submitting the request does not explicitly know which object will handle it-that is, the request has an implicit recipient (implicit receiver). Depending on the runtime, any candidate can respond to the request, and the number of candidates is arbitrary, and you can determine which candidates are involved in the chain at run time.

Body

For JavaScript implementations, we can use their prototype features to implement the responsibility chain pattern.

varNo_topic =-1;varTopic;functionHandler (S, t) { This. Successor = s | |NULL; This. Topic = T | | 0;} Handler.prototype = {handle:function() {if( This. successor) { This. Successor.handle ()}}, has:function() {return  This. topic! = No_topic; }};

Handler only accepts 2 parameters, the first is the successor (to pass the processing request down), the second is the delivery level (which can be used to control whether an operation is performed at a certain level or not), and the handler prototype exposes a handle method, which is the focus of implementing the pattern, Let's take a look at how to use the above code.

 var  app = new  Handler ({handle: function  () {Conso        Le.log (' app handle ');    }}, 3); var  dialog = new  Handler (app, 1); var  button = new  Handler (dialog, 2); Button.handle (); 

Change the code through the prototype feature, the calling code from the Button.handle ()->dialog.handle ()->app.handle (), the parameters of handle (), the first three are called prototype handle, Finally, we find the handle in the parameters passed in, and then output the result, which means that only the last layer is processed.

So how do you make the call, just let the dialog object handle it? You can actually define the handle method of the dialog instance object, but it needs to be done before the new button, the code is as follows:

    varApp =NewHandler ({handle:function() {Console.log (' app handle '); }}, 3);varDialog =NewHandler (app, 1); Dialog.handle =function() {console.log (' dialog before ... ')//here to do the specific processing operationConsole.log (' dialog after ... ')};varbutton =NewHandler (Dialog, 2); Button.handle ();

The result of the execution of the code is immediately dialog.handle, instead of the handle that is defined in the parameters passed in to the app.

Can that be done after the process, and then let the successor continue to deal with it? The answer is yes, but after the invocation of the handle, the following code needs to be invoked using the characteristics of the prototype:

Handler.prototype.handle.call (this);

The sentence means that the handle method of invoking the prototype continues to invoke the handle method of its successor (that is, successor), and the following code shows that the handle of the Button/dialog/app three object definitions will execute.

varApp =NewHandler ({handle:function() {Console.log (' app handle '); }}, 3);varDialog =NewHandler (app, 1);d Ialog.handle =function() {console.log (' dialog before ... ')//here to do the specific processing operationHandler.prototype.handle.call ( This);//Go on, move on.Console.log (' dialog after ... ')};varbutton =NewHandler (Dialog, 2); button.handle =function() {console.log (' button before ... ')//here to do the specific processing operationHandler.prototype.handle.call ( This); Console.log (' button after ... ')};button.handle ();

We can see from the running result of the code that if we want to deal with ourselves first and then call the successor, we will execute Handler.prototype.handle.call (this) at the end, and if we want to process the successor's code first, Execute Handler.prototype.handle.call (this) at the beginning;

Summarize

The responsibility chain pattern is often used in conjunction with the combined pattern, so that the parent component of a component can be its successor.

At the same time, the event bubbling mechanism in the DOM seems a bit like this, for example, after clicking a button, if it doesn't stop bubbling, its Click event will always bubble up to the parent element, and this mechanism can also handle many related problems, such as Example 1: Event centralized management in this series of design pattern sharing meta-mode Example code.

Copyright NOTICE: This article for Bo Master http://www.zuiniusn.com original article, without Bo Master permission not reproduced.

In-depth understanding of the JavaScript series (38): The responsibility chain model of design patterns