JavaScript设计模式——职责链模式

　　职责链模式是设计模式中行为型的一种设计模式；

　　定义：

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

　  白话解释：

　　 做者坐标武汉，1000+万人口的新一线城市 ；以早高峰公交为例，早上早高峰的时候一般都是公交车前门拥堵，以致于没办法刷卡乘车；可是后门相对来讲会空一些，这时咱们选择后门上车，可是咱们后门上车就刷不了卡；逃单？不存在的，这可不是咱们做为讲文明、有素质的新一代青年应该作的；因而，咱们往前面传递公交卡，请求前面的乘客帮忙传递至刷卡器处刷卡，可是咱们是在后门，刷卡器是在前门，咱们这传递的过程当中会经过请求多位乘客帮忙传递公交卡，这个传递的过程就是一种职责链模式，每一位传递的乘客就是职责链中的节点对象；

　 代码实现：

　　假设有一个售卖手机的电商网站，通过分别缴纳500元定金和200元订价的两轮预约后（订单此时生成），如今已经到了正式购买的阶段。公司针对支付过定金的客户有必定的优惠政策。在正式购买时，已支付过500元定金的客户将得到100元商城优惠券，已支付过200元的客户将得到50元商城优惠券；而以前没有支付过定金的客户将没有任何优惠券，而且在库存有限的状况下，还不必定能买获得；

　　参数定义：

　　　1.orderType：表示订单类型（定金用户或普通用户），code的值为1的时候是500元定金用户，为2的时候是200元定金用户，为3的时候是普通用户；

　　    2.pay：表示用户是否已经支付定金，值为true或false。虽然用户下过500元的定金的订单，但若是他一直没有支付定金，如今只能以普通用户的身份进行购买；

　　    3.stock：表示普通用户用于购买手机的库存数量，已经支付过500元定金或者200元定金的客户不受此限制；

 　　实现：

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

　　上面的代码固然能实现需求功能，可是上述代码明显结构不清晰且order函数方法庞大，耦合程度很高；

　　

　　职责链模式实现：

　　　咱们使用职责链模式来实现上述功能，咱们先把500元定金订单、200元定金订单、普通订单分为3个函数，接下来把orderType、pay、stock这3个参数传入；若是500元订单函数不符合处理条件，就将这个请求传递给200元订单函数，若是200元订单函数也不符合处理条件，则就将这个请求传递给普通订单函数；

　　

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 元定金预购, 获得500 优惠券
order500( 3, false, 500 ); // 普通购买, 无优惠券
order500( 3, false, 0 ); // 手机库存不足

　　能够看到通过修改以后的代码，结构比以前的要清晰不少，拆分了函数而且去掉了不少if-else分支判断；

　　即便若是，修改后的代码依然是违反开放/封闭原则的，由于若是咱们后面需求变动，就必须修改这些函数的内部；这显然不是咱们想要的；

　　改良：

　　　　咱们先约定该函数不符合处理条件就返回nextSuccessor，若是符合处理条件就执行；

var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){ console.log( '500 元定金预购，获得100 优惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求日后面传递
 } }; var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){ console.log( '200 元定金预购，获得50 优惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求日后面传递
 } }; var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){ console.log( '普通购买，无优惠券' ); }else{ console.log( '手机库存不足' ); } }; var Chain = function( fn ){ this.fn = fn; this.successor = null; }; //传递请求给下一个节点
Chain.prototype.setNextSuccessor = function( successor ){ return this.successor = successor; }; //传递请求给某个节点
Chain.prototype.passRequest = function(){ //接收实例后的方法并将参数做为数组形式保存
    var ret = this.fn.apply( this, arguments ); console.log(ret); //ret等于nextSuccessor就是不符合处理条件还得往下执行
    if ( ret === 'nextSuccessor' ){ //这里是逻辑短路返回，并集一假则假；若是this.successor存在，则返回后面的执行结果；若是this.successor不存在,则返回this.nextSuccessor的值即为undefined
        return this.successor && this.successor.passRequest.apply( this.successor, arguments ); } }; var chainOrder500 = new Chain( order500 ); var chainOrder200 = new Chain( order200 ); var chainOrderNormal = new Chain( orderNormal ); //沿职责链节点传递
chainOrder500.setNextSuccessor( chainOrder200 ); chainOrder200.setNextSuccessor( chainOrderNormal ); chainOrder500.passRequest( 1, true, 500 ); // 500 元定金预购，获得100 优惠券
chainOrder500.passRequest( 2, true, 500 ); // 200 元定金预购，获得50 优惠券
chainOrder500.passRequest( 3, true, 500 ); // 普通购买，无优惠券
chainOrder500.passRequest( 1, false, 0 ); // 手机库存不足

 　　经过改良后，即便后面需求变动要出现定金300的订单，咱们也能够轻松应对；

 

var order300=function(){ 　　//具体实现的行为
}; chainOrder300=newChain(order300); chainOrder500.setNextSuccessor(chainOrder300); chainOrder300.setNextSuccessor(chainOrder200);

 

 

　　tips：

　　　　补充知识：逻辑短路；虽然这是JS基础的知识，可是不免会有遗忘，我在写这篇文章的时候就忘了；

　　　　并集一假得假：若是是并集（而且）关系则第一个数是假的或不存在的，直接返回第二个数的值；

 

var x = a && b && c 等价于 var x = a; if(a){ x = b; if(b){ x = c; } }

 

　　　　或集一真得真：若是是或集（或者）关系，则第一个数是真的直接返回第一个数，第一个数是假的直接返回第二个；

var x = a || b || c 等价于： var x; if(a){ x = a; } else if(b){ x = b; } else { x = c; }

 　　　　记住上面加粗的两句话，基本就能够熟练运用逻辑短路了；

原文出处：https://www.cnblogs.com/dengyao-blogs/p/11725141.html