学习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操作xml
Nov 04 Javascript
jquery 插件开发备注
Aug 27 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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 远程关机操作的代码
2008/12/05 PHP
php session 错误
2009/05/21 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python实现图像外边界跟踪操作
2020/07/13 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
军训 自我鉴定
2014/02/03 职场文书
老公保证书范文
2014/04/29 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
Python Parser的用法
2021/05/12 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
python中urllib包的网络请求教程
2022/04/19 Python