学习JavaScript设计模式之责任链模式

前端之家收集整理的这篇文章主要介绍了学习JavaScript设计模式之责任链模式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、定义

二、示例

  • 假设这么一个场景:
  • 我们负责一个售卖手机的电商网站,经过分别缴纳500元定金和200元定金的两轮预定后,到了正式购买阶段。针对预定用户实行优惠,支付过500元定金的用户会收到100元的商城优惠券,支付过200元定金的用户会收到50元的商城优惠券,没有支付定金的用户归为普通购买,且在库存有限的情况下不一定保证买到。
0) { console.log("普通购买,无优惠券"); }else { console.log("库存不足"); } } }else if(orderType === 2) { if(isPaid) { console.log("200元定金预购,得到50优惠券"); } else { if(stock > 0) { console.log("普通购买,无优惠券"); }else { console.log("库存不足"); } } }else if(orderType === 2) { if(stock > 0) { console.log("普通购买,无优惠券"); }else { console.log("库存不足"); } } }

order(1,true,500);

/职责链 /
var order500 = function(orderType,stock) {
if(orderType === 1 && isPaid === true) {
console.log("500元定金预购,得到100优惠券");
}else {
return "nextSuccessor";
}
};

var order200 = function(orderType,stock) {
if(orderType === 2 && isPaid === true) {
console.log("200元定金预购,得到50优惠券");
}else {
return "nextSuccessor";
}
};

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

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

var order = order500.after(order200).after(orderNormal);
order(1,10);

优点:解耦了请求发送者和N个接受者之间的复杂关系。 弊端:不能保证某个请求一定会被链中的节点处理。

三、示例:文件上传对象

示例2:用责任链模式获取文件上传对象 PS:对比《学习JavaScript设计模式之迭代器模式》

<div class="jb51code">
<pre class="brush:js;">
function getActiveUploadObj() {
try{
return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上传控件
}catch(e) {
return "nextSuccessor";
}
}

function getFlashUploadObj() {
if(supportFlash().f === 1) { // supportFlash见《JavaScript设计模式--迭代器模式》
var str = '<object type="application/x-shockwave-flash">';
return $(str).appendTo($("body"));
}
return "nextSuccessor";
}

function getFormUploadObj() {
var str = '';
return $(str).appendTo($("body"));
}

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

console.log(getUploadObj());

无论是作用域链、原型链、还是DOM节点中的事件冒泡,我们都能从中找到职责链的影子。

以上就是本文的全部内容,希望本文所述对大家学习javascript程序设计有所帮助。。

原文链接:https://www.f2er.com/js/50507.html

猜你在找的JavaScript相关文章