JavaScript chain of responsibility pattern instance methods

This article mainly introduces an overview of the JavaScript implementation of the chain of responsibility model. It introduces in detail what the chain of responsibility model is and its implementation method. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

What is the chain of responsibility pattern

The definition of the chain of responsibility pattern is to allow multiple objects to have the opportunity to process the request, thereby avoiding the request sender and The coupling relationship between receivers connects these objects into a chain and passes the request along this 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 to implement chain of responsibility mode in JavaScript It’s so simple. If you don’t understand the above AOP code, you can refer to this article I wrote before. JavaScript implements AOP. This method looks very similar to the decorator pattern. It does look very similar from the code point of view, but their starting points are completely different.

AOP implements the decorator pattern: add some new functions without changing the inside of the existing function. You can imagine concentric circles. Every time you call after, it is equivalent to giving you the outside of the circle. Add another 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 the pet method Three different parameters gave different results. 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 much more code

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"); //我是猫猫

It seems that it is 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?

Related recommendations:

PHP Design Pattern - Chain of Responsibility Pattern_PHP Tutorial

php Design Pattern Chain Of Responsibility (Chain of Responsibility Pattern)

PHP Design Pattern Responsibility Chain Pattern

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