学习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入门教程(2) JS基础知识
Jan 31 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
详解VueJs中的V-bind指令
May 03 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
基于javascript实现碰撞检测
Mar 12 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
javascript操作字符串的原生方法
2014/12/22 Javascript
js分页工具实例
2015/01/28 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python实现批量转换图片为黑白
2020/06/16 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
座谈会主持词
2014/03/20 职场文书
领导干部考核评语
2015/01/04 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python