JavaScript设计模式--责任链模式

一、定义

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

二、示例

假设这么一个场景:
我们负责一个售卖手机的电商网站,经过分别缴纳500元定金和200元定金的两轮预定后,到了正式购买阶段。针对预定用户实行优惠,支付过500元定金的用户会收到100元的商城优惠券,支付过200元定金的用户会收到50元的商城优惠券,没有支付定金的用户归为普通购买,且在库存有限的情况下不一定保证买到。

/* 传统方式实现 */
// orderType:[1:500, 2:200, 3:普通],isPaid:true/false,stock:库存量
var order = function(orderType, isPaid, stock) {
	if(orderType === 1) {
		if(isPaid) {
			console.log("500元定金预购,得到100优惠券");
		} else {
			if(stock > 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 === 3) {
		if(stock > 0) {
			console.log("普通购买,无优惠券");
		}else {
			console.log("库存不足");
		}
	}
}

order(1, true, 500);

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

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

var orderNormal = function(orderType, isPaid, 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, true, 10);

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

三、示例:文件上传对象

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

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"></object>';
		return $(str).appendTo($("body"));
	}
	return "nextSuccessor";
}

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

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

console.log(getUploadObj());

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

转载请标明出处:http://blog.csdn.net/ligang2585116

奋飛 CSDN认证博客专家 技术管理 前端工程化
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页