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

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

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

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

 ​

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

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

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