How to implement chain of responsibility pattern in JavaScript

This article mainly introduces an overview of the chain of responsibility model implemented in JavaScript. It introduces in detail what the chain of responsibility model is and how it is implemented. It has certain reference value. Interested friends can refer to it

What is the chain of responsibility model

The definition of the chain of responsibility model is to allow multiple objects to have the opportunity to process requests, thereby avoiding the coupling relationship between the sender and receiver of the request, and These objects form a chain, and the request is passed along the chain until an object handles it. For example: when you get on the bus from the back door, you can't put the coins directly into the cash box because you don't know where it is. Then you can only give the coins to the person in front of you and let him Help you pass it to the person in front of you, and then pass it to the hand of the person standing next to the cash box, who will put the coins into the cash box.

Chain of Responsibility Pattern Idea

The request sender only needs to know the first node in the chain, thus weakening the strong connection between the sender and a group of receivers. connect.

JavaScript implements chain of responsibility mode (AOP method)

 Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
     return fn.apply(this, arguments);
    }
    return ret;
  }
 }

Yes, it is so simple to implement chain of responsibility mode in JavaScript. If you look at the above AOP code If you don’t know, you can refer to this article I wrote before to implement AOP in JavaScript. This method looks very similar to the decorator pattern. It does look very similar from the code point of view, but their starting point is completely different

AOP implementation Decorator pattern: Add some new functions without changing the internals of existing functions. You can imagine concentric circles. Every time you call after, it is equivalent to adding another circle to the outside of your circle to wrap it. . Note that they are inclusive relationships

AOP implements the chain of responsibility model: determine whether to execute the next function after the function is executed. Every time you call after, it is equivalent to adding a function after the existing function. As for whether to execute the following function This function depends on the return value of the previous function. Note that they are chain relationships

Chain of Responsibility Pattern Example

function cat (type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else {
    return "nextSuccessor"
  }
}

function dog (type) {
  if(type == "dog") {
    console.log("我是狗狗");
  } else {
    return "nextSuccessor"
  }
}

function pig (type) {
  if(type == "pig") {
    console.log("我是猪猪");
  } else {
    return "nextSuccessor"
  }
}

Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
      return fn.apply(this, arguments);
    }
    return ret;
  }
}


var pet = cat.after(dog).after(pig);

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫

Please look at the above code, we passed in three different parameters to the pet method and got different the result of. Take the first call as an example. The execution process is as follows: pass in "pig", which is first judged by the cat method. The cat method finds that it cannot handle it, so it passes "pig" to the dog method (return "nextSuccessor" represents the transfer to the next function), the dog method finds that it cannot handle it, and then passes "pig" to the pig method. The pig method can handle it, and the console prints, I am a pig.

You may think this is not a waste of energy. The above functions can be solved by just using the following lines of code. Why do you need to write so many more codes above?

function pet(type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else if(type == "dog") {
    console.log("我是狗狗");
  } else if(type == "pig") {
    console.log("我是猪猪");
  }
}

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫

In this way, It seems to be much simpler. But have you ever considered that if monkeys suddenly appear in the future, if you use the above garbage code, then you will have to modify the source code of the pet function and add an if statement to determine whether it is a monkey. In fact, this is not bad. , what if 10,000 animals are added? Then you have to add 10,000 if statements to the pet function, what? Not flashy enough? Have you ever considered that an animal can be divided into many breeds? For example, cats are divided into long-haired cats and short-haired cats. This way your code will involve nested if statements. With all due respect, your code is now as ugly as a dog, hee hee

But if you use the chain of responsibility model, for each additional animal, we will define a function for it and then add it to the chain of responsibility. In this way, the new function is highly decoupled from the original function, isn't it beautiful?

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Custom events in Vue components (detailed tutorial)

How to implement the ball following the mouse using JS Mobile

Detailed introduction to the basic use of NW.js

The above is the detailed content of How to implement chain of responsibility pattern in JavaScript. For more information, please follow other related articles on the PHP Chinese website!