JavaScript design pattern chain of responsibility pattern

Overview

The responsibility chain pattern is a behavioral design pattern in the design pattern;

Definition: Give multiple objects the opportunity to process a request, thereby avoiding the coupling relationship between the sender and the receiver of the request, forming a chain of objects that process the request, and passing the request along the chain until one object processes it;

Plain language explanation: The author is located in Wuhan, a new first-tier city with a population of over 10 million. Taking the morning rush hour bus as an example, the front door of the bus is usually congested during the morning rush hour, so it is impossible to swipe the card to get on the bus; but the back door is relatively empty. At this time, we choose to get on the bus through the back door, but we cannot swipe the card when we get on the bus through the back door; running away from the bill? No, this is not what we, as civilized and well-educated young people of the new generation, should do. So, we pass the bus card to the front and ask the passenger in front to help pass it to the card reader to swipe the card. However, we are at the back door and the card reader is at the front door. In the process of passing the card, we will ask multiple passengers to help pass the bus card. This process of passing is a responsibility chain model, and each passenger who passes the card is a node object in the responsibility chain.

Code Implementation

Suppose there is an e-commerce website that sells mobile phones. After two rounds of reservations with a deposit of 500 yuan and a list price of 200 yuan respectively (the order is generated at this time), it has now reached the stage of formal purchase. The company has certain preferential policies for customers who have paid a deposit. When making a formal purchase, customers who have paid a deposit of 500 yuan will receive a 100 yuan mall coupon, and customers who have paid 200 yuan will receive a 50 yuan mall coupon; customers who have not paid a deposit before will not have any coupons, and may not be able to buy it if the stock is limited;

Parameter Definition

1.orderType: indicates the order type (deposit user or ordinary user). When the code value is 1, it means the user has a deposit of 500 yuan, when it is 2, it means the user has a deposit of 200 yuan, and when it is 3, it means the user has a deposit of 300 yuan.

2.pay: Indicates whether the user has paid the deposit, the value is true or false. Although the user has placed an order with a deposit of 500 yuan, if he has not paid the deposit, he can only purchase as an ordinary user;

3. Stock: indicates the stock quantity for ordinary users to purchase mobile phones. Customers who have paid a deposit of 500 yuan or 200 yuan are not subject to this restriction;

accomplish

var order = function(orderType, pay, stock){
    if ( orderType === 1 ){ // 500 yuan deposit purchase modeif ( pay === true ){ // Deposit paidconsole.log( '500 yuan deposit pre-order, get 100 coupons' );
        }else{ // Deposit not paid, downgrade to normal purchase modeif ( stock > 0 ){ // Mobile phones for normal purchase are still in stockconsole.log( 'Normal purchase, no coupon' );

            }else{
                console.log('Insufficient mobile phone inventory');
            }
        }
    }
    else if ( orderType === 2 ){ // 200 yuan deposit purchase modeif ( pay === true ){
            console.log('Pre-order with 200 yuan deposit, get 50 yuan coupon');
        }else{
            if ( stock > 0 ) {
                console.log('Normal purchase, no coupon');
            }else{
                console.log('Insufficient mobile phone inventory');
            }
        }
    }
    else if ( orderType === 3 ) {
        if ( stock > 0 ) {
            console.log('Normal purchase, no coupon');
        }else{
            console.log('Insufficient mobile phone inventory');
        }
    }
};
order( 1 , true, 500); // 500 yuan deposit for pre-order, get 100 yuan coupon

The above code can certainly achieve the required functions, but the structure of the above code is obviously unclear and the order function method is huge, with a high degree of coupling;

Implementation of the chain of responsibility pattern

We use the responsibility chain pattern to implement the above functions. We first divide the 500 yuan deposit order, 200 yuan deposit order, and ordinary order into three functions, and then pass in the three parameters of orderType, pay, and stock; if the 500 yuan order function does not meet the processing conditions, the request will be passed to the 200 yuan order function. If the 200 yuan order function also does not meet the processing conditions, the request will be passed to the ordinary order function;

var order500 = function( orderType, pay, stock ) {
    if ( orderType === 1 && pay === true ){
        console.log('Pre-order with 500 yuan deposit, get 100 yuan coupon');
    }else{
        order200( orderType, pay, stock ); // Pass the request to the 200 yuan order }
};
// 200 yuan order var order200 = function( orderType, pay, stock ){
    if ( orderType === 2 && pay === true ){
        console.log('Pre-order with 200 yuan deposit, get 50 yuan coupon');
    }else{
        orderNormal( orderType, pay, stock ); // Pass the request to a normal order }
};
// Normal buy order var orderNormal = function( orderType, pay, stock ){
    if ( stock > 0 ) {
        console.log('Normal purchase, no coupon');
    }else{
        console.log('Insufficient mobile phone inventory');
    }
};

// Test results:
order500( 1 , true, 500 ); // 500 yuan deposit for pre-order, get 100 yuan couponorder500( 1, false, 500 ); // Normal purchase, no couponorder500( 2, true, 500 ); // 200 yuan deposit for pre-order, get 500 yuan couponorder500( 3, false, 500 ); // Normal purchase, no couponorder500( 3, false, 0 ); // Out of stock

You can see that the structure of the modified code is much clearer than before, the functions are split and many if-else branch judgments are removed;

Even if this is the case, the modified code still violates the open/closed principle, because if our requirements change later, we must modify the internals of these functions; this is obviously not what we want;

Improvement

We first agree that if the function does not meet the processing conditions, it will return nextSuccessor, and if it meets the processing conditions, it will be executed;

var order500 = function( orderType, pay, stock ) {
    if ( orderType === 1 && pay === true ){
        console.log('Pre-order with a 500 yuan deposit and get a 100 yuan coupon');
    }else{
        return 'nextSuccessor'; // I don't know who the next node is, so I pass the request to the back anyway}
};

var order200 = function( orderType, pay, stock ) {
    if ( orderType === 2 && pay === true ){
        console.log('Pre-order with a 200 yuan deposit and get a 50 yuan coupon');
    }else{
        return 'nextSuccessor'; // I don't know who the next node is, so I pass the request to the back anyway}
};

var orderNormal = function( orderType, pay, stock ) {
    if ( stock > 0 ) {
        console.log('Normal purchase, no coupon');
    }else{
        console.log('Insufficient mobile phone inventory');
    }
};

var Chain = function( fn ){
    this.fn = fn;
    this.successor = null;
};

//Pass the request to the next node Chain.prototype.setNextSuccessor = function( successor ){
    return this.successor = successor;
};

//Pass the request to a node Chain.prototype.passRequest = function(){

   //The method after receiving the instance and saving the parameters as an array var ret = this.fn.apply( this, arguments );
    console.log(ret);

    //ret is equal to nextSuccessor, which means that the processing conditions are not met and the execution must continue if (ret === 'nextSuccessor') {

     //This is a logical short-circuit return, and if one of the union is false, it is false; if this.successor exists, the subsequent execution result is returned; if this.successor does not exist, the value of this.nextSuccessor is returned, which is undefined
        return this.successor && this.successor.passRequest.apply( this.successor, arguments );
    }
};


var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );    

//Pass along the chain of responsibility nodes chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );

chainOrder500.passRequest( 1, true, 500 ); // 500 yuan deposit for pre-order, get 100 coupons chainOrder500.passRequest( 2, true, 500 ); // 200 yuan deposit for pre-order, get 50 coupons chainOrder500.passRequest( 3, true, 500 ); // Normal purchase, no coupons chainOrder500.passRequest( 1, false, 0 ); // Out of stock

After the improvement, even if the demand changes and an order with a deposit of 300 is required, we can easily handle it;

var order300=function(){
  //Specific implementation behavior};

chainOrder300=newChain(order300);
chainOrder500.setNextSuccessor(chainOrder300);
chainOrder300.setNextSuccessor(chainOrder200);

Tips:

Supplementary knowledge: logical short circuit; although this is the basic knowledge of JS, it is inevitable to forget it. I forgot it when I wrote this article;

If one of the union is false, the result is false : If it is a union (and) relationship, the first number is false or does not exist, and the value of the second number is directly returned;

var x = a && b && c is equivalent to var x = a;
if(a){
    x = b;
    if(b){
       x = c;
    }
}

If one of the two is true, then true : If it is an or-set (or) relationship, then if the first number is true, then the first number is returned directly; if the first number is false, then the second number is returned directly;

var x = a || b || c is equivalent to:

var x;
if(a){
    x = a;
} else if(b){
    x = b;
} else {
    x = c;
}

Remember the two sentences in bold above, and you can basically use logical short circuits skillfully;

The above is the details of the responsibility chain pattern of JavaScript design pattern. For more information about JavaScript design pattern, please pay attention to other related articles on 123WORDPRESS.COM!