学习JavaScript设计模式之责任链模式
一、定义
责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。
二、示例
- 假设这么一个场景：
- 我们负责一个售卖手机的电商网站，经过分别缴纳500元定金和200元定金的两轮预定后，到了正式购买阶段。针对预定用户实行优惠，支付过500元定金的用户会收到100元的商城优惠券，支付过200元定金的用户会收到50元的商城优惠券，没有支付定金的用户归为普通购买，且在库存有限的情况下不一定保证买到。
/*传统方式实现*/
//orderType：[1:500,2:200,3:普通]，isPaid：true/false，stock：库存量
varorder=function(orderType,isPaid,stock){
if(orderType===1){
if(isPaid){
console.log("500元定金预购，得到100优惠券");
}else{
if(stock>0){
console.log("普通购买，无优惠券");
}else{
console.log("库存不足");
}
}
}elseif(orderType===2){
if(isPaid){
console.log("200元定金预购，得到50优惠券");
}else{
if(stock>0){
console.log("普通购买，无优惠券");
}else{
console.log("库存不足");
}
}
}elseif(orderType===2){
if(stock>0){
console.log("普通购买，无优惠券");
}else{
console.log("库存不足");
}
}
}
order(1,true,500);
/*职责链*/
varorder500=function(orderType,isPaid,stock){
if(orderType===1&&isPaid===true){
console.log("500元定金预购，得到100优惠券");
}else{
return"nextSuccessor";
}
};
varorder200=function(orderType,isPaid,stock){
if(orderType===2&&isPaid===true){
console.log("200元定金预购，得到50优惠券");
}else{
return"nextSuccessor";
}
};
varorderNormal=function(orderType,isPaid,stock){
if(stock>0){
console.log("普通购买，无优惠券");
}else{
console.log("库存不足");
}
};
Function.prototype.after=function(fn){
varself=this;
returnfunction(){
varret=self.apply(this,arguments);
if(ret==="nextSuccessor"){
returnfn.apply(this,arguments);
}
returnret;
};
}
varorder=order500.after(order200).after(orderNormal);
order(1,true,10);
优点：解耦了请求发送者和N个接受者之间的复杂关系。
弊端：不能保证某个请求一定会被链中的节点处理。
三、示例：文件上传对象
示例2：用责任链模式获取文件上传对象
PS：对比《学习JavaScript设计模式之迭代器模式》
functiongetActiveUploadObj(){
try{
returnnewActiveObject("TXFTNActiveX.FTNUpload");//IE上传控件
}catch(e){
return"nextSuccessor";
}
}
functiongetFlashUploadObj(){
if(supportFlash().f===1){//supportFlash见《JavaScript设计模式--迭代器模式》
varstr='<objecttype="application/x-shockwave-flash"></object>';
return$(str).appendTo($("body"));
}
return"nextSuccessor";
}
functiongetFormUploadObj(){
varstr='<inputname="file"type="file"class="ui-file"/>';
return$(str).appendTo($("body"));
}
vargetUploadObj=getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);
console.log(getUploadObj());
无论是作用域链、原型链、还是DOM节点中的事件冒泡，我们都能从中找到职责链的影子。
以上就是本文的全部内容，希望本文所述对大家学习javascript程序设计有所帮助。。