js之职责链模式

职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象能处理它为止。
职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,我们把这些对象称为链中的节点。


level01:

假设我们负责一个售卖手机的电商网站,经过分别交纳 500元定金和 200元定金的两轮预定后(订单已在此时生成),现在已经到了正式购买的阶段。

公司针对支付过定金的用户有一定的优惠政策。在正式购买后,已经支付过 500元定金的用户会收到 100元的商城优惠券,200元定金的用户可以收到 50元的优惠券,而之前没有支付定金的用户只能进入普通购买模式,也就是没有优惠券,且在库存有限的情况下不一定保证能买到。
 orderType :表示订单类型(定金用户或者普通购买用户), code 的值为 1的时候是 500元
定金用户,为 2的时候是 200元定金用户,为 3的时候是普通购买用户。
 pay :表示用户是否已经支付定金,值为 true 或者 false , 虽然用户已经下过 500元定金的
订单,但如果他一直没有支付定金,现在只能降级进入普通购买模式。
 stock :表示当前用于普通购买的手机库存数量,已经支付过 500 元或者 200 元定金的用
户不受此限制。
下面我们把这个流程写成代码:

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 优惠券

虽然我们得到了意料中的运行结果,但这远远算不上一段值得夸奖的代码。 order 函数不仅巨大到难以阅读,而且需要经常进行修改。虽然目前项目能正常运行,但接下来的维护工作无疑是个梦魇。恐怕只有最“新手”的程序员才会写出这样的代码。


实际开发中的职责链模式level02:

现在我们采用职责链模式重构这段代码,先把 500 元订单、200 元订单以及普通购买分成 3个函数。
接下来把 orderType 、 pay 、 stock 这 3个字段当作参数传递给 500元订单函数,如果该函数不符合处理条件,则把这个请求传递给后面的 200元订单函数,如果 200元订单函数依然不能处理该请求,则继续传递请求给普通购买函数,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var order500 = function( orderType, pay, stock ){
            if ( orderType === 1 && pay === true ){
                console.log( '500 元定金预购,得到 100 优惠券' );
            }else{
                return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递
            }
        };
        var order200 = function( orderType, pay, stock ){
            if ( orderType === 2 && pay === true ){
                console.log( '200 元定金预购,得到 50 优惠券' );
            }else{
                return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递
            }
        };
        var orderNormal = function( orderType, pay, stock ){
            if ( stock > 0 ){
                console.log( '普通购买,无优惠券' );
            }else{
                console.log( '手机库存不足' );
            }
        };
        var Chain = function( fn ){
            this.fn = fn;
            this.successor = null;
        };
        Chain.prototype.setNextSuccessor = function( successor ){//指定在链中的下一个节点
            return this.successor = successor;
        };
        Chain.prototype.passRequest = function(){//传递请求给某个节点
            var ret = this.fn.apply( this, arguments );
            if ( ret === 'nextSuccessor' ){
                return this.successor && this.successor.passRequest.apply( this.successor, arguments );
            }
            return ret;
        };
//      现在我们把 3个订单函数分别包装成职责链的节点:
        var chainOrder500 = new Chain( order500 );
        var chainOrder200 = new Chain( order200 );
        var chainOrderNormal = new Chain( orderNormal );
//      然后指定节点在职责链中的顺序:
        chainOrder500.setNextSuccessor( chainOrder200 );
        chainOrder200.setNextSuccessor( chainOrderNormal );
//      最后把请求传递给第一个节点:
        chainOrder500.passRequest( 1, true, 500 ); // 输出:500 元定金预购,得到 100 优惠券
        chainOrder500.passRequest( 2, true, 500 ); // 输出:200 元定金预购,得到 50 优惠券
        chainOrder500.passRequest( 3, true, 500 ); // 输出:普通购买,无优惠券
        chainOrder500.passRequest( 1, false, 0 ); // 输出:手机库存不足
    </script>
</body>
</html>

可以看到,执行结果和前面那个巨大的 order 函数完全一样,但是代码的结构已经清晰了很多,我们把一个大函数拆分了 3个小函数,去掉了许多嵌套的条件分支语句。

目前已经有了不小的进步,但我们不会满足于此,虽然已经把大函数拆分成了互不影响的 3个小函数,但可以看到,请求在链条传递中的顺序非常僵硬,传递请求的代码被耦合在了业务函数之中:

var order500 = function( orderType, pay, stock ){
            if ( orderType === 1 && pay === true ){
                console.log( '500 元定金预购, 得到 100 优惠券' );
            }else{
                order200( orderType, pay, stock );
                // order200 和 order500 耦合在一起
            }
        };

这依然是违反开放封闭原则的,如果有天我们要增加 300 元预订或者去掉 200 元预订,意味着就必须改动这些业务函数部。就像一根环环相扣打了死结的链条,如果要增加、拆除或者移动一个节点,就必须得先砸烂这根链条。


灵活可拆分的职责链节点level03:

本节我们采用一种更灵活的方式,来改进上面的职责链模式,目标是让链中的各个节点可以灵活拆分和重组。

首先需要改写一下分别表示 3种购买模式的节点函数,我们约定,如果某个节点不能处理请求,则返回一个特定的字符串 ‘nextSuccessor’ 来表示该请求需要继续往后面传递:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var order500 = function( orderType, pay, stock ){
            if ( orderType === 1 && pay === true ){
                console.log( '500 元定金预购,得到 100 优惠券' );
            }else{
                return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递
            }
        };
        var order200 = function( orderType, pay, stock ){
            if ( orderType === 2 && pay === true ){
                console.log( '200 元定金预购,得到 50 优惠券' );
            }else{
                return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递
            }
        };
        var orderNormal = function( orderType, pay, stock ){
            if ( stock > 0 ){
                console.log( '普通购买,无优惠券' );
            }else{
                console.log( '手机库存不足' );
            }
        };
        /*接下来需要把函数包装进职责链节点,我们定义一个构造函数 Chain ,在 new  Chain 的时候传
        递的参数即为需要被包装的函数, 同时它还拥有一个实例属性 this.successor ,表示在链中的下
        一个节点。*/
//        此外 Chain 的 prototype 中还有两个函数,它们的作用如下所示:
        // Chain.prototype.setNextSuccessor 指定在链中的下一个节点
        // Chain.prototype.passRequest 传递请求给某个节点
        var Chain = function( fn ){
            this.fn = fn;
            this.successor = null;
        };
        Chain.prototype.setNextSuccessor = function( successor ){//指定在链中的下一个节点
            return this.successor = successor;
        };
        Chain.prototype.passRequest = function(){//传递请求给某个节点
            var ret = this.fn.apply( this, arguments );
            if ( ret === 'nextSuccessor' ){
                return this.successor && this.successor.passRequest.apply( this.successor, arguments );
            }
            return ret;
        };
//      现在我们把 3个订单函数分别包装成职责链的节点:
        var chainOrder500 = new Chain( order500 );
        var chainOrder200 = new Chain( order200 );
        var chainOrderNormal = new Chain( orderNormal );
//      然后指定节点在职责链中的顺序:
        chainOrder500.setNextSuccessor( chainOrder200 );
        chainOrder200.setNextSuccessor( chainOrderNormal );
//      最后把请求传递给第一个节点:
        chainOrder500.passRequest( 1, true, 500 ); // 输出:500 元定金预购,得到 100 优惠券
        chainOrder500.passRequest( 2, true, 500 ); // 输出:200 元定金预购,得到 50 优惠券
        chainOrder500.passRequest( 3, true, 500 ); // 输出:普通购买,无优惠券
        chainOrder500.passRequest( 1, false, 0 ); // 输出:手机库存不足
    </script>
</body>
</html>

异步的职责链(即何时跳转可以自定义)level04:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var order01 = function(){
            console.log( 1 );
            return 'nextSuccessor';
        };
        var order02 = function(){
            console.log( 2 );
            var self = this;
            setTimeout(function(){
                self.next();
            }, 1000 );
        };
        var order03 = function(){
            console.log( 3 );
        };

        var Chain = function( fn ){
            this.fn = fn;
            this.successor = null;
        };
        Chain.prototype.setNextSuccessor = function( successor ){//指定在链中的下一个节点
            return this.successor = successor;
        };
        Chain.prototype.passRequest = function(){//传递请求给某个节点
            var ret = this.fn.apply( this, arguments );
            if ( ret === 'nextSuccessor' ){
                return this.successor && this.successor.passRequest.apply( this.successor, arguments );
            }
            return ret;
        };
        Chain.prototype.next= function(){
            return this.successor && this.successor.passRequest.apply( this.successor, arguments );
        };
//      现在我们把 3个订单函数分别包装成职责链的节点:
        var fn1 = new Chain( order01 );
        var fn2 = new Chain( order02 );
        var fn3 = new Chain( order03 );
//      然后指定节点在职责链中的顺序:
        fn1.setNextSuccessor( fn2 ).setNextSuccessor( fn3 );
//      最后把请求传递给第一个节点:
        fn1.passRequest();
    </script>
</body>
</html>

职责链模式的优缺点

职责链模式使得程序中多了一些节点对象,可能在某一次的请求传递过程中,大部分节点并没有起到实质性的作用,它们的作用仅仅是让请求传递下去,从性能方面考虑,我们要避免过长的职责链带来的性能损耗。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章