前端讲设计模式-职责链真的是你理解的那样吗?

别把代码当饭吃
English

本期讲一下职责链,先看一下定义:

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

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

  title=

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

这是一段改造前的代码(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优惠券

 title=

 改造后的代码,我们来看一下,虽然代码量没有减少(反而增加了) 但是职能分的特别清楚,每个模块是干啥的都能看得明白

// 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 ); // 输出:手机库存不足

 title=

 那么我们要思考,职责链真的只是干这些的吗?网上铺天盖地全是类似的demo,解耦真的能把职责链的功能发挥到极致吗?

答案是:不能

职责链的核心功效是:分步处理,每一步处理一点(职能以内的),最后全部处理完。体会一下,它是一个链,为什么把它穿成一个链条呢?来看下图

 title=

 那么在实战中(前端)有那些例子呢?我认为如下模块可以用职责链模式改造

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

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

 title=

 下面师http拦截器模型图

 title=

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

阅读 348

笨鸟先飞

119 声望
14 粉丝
0 条评论
你知道吗?

笨鸟先飞

119 声望
14 粉丝
宣传栏