JS设计模式——责任链模式
#使用场景如下：
假设我们负责一个售卖手机的电商网站，经过分别交纳 500 元定金和 200 元定金的两轮预定后（订单已在此时生成），现在已经到了正式购买的阶段。
公司针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过 500 元定金的用户会收到 100 元的商城优惠券，200 元定金的用户可以收到 50 元的优惠券，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优惠券，且在库存有限的情况下不一定保证能买到。
我们的订单页面是 PHP 吐出的模板，在页面加载之初，PHP 会传递给页面几个字段。
#orderType：表示订单类型（定金用户或者普通购买用户），code 的值 为 1 的时候是 500 元定金用户，为 2 的时候是 200 元定金用户，为 3 的时候是普通购买用户。
#pay：表示用户是否已经支付定金，值为 true 或者 false, 虽然用户已经下过 500 元定金的订单，但如果他一直没有支付定金，现在只能降级进入普通购买模式。
# stock：
表示当前用于普通购买的手机库存数量，已经支付 过 500 元或者 200元定金的用户不受此限制。
# 下面我们把这个流程写成代码：
** 初级代码**
初级菜鸟的写法
/**
* 1....初级的写法
* @param orderType
* @param pay
* @param stock
*/
let order=function (orderType,pay,stock){
if (orderType===1){
if (pay===true){
console.log('500元定金，得到100元优惠券');
}else { //未支付定金，降级到普通购买模式
if (stock>0){ //用于普通购买的手机还有库存
console.log('普通购买，没有优惠券');
}else {
console.log('手机库存不足');
}
}
}
else if(orderType===2){
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('手机库存不足');
}
}
};
console.log("###################初级写法####################");
order(1,true,500);
虽然我们得到了意料中的运行结果，但这远远算不上一段值得夸奖的代码。order 函数不仅巨大到难以阅读，而且需要经常进行修改。虽然目前项目能正常运行，但接下来的维护工作无疑是个梦魇。恐怕只有最“新手”的程序员才会写出这样的代码。
** 中级写法**
现在我们采用职责链模式重构这段代码，先把 500 元订单、200 元订单以及普通购买分成 3个函数。接下来把 orderType、pay、stock 这 3 个字段当作参数传递给 500 元订单函数，如果该函数不符合处理条件，则把这个请求传递给后面的 200 元订单函数，如果 200 元订单函数依然不能处理该请求，则继续传递请求给普通购买函数，代码如下：
稍好一点的写法分函数，形成简单责任链
/**
*
*
* 2,中级写法，使用责任链模式重构代码
* 分为三个函数
*
* @param orderType
* @param pay
* @param stock
*
*
*/
//1，500元的订单
let order500=function (orderType,pay,stock){
if (orderType===1&&pay===true){
console.log('500元定金，得到100元优惠券');
}
else {
order200(orderType,pay,stock);//将请求转给200元订单
}
};
//200元订单
let order200=function (orderType,pay,stock){
if(orderType===2&&pay===true){
console.log('200元定金预约，得到50优惠券');
}else {
orderNormal(orderType,pay,stock);//将请求传给普通订单
}
};
//普通购买订单
let orderNormal=function (orderType,pay,stock){
if (stock>0){
console.log('普通购买，没有优惠券');
}else {
console.log('手机库存不足');
}
};
console.log("###################中级责任链####################");
order500(1,true,500);
order500(1,false,500);
order500(2,true,500);
order500(3,false,500);
order500(3,false,0);
可以看到，执行结果和前面那个巨大的 order 函数完全一样，但是代码的结构已经清晰了很多，我们把一个大函数拆分了 3 个小函数，去掉了许多嵌套的条件分支语句。目前已经有了不小的进步，但我们不会满足于此，虽然已经把大函数拆分成了互不影响的 3个小函数，但可以看到，请求在链条传递中的顺序非常僵硬，传递请求的代码被耦合在了业务函数之中。
这依然是违反开放封闭原则的，如果有天我们要增加 300 元预订或者去掉 200 元预订，意味着就必须改动这些业务函数内部。就像一根环环相扣打了死结的链条，如果要增加、拆除或者移动一个节点，就必须得先砸烂这根链条。
来改进上面的职责链模式，目标是让链中的各个节点可以灵活拆分和重组。首先需要改写一下分别表示 3 种购买模式的节点函数，我们约定，如果某个节点不能处理请求，则返回一个特定的字符串 'nextSuccessor’来表示该请求需要继续往后面传递：
高级一点的责任链——灵活可拆分的责任链节点
/**
* 3.。。灵活可拆分的责任链节点
*
* @param orderType
* @param pay
* @param stock
*
*
*/
let order_500=function (orderType,pay,stock){
if (orderType===1&&pay===true){
console.log('500元定金，得到100元优惠券');
}else {
return 'nextSuccessor';
}
};
let order_200=function (orderType,pay,stock){
if (orderType===2&&pay===true){
console.log('200元定金预约，得到50优惠券');
}else {
return 'nextSuccessor';
}
};
let order_Normal=function (orderType,pay,stock){
if (stock>0){
console.log('普通购买，没有优惠券');
}else {
console.log('手机库存不足');
}
}
let Chain=function (fn){
this.fn=fn;
this.successor=null;
};
// 指定在链中的下一个节点
Chain.prototype.setNextSuccessor=function (successor){
return this.successor=successor;
};
//传递请求给某个节点
Chain.prototype.passRequest=function (){
let ret=this.fn.apply(this,arguments);
if (ret==="nextSuccessor"){
return this.successor&&this.successor.passRequest.apply(this.successor,arguments);
}
return ret;
};
//把3个订单函数分别包装成责任链的节点
let chainOrder_500=new Chain(order_500);
let chainOrder_200=new Chain(order_200);
let chainOrder_Normal=new Chain(order_Normal);
//指定节点在责任链中的顺序
chainOrder_500.setNextSuccessor(chainOrder_200);
chainOrder_200.setNextSuccessor(chainOrder_Normal);
//把请求传递给下一个节点
console.log("###################高级灵活可充分####################");
chainOrder_500.passRequest(1,true,500);
chainOrder_500.passRequest(2,true,500);
chainOrder_500.passRequest(2,false,500);
chainOrder_500.passRequest(3,true,500);
chainOrder_500.passRequest(1,false,0);
//扩展性很好，如果要添加300元的定金支付
let order_300=function (){
//具体实现
console.log("这里是新增的300")
};
let chainOrder_300=new Chain(order_300);
chainOrder_500.setNextSuccessor(chainOrder_300);
chainOrder_200.setNextSuccessor(chainOrder_200);
我们让每个节点函数同步返回一个特定的值"nextSuccessor"，来表示是否把请求传递给下一个节点。而在现实开发中，我们经常会遇到一些异步的问题，比如我们要在节点函数中发起一个 ajax异步请求，异步请求返回的结果才能决定是否继续在职责链中 passRequest。这时候让节点函数同步返回"nextSuccessor"已经没有意义了，所以要给 Chain 类再增加一个原型方法 Chain.prototype.next，表示手动传递请求给职责链中的下一个节点：
异步执行责任链
/**
*
*
*4。。。 异步执行的责任链
*/
Chain.prototype.next=function (){
return this.successor&&this.successor.passRequest(this.successor,arguments);
}
//异步责任链的例子
console.log("###################异步责任链####################");
let fn1=new Chain(function (){
console.log(1);
return 'nextSuccessor';
});
let fn2=new Chain(function (){
console.log(2);
let self=this;
setTimeout(function (){
self.next();
},1000)
});
let fn3=new Chain(function (){
console.log(3);
});
fn1.setNextSuccessor(fn2).setNextSuccessor(fn3);
fn1.passRequest();
责任链的优缺点
职责链模式的最大优点就是解耦了请求发送者和 N 个接收者之间的复杂关系，由于不知道链中的哪个节点可以处理你发出的请求，所以你只需把请求传递给第一个节点即可，如图
用职责链模式改进后：
职责链模式使得程序中多了一些节点对象，可能在某一次的请求传递过程中，大部分节点并没有起到实质性的作用，它们的作用仅仅是让请求传递下去，从性能方面考虑，我们要避免过长的职责链带来的性能损耗。
用AOP实现责任链
在之前的职责链实现中，我们利用了一个 Chain 类来把普通函数包装成职责链的节点。其实利用 JavaScript 的函数式特性，有一种更加方便的方法来创建职责链。
在这里插入代码片
/**
*
* 5.。。用AOP实现责任链
*
*
*/
console.log("###################AOP实现责任链####################");
Function.prototype.after=function (fn){
let self=this;
return function (){
let ret=self.apply(this,arguments);
if (ret==='nextSuccessor'){
return fn.apply(this,arguments);
}
return ret;
}
};
let order_aop=order_500.after(order_200).after(order_Normal());
order_aop(1,true,500);
order_aop(2,true,500);
order_aop(1,false,500);
用 AOP 来实现职责链既简单又巧妙，但这种把函数叠在一起的方式，同时也叠加了函数的作用域，如果链条太长的话，也会对性能有较大的影响。
用职责链模式获取文件上传对象
在这里插入代码片
/**
* 用责任链模式获取文件上传对象
*
* @returns {string|any}
*/
let getActiveUploadObj=function (){
try{
return new ActiveXObject("TXFNActiveX.FINUpload");//IE 上传课件
}catch (e){
return 'nextSuccessor';
}
};
let getFlashUploadObj=function (){
if (supportFlash()){
let str='<object type="application/x-shockwave-flash"></object>>';
return $(str).appendTo($('body'));
}
return 'nextSuccessor';
};
let getFormUploadObj=function (){
return $('<form><><input type="file" name="file"></form>').appendTo($('body'));
};
let getUploadObj=getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);
console.log(getUploadObj());
小结
在 JavaScript 开发中，职责链模式是最容易被忽视的模式之一。实际上只要运用得当，职责链模式可以很好地帮助我们管理代码，降低发起请求的对象和处理请求的对象之间的耦合性。职责链中的节点数量和顺序是可以自由变化的，我们可以在运行时决定链中包含哪些节点。
无论是作用域链、原型链，还是 DOM 节点中的事件冒泡，我们都能从中找到职责链模式的影子。职责链模式还可以和组合模式结合在一起，用来连接部件和父部件，或是提高组合对象的效率。学会使用职责链模式，相信在以后的代码编写中，将会对我们大有裨益。
加油
| 读书 | 明智 | 笃行 |
|---|---|---|
| 读书百遍其义自现 | 明明德，止于至善 | 业精于勤，荒于嬉；行成于思，毁于随 |
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续你的创作。
……^ _ ^ !!!
3342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
