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


Posted in Javascript onJanuary 18, 2016

一、定义

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

二、示例

  • 假设这么一个场景:
  • 我们负责一个售卖手机的电商网站,经过分别缴纳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节点中的事件冒泡,我们都能从中找到职责链的影子。

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

Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
微信小程序实现刷脸登录
May 25 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 #Javascript
深入学习jQuery Validate表单验证
Jan 18 #Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
You might like
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
js 操作select和option常用代码整理
2012/12/13 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
护士自我鉴定范文
2013/10/06 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
家长寄语大全
2014/04/02 职场文书
公司承诺书怎么写
2014/05/24 职场文书
法律专业自荐信
2014/06/03 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
给医院的感谢信
2015/01/21 职场文书
市场部经理岗位职责
2015/02/02 职场文书
党员个人承诺书
2015/04/27 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书