The front-end talks about design patterns-is the chain of responsibility really what you understand?

This issue talks about the chain of responsibility, first look at the definition:

Allow multiple objects to have the opportunity to process the request, thereby avoiding the coupling relationship between the sender and receiver of the request, connect these objects into a chain, and pass the request along this chain until an object handles it .

The definition is not difficult to understand. Let’s look at a set of pictures to explain the responsibility chain vividly.

 ​

Then its function is thought-provoking. One of the things I understand is decoupling, so that each module of the code can only be clearer. Look at the following example:

This is a piece of code before transformation (an example found on PS Internet). It is plain and unremarkable. The responsibilities of maintaining each module are not very clear in the later period of if the if set is not good.

var order = function( orderType, pay, stock ){
    if ( orderType === 1 ){ // 500元定金购买模式
        if ( pay === true ){ // 已支付定金
            console.log( '500元定金预购, 得到100优惠券' );
        }else{ // 未支付定金，降级到普通购买模式
            if ( stock > 0 ){ // 用于普通购买的手机还有库存
                console.log( '普通购买, 无优惠券' );
            }else{
                console.log( '手机库存不足' );
            }
        }
    }
    else if ( orderType === 2 ){ // 200元定金购买模式
        if ( pay === true ){
            console.log( '200元定金预购, 得到50优惠券' );
        }else{
            if ( stock > 0 ){
                console.log( '普通购买, 无优惠券' );
            }else{
                console.log( '手机库存不足' );
            }
        }
    }
    else if ( orderType === 3 ){
        if ( stock > 0 ){
            console.log( '普通购买, 无优惠券' );
        }else{
            console.log( '手机库存不足' );
        }
    }
};
order( 1 , true, 500); // 输出： 500元定金预购, 得到100优惠券

Let’s take a look at the modified code. Although the amount of code has not decreased (instead it has increased), the functions are clearly divided, and what each module does can be seen clearly.

// 500元订单
var order500 = function( orderType, pay, stock ){
    if ( orderType === 1 && pay === true ){
        console.log( '500元定金预购, 得到100优惠券' );
    }else{
        order200( orderType, pay, stock ); // 将请求传递给200元订单
    }
};
// 200元订单
var order200 = function( orderType, pay, stock ){
    if ( orderType === 2 && pay === true ){
        console.log( '200元定金预购, 得到50优惠券' );
    }else{
        orderNormal( orderType, pay, stock ); // 将请求传递给普通订单
    }
};
// 普通购买订单
var orderNormal = function( orderType, pay, stock ){
    if ( stock > 0 ){
        console.log( '普通购买, 无优惠券' );
    }else{
        console.log( '手机库存不足' );
    }
};
// 测试结果：
order500( 1 , true, 500); // 输出：500元定金预购, 得到100优惠券
order500( 1, false, 500 ); // 输出：普通购买, 无优惠券
order500( 2, true, 500 ); // 输出：200元定金预购, 得到50优惠券
order500( 3, false, 500 ); // 输出：普通购买, 无优惠券
order500( 3, false, 0 ); // 输出：手机库存不足

Then we have to think, is the chain of responsibility really only doing this? The Internet is overwhelmingly full of similar demos. Can decoupling really maximize the function of the chain of responsibility?

answer to 1613d896242a09 is: No

The core function of the chain of responsibility is: processing step by step, processing one point at each step (within the function), and finally processing it all. Experience it, it is a chain, why wear it into a chain? Look at the picture below

​

So what are the examples in actual combat (front-end)? I think the following modules can be transformed with the chain of responsibility model

1. Complex data filtering 2. HTTP interceptor 3. Routing permission filtering, etc.

Here is a flow chart of data filtering

​

The following division http interceptor model diagram

Okay, today’s chain of responsibilities talked about this although there is no actual combat, but it provides you with ideas, and I hope it will be helpful to everyone.