概述
职责链模式是设计模式中行为型的一种设计模式；
定义：使多个对象都有机会处理请求，从而避免请求的发送者与接收者之间的耦合关系，将这些处理请求的对象形成一个链，并沿着这个链传递请求，直到有一个对象处理它为止；
白话解释：作者坐标武汉，1000+万人口的新一线城市 ；以早高峰公交为例，早上早高峰的时候通常都是公交车前门拥堵，以至于没办法刷卡乘车；但是后门相对来说会空一些，这时我们选择后门上车，但是我们后门上车就刷不了卡；逃单？不存在的，这可不是我们作为讲文明、有素质的新一代青年应该做的；于是，我们往前面传递公交卡，请求前面的乘客帮忙传递至刷卡器处刷卡，但是我们是在后门，刷卡器是在前门，我们这传递的过程中会通过请求多位乘客帮忙传递公交卡，这个传递的过程就是一种职责链模式，每一位传递的乘客就是职责链中的节点对象；
代码实现
假设有一个售卖手机的电商网站，经过分别缴纳500元定金和200元定价的两轮预定后（订单此时生成），现在已经到了正式购买的阶段。公司针对支付过定金的客户有一定的优惠政策。在正式购买时，已支付过500元定金的客户将获得100元商城优惠券，已支付过200元的客户将获得50元商城优惠券；而之前没有支付过定金的客户将没有任何优惠券，并且在库存有限的情况下，还不一定能买得到；
参数定义
1.orderType：表示订单类型（定金用户或普通用户），code的值为1的时候是500元定金用户，为2的时候是200元定金用户，为3的时候是普通用户；
2.pay：表示用户是否已经支付定金，值为true或false。虽然用户下过500元的定金的订单，但如果他一直没有支付定金，现在只能以普通用户的身份进行购买；
3.stock：表示普通用户用于购买手机的库存数量，已经支付过500元定金或者200元定金的客户不受此限制；
实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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元订单函数也不符合处理条件，则就将这个请求传递给普通订单函数；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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，如果符合处理条件就执行；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
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的订单，我们也可以轻松应对；
|
1
2
3
4
5
6
7
|
var order300=function(){ //具体实现的行为};chainOrder300=newChain(order300);chainOrder500.setNextSuccessor(chainOrder300);chainOrder300.setNextSuccessor(chainOrder200); |
tips：
补充知识：逻辑短路；虽然这是JS基础的知识，但是难免会有遗忘，我在写这篇文章的时候就忘了；
并集一假得假：如果是并集（并且）关系则第一个数是假的或不存在的，直接返回第二个数的值；
|
1
2
3
4
5
6
7
8
9
|
var x = a && b && c 等价于var x = a;if(a){ x = b; if(b){ x = c; }} |
或集一真得真：如果是或集（或者）关系，则第一个数是真的直接返回第一个数，第一个数是假的直接返回第二个；
|
1
2
3
4
5
6
7
8
9
10
|
var x = a || b || c 等价于：var x;if(a){ x = a;} else if(b){ x = b;} else { x = c;} |
记住上面加粗的两句话，基本就可以熟练运用逻辑短路了；
以上就是JavaScript设计模式之职责链模式的详细内容，更多关于JavaScript设计模式的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/dengyao-blogs/p/11725141.html
