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

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

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

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

文章图片

文章图片
?
那么它的作用就发人深省了，我理解的其中之一呢就是解耦，让代码各个模块只能更加清晰，看下面的例子：
这是一段改造前的代码（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，解耦真的能把职责链的功能发挥到极致吗？
【前端讲设计模式-职责链真的是你理解的那样吗（）】答案是：不能
职责链的核心功效是：分步处理，每一步处理一点（职能以内的），最后全部处理完。体会一下，它是一个链，为什么把它穿成一个链条呢？来看下图