Deep understanding of the JavaScript series (38): Design patterns of the responsibility chain model in detail _ basic knowledge

Introduced

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

That is, after the request, from the first object, the object that receives the request in the chain either processes it personally or forwards 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 a request, and the number of candidates is arbitrary, and you can decide 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.

Copy Code code as follows:

var no_topic =-1;
var Topic;

function Handler (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 (used to pass the processing request), and the second is the delivery hierarchy (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 the implementation of the pattern, Let's take a look at how to use the above code.

Copy Code code as follows:

var app = new Handler ({
Handle:function () {
Console.log (' app handle ');
}
}, 3);

var dialog = new Handler (app, 1);

var button = new Handler (dialog, 2);

Button.handle ();

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

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

Copy Code code as follows:

var app = new Handler ({
Handle:function () {
Console.log (' app handle ');
}
}, 3);

var dialog = new Handler (app, 1);
Dialog.handle = function () {
Console.log (' dialog before ... ')
Here to do the specific processing operations
Console.log (' dialog after ... ')
};

var button = new Handler (dialog, 2);

Button.handle ();

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

Can it be done by itself, and then let the successor continue to deal with it? The answer is yes, but after calling the handle, you need to invoke the following code with the features of the prototype:

Copy Code code as follows:

Handler.prototype.handle.call (this);

The meaning of this sentence is to invoke the handle method of the prototype to continue to invoke the handle method of its successor (i.e. successor), the following code behaves as follows: Button/dialog/app three object-defined handle will execute.

Copy Code code as follows:

var app = new Handler ({
Handle:function () {
Console.log (' app handle ');
}
}, 3);

var dialog = new Handler (app, 1);
Dialog.handle = function () {
Console.log (' dialog before ... ')
Here to do the specific processing operations
Handler.prototype.handle.call (this); Keep going.
Console.log (' dialog after ... ')
};

var button = new Handler (dialog, 2);
Button.handle = function () {
Console.log (' button before ... ')
Here to do the specific processing operations
Handler.prototype.handle.call (this);
Console.log (' button after ... ')
};

Button.handle ();

By running the code we can see that if you want to process yourself first and then call the successor, execute Handler.prototype.handle.call (this) at the end, and code if you want to process the successor's code first, Executes Handler.prototype.handle.call (this) at the beginning, code.

Summarize

The responsibility chain pattern is often used in conjunction with the combination pattern, and the parent component of such a component can be its successor.

At the same time, the event-bubbling mechanism in the DOM seems somewhat similar to this, for example, click a button, if not block bubble, the Click event will always bubble to the parent element, use this mechanism can also deal with a number of related issues, such as this series of design patterns in the pattern of "Example 1:" Episode management The sample code.