学习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读取ASP设定的COOKIE
Nov 24 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
js实现简单选项卡功能
Mar 23 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 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数据采集的详解
2013/06/02 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP导入导出Excel代码
2015/07/07 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python购物车程序简单代码
2018/04/18 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
建筑经济管理专业求职信分享
2014/01/06 职场文书
教堂婚礼主持词
2014/03/14 职场文书
初一学生期末评语
2014/04/24 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
股权投资协议书
2016/03/23 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书