《javascript设计模式与开发实践》阅读笔记（13）—— 职责链模式

 

职责链模式

使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。

 

书里的订单的例子

假设我们负责一个售卖手机的电商网站，经过分别交纳500元定金和200元定金的两轮预定（订单已在此时生成），现在已经到了正式购买的阶段。公司针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过500元定金的用户会收到100元的商城优惠券，200元定金的用户可以收到50元的优惠券，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优惠券，且在库存有限的情况下不一定保证能买到。

orderType：表示订单类型（定金用户或者普通购买用户），值为1的时候是500元定金用户，为2的时候是200元定金用户，为3的时候是普通购买用户。
pay：表示用户是否已经支付定金，值为true表示已付钱，如果没有支付定金，只能降级进入普通购买模式。
num：表示当前用于普通购买的手机库存数量，已经支付过500元或者200元定金的用户不受此限制。

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

    order( 1 , true, 500); // 500元定金预购, 得到100优惠券

上面的代码其实不用看完就已经能感受到十分的繁琐，把所有的逻辑都列出来使得函数变得十分臃肿。这种类似的代码在策略模式中其实出现过，最后使用策略模式很好的消化了内部的条件分支，这里的话我们用职责链模式也能解决。

 

使用职责链的思想重写函数

思路：彼此委托，我可以执行我就执行，我执行不了我就委托给别人执行，所以我们把500订单的执行，200订单的执行和普通购买的执行分别写成一个函数。

    var order500=function( orderType, pay, num ){
        if ( orderType === 1 && pay === true ){    //如果是500订单且已经付款
            console.log( '500元定金预购, 得到100优惠券' );
        }else{
            order200( orderType, pay, num );      //将请求传递给200 元订单
        }
    };

    var order200=function( orderType, pay, num ){
        if ( orderType === 2 && pay === true ){    //如果是200订单且已经付款
            console.log( '200元定金预购, 得到50优惠券' );
        }else{
            orderNormal( orderType, pay, num );  //将请求传递给普通订单
        }
    };

    var orderNormal=function( orderType, pay, num ){
        if ( num > 0 ){             //普通购买，如果数量足够
            console.log( '普通购买, 无优惠券' );
        }else{
            console.log( '手机库存不足' );
        }
    }

    order500( 1 , true, 500 );   //500元定金预购, 得到100优惠券
    order500( 1, false, 500 );   //普通购买, 无优惠券
    order500( 2 , true, 500 );   //200元定金预购, 得到50优惠券

这个函数比之前的已经好了很多，但是还是有些缺陷，假设说我们增添了300元的订单，那么我们就要改写上面的函数。

可以说，只要有点改动，无论是增加还是删除哪一环，我们必须拆开这个链条才行，而且必须修改函数内部。

那这个问题的根源在哪里，传递请求是职责链模式的根本，也是这个函数和上一个函数最大的区别所在，所以传递请求这一点是没有问题的，我们需要他们一个委托一个，那么问题的所在就是委托函数之间耦合的太死，以至于改动必须深入内部才行。所以，我们要想办法降低委托函数彼此间的耦合。

 

进一步修改函数

思路：想要解耦合，那么就是用变量代替具体的函数，然后用一个对象安排每个函数之后的委托函数。但是每个函数后面的委托函数是不一样的，所以不能使用相同的变量，但是如果使用不同的变量，其实质和现在并没有多少区别。

从委托这个字眼，我们想到对象之间可以很方便的调用方法，对象接收这个函数，并产生相应的属性，包括当前的函数，和之后需要执行的委托函数。仔细一想，我们的做法其实相当于扩展原来的函数，在不改动原来函数的基础上，我们想要实现委托，那就只有把函数变成参数来生成一个更为全能的对象，然后让这几个功能更强的对象之间彼此交互。因为这些对象彼此类似，功能也相同，所以我们需要一个模板来生成这些对象。同时为了让对象可以意识到该委托别的对象了，函数的返回值应该做一个统一规定。

    /**首先是具体的功能函数**/
    var order500=function( orderType, pay, num ){
        if ( orderType === 1 && pay === true ){    //如果是500订单且已经付款
            console.log( '500元定金预购, 得到100优惠券' );
        }else{
            return "next"    //统一规定的执行结果
        }
    };

    var order200=function( orderType, pay, num ){
        if ( orderType === 2 && pay === true ){    //如果是200订单且已经付款
            console.log( '200元定金预购, 得到50优惠券' );
        }else{
            return "next"
        }
    };

    var orderNormal=function( orderType, pay, num ){
        if ( num > 0 ){             //普通购买，如果数量足够
            console.log( '普通购买, 无优惠券' );
        }else{
            console.log( '手机库存不足' );
        }
    }

    /**闭包创建一个类，实例职责对象，参数就是上面的功能函数**/
    var order=(function(){
        var constructor=function( fn ){  //构造器，存储当前的函数和后面委托的对象
            this.fn=fn;
            this.next=null;
        }
        constructor.prototype.setnext=function( nextobj ){ //设定委托的对象
            return this.next=nextobj;
        }
        constructor.prototype.do=function(){  //执行函数
            var result=this.fn.apply(this,arguments);  //获得执行结果

            if( result==="next" ){  //当执行结果为规定值时
                return this.next.do.apply(this.next,arguments);  //委托对象执行函数
            }
            return result;
        }

        return constructor;
    })();

    /**实例过程**/
    var order_500=new order( order500 );
    var order_200=new order( order200 );
    var order_normal=new order( orderNormal );

    /**职责对象间设定委托的链条关系**/
    order_500.setnext( order_200 );
    order_200.setnext( order_normal );

    /**初始调用的接口**/
    /**这里其实可以再包装一个固定的接口，这样不管链条究竟从哪里开始，我们也不需要改变初始的调用函数**/
    order_500.do( 2, true, 500 );  //200元定金预购, 得到50优惠券

这时候如果加了300元的订单也很方便

    var order_300=new ( order300 );
    order_500.setnext( order_300 );
    order_300.setnext( order_200 );

小结：我们把手动的修改，变成了通过对象控制，这样只需要几个句子就能很方便的修改业务逻辑，不用去改动任何源码。

用es6的类来完成

    class order{
        constructor( fn ){
            this.fn=fn;
            this.next=null;
        }
        setnext( nextobj ){
            return this.next=nextobj;
        }
        do(){
            var result=this.fn.apply(this,arguments);  //获得执行结果

            if( result==="next" ){  //当执行结果为规定值时
                return this.next.do.apply(this.next,arguments);  //委托对象执行函数
            }
            return result;
        }
    }

异步职责链

上面的代码我们是约定好了一个返回值，并把这个返回值写死在了原型方法上，这样我们可以直接得到最终答案，但实际上很多时候，可能我们函数的执行需要等待一个ajax的响应，这种时候时间上是不同步的，而且返回的执行结果我们也不能保证一致，所以我们可以添加一个方法，用来手动触发下一个委托函数。

    constructor.prototype.nextfun= function(){
        return this.next && this.next.do.apply( this.next, arguments );  //如果next存在  就执行它的方法
    };

    var fn1 = new order(function(){
        console.log( 1 );
        return 'next';
    });
    var fn2 = new order(function(){
        console.log( 2 );
        var self = this;
        setTimeout(function(){
            self.nextfun();
        }, 1000 );
    });

    var fn3 = new order(function(){
        console.log( 3 );
    });
    fn1.setnext( fn2 ).setnext( fn3 );  //链式调用，因为setnext方法返回了对象
    fn1.do();  //先出现1,2  隔了一秒之后出现3

职责链模式的优缺点

优点如我们所见，本来有很多等待执行的函数，我们不知道哪一个可以执行请求的时候就要一个一个去验证，于是出现了最开始的那个代码。而在职责链模式中，由于不知道链中的哪个节点可以处理你发出的请求，所以你只需把请求传递给第一个节点即可。

使用了职责链模式之后，链中的节点对象可以灵活地拆分重组。增加或者删除一个节点，或者改变节点在链中的位置都是轻而易举的事情。这一点我们也已经看到，在上面的例子中，增加一种订单完全不需要改动其他订单函数中的代码。

而且职责链模式还有一个优点，那就是可以手动指定起始节点，请求并不是非得从链中的第一个节点开始传递，当我们明确第一个节点并不具有执行能力时，我们可以从第二个或者更后面的节点开始传递，这样可以减少请求在链里面传递的次数。

缺点，可能没有一个节点可以执行，请求会从链尾离开或者抛出一个错误。而且为了职责链而职责链可能因为过多没有必要的节点，带来性能方面的问题。

总结

职责链模式在js开发很容易被忽略，它结合无论是结合组合模式还是利用AOP的思想，都能发挥巨大作用。