JavaScript设计模式--责任链模式
来源:互联网 发布:淘宝男士雪地靴 编辑:程序博客网 时间:2024/05/17 22:50
一、定义
责任链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。
二、示例
假设这么一个场景:
我们负责一个售卖手机的电商网站,经过分别缴纳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 === 2) { 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
6 0
- JavaScript设计模式--责任链模式
- Javascript 责任链模式
- 责任链设计模式
- 责任链设计模式
- 设计模式---责任链
- 责任链设计模式
- 设计模式----责任链
- 设计模式-责任链
- 责任链设计模式
- 责任链设计模式
- 设计模式:责任链
- [设计]责任链模式
- 设计模式--责任链
- 责任链设计模式
- 设计模式----责任链模式
- 【设计模式】责任链模式
- 设计模式---责任链模式
- 设计模式:责任链模式
- 10029---CSS 下拉菜单 ,图片廊
- Linux——Vi、Vim编辑器命令基础
- listview 嵌套listview的显示问题
- mysql获取某个表的所有字段名
- 数据结构期末总结
- JavaScript设计模式--责任链模式
- Dom4j解析xml文件-递归遍历所有节点和属性
- 大楼扔鸡蛋问题 dp poj 3783
- 摩尔斯电码(morse)转换英文字符串c语言代码
- 数据库的操作(使用FMDB)
- 如何更改Linux中默认的openjdk为自己安装的JDK
- Linux——磁盘基本概念
- CCF CSP 201509-4 树的直径 相关解题方法和网址
- Android 虚化的高级技巧