乐趣区

关于前端:前端讲设计模式职责链真的是你理解的那样吗

jiezi

本期讲一下职责链，先看一下定义：

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

定义了解起来其实不难，上面看一组配图，活泼的解释一下职责链

 ​

 那么它的作用就发人深省了，我了解的其中之一呢就是解耦，让代码各个模块只能更加清晰，看上面的例子：

这是一段革新前的代码（PS 网上找的例子），平铺直叙，if 套 if 前期再看不好保护 各个模块职责不是很明确 

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

 革新后的代码，咱们来看一下，尽管代码量没有缩小（反而减少了）然而职能分的特地分明，每个模块是干啥的都能看得明确 

// 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); // 输入：手机库存有余

 那么咱们要思考，职责链真的只是干这些的吗？网上铺天盖地全是相似的 demo，解耦真的能把职责链的性能施展到极致吗？

答案是：不能

职责链的外围效用是：分步解决，每一步解决一点（职能以内的），最初全副解决完。领会一下，它是一个链，为什么把它穿成一个链条呢？来看下图

​

 那么在实战中（前端）有那些例子呢？我认为如下模块能够用职责链模式革新

1. 简单的数据过滤  2.http 拦截器  3. 路由权限过滤 等

上面来一个数据过滤的流程图

​

 上面师 http 拦截器模型图

 好了 明天的职责链就讲到这 尽管没有实战 然而给大家提供了思路，心愿对大家有所帮忙。

退出移动版