前端讲设计模式第一期-职责链模式

 

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

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

定义理解起来其实不难，下面看一组配图，生动的解释一下职责链

 

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

这是一段改造前的代码（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拦截器模型图

 好了 今天的职责链就讲到这 虽然没有实战 但是给大家提供了思路，希望对大家有所帮助。