JS设计模式笔记(职责链模式)

  1. 1. 职责链模式
    1. 1.1. 商品购买-职责链实例
    2. 1.2. 灵活可拆分的职责链节点
    3. 1.3. 优缺点
    4. 1.4. 利用aop实现职责链
    5. 1.5. 获取文件上传对象-职责链实例
  2. 2. 参考文档

职责链模式

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

商品购买-职责链实例

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
var order500 = function(orderType, pay, stock) {
if(orderType === 1 && pay === true) {
console.log('500定金预定,得到100优惠卷');
}
else {
order200(orderType, pay, stock);
}
};

var order200 = function(orderType, pay, stock) {
if (orderType === 2 && pay === true) {
console.log('200 定金预定,得到50优惠卷');
}
else {
orderNomal(orderType, pay, stock);
}
};

var orderNomal = function(orderType, pay, stock) {
if (stock > 0) {
console.log('普通购买,无优惠卷');
}
else {
console.log('库存不足');
}
};

order500(1, false, 500); // 普通购买,无优惠卷
order500(3, false, 0); // 库存不足

灵活可拆分的职责链节点

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
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 orderNomal = 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);

if (ret === 'nextSuccessor') {
return this.successor && this.successor.passRequest.apply(this.successor, arguments);
}

return ret;
};

var chainOrder500 = new Chain(order500);
var chainOrder200 = new Chain(order200);
var chainOrderNormal = new Chain(orderNomal);

chainOrder500.setNextSuccessor(chainOrder200);
chainOrder200.setNextSuccessor(chainOrderNormal);

chainOrder500.passRequest(3, true, 500); // 普通购买,无优惠卷

优缺点

优点

  1. 解耦了请求发送者和N个接受者之间的复杂关系
  2. 链中的节点对象可以灵活的拆分重组
  3. 可以手动指定其实节点

缺点

  • 避免过长的职责链带来的性能损耗

利用aop实现职责链

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
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 orderNomal = function(orderType, pay, stock) {
if (stock > 0) {
console.log('普通购买,无优惠卷');
}
else {
console.log('库存不足');
}
};

Function.prototype.after = function(fn) {
var _this = this;
return function() {
var ret = _this.apply(this, arguments);
if (ret === 'nextSuccessor') {
return fn.apply(this, arguments);
}

return ret;
}
};

var order = order500.after(order200).after(orderNomal);

order(1, false, 500); // 普通购买,无优惠卷

增加了函数的作用域,如果链条太长,会对性能有较大的影响

获取文件上传对象-职责链实例

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
Function.prototype.after = function(fn) {
var _this = this;
return function() {
var ret = _this.apply(this, arguments);
if (ret === 'nextSuccessor') {
return fn.apply(this, arguments);
}

return ret;
}
};

var getActiveUploadObj = function() {
try {
return new ActiveXObject('TXFTNActivex.FTMUpload');
}
catch (e) {
return 'nextSuccessor';
}
};

var getFlashUploadObj = function() {
if (supportFlash()) { // supportFlash未实现
var str = '<object type="application/x-shockwave-flash"></object>';
return $(str).appendTo($('body'));
}
return 'nextSuccessor';
};

var getFormUploadObj = function() {
var str = '<input name="file" type="file">';
return $(str).appendTo($('body'));
};

var getUploadObj = getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);

console.log(getUploadObj());

参考文档

  • 实体书: JavaScript设计模式与开发实践(曾探)

文章若有纰漏请大家补充指正,谢谢~~
http://blog.xinshangshangxin.com SHANG殇