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

 更新时间:2016年01月18日 16:43:31   作者:奋飛  
这篇文章主要为大家介绍了JavaScript设计模式中的责任链模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下

一、定义

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

二、示例

  • 假设这么一个场景:
  • 我们负责一个售卖手机的电商网站,经过分别缴纳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代码优化的8点总结

    javascript代码优化的8点总结

    本篇文章给大家分享了关于javascript代码优化的8点总结,希望我们整理的内容能够帮助到大家。
    2018-01-01
  • js跨浏览器实现将字符串转化为xml对象的方法

    js跨浏览器实现将字符串转化为xml对象的方法

    将字符串转化为xml对象需要注意的是该死的ie多版本的问题,具体实现如下,感兴趣的朋友不妨参考下本文,希望对大家有所帮助
    2013-09-09
  • Bootstrap的Refresh Icon也spin起来

    Bootstrap的Refresh Icon也spin起来

    本文通过实例给大家介绍Bootstrap的Refresh Icon相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • JS消息弹框alert、confirm、prompt的实现代码

    JS消息弹框alert、confirm、prompt的实现代码

    这篇文章主要介绍了JS消息弹框alert、confirm、prompt,文中还给大家介绍了js的三大基础弹框,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • JavaScript中for-in遍历方式示例介绍

    JavaScript中for-in遍历方式示例介绍

    for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,需要的朋友可以参考下
    2014-02-02
  • taro 实现购物车逻辑的实例代码

    taro 实现购物车逻辑的实例代码

    这篇文章主要介绍了taro 实现购物车逻辑,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 一文搞懂ES6中的Map和Set

    一文搞懂ES6中的Map和Set

    这篇文章主要介绍了ES6中的Map和Set,本文给大家提到了map和object的区别 ,需要的朋友可以参考下
    2019-05-05
  • JSQL  一个 web DB 的封装

    JSQL 一个 web DB 的封装

    当然随着HTML5的普及,web DB 已经是大势所趋了
    2010-05-05
  • JS实现self的resend

    JS实现self的resend

    self中resend是调用“基类方法”的原语,它会把当前接收到的消息原样发送给其原型(parent*)。在ECMA-v5时代,我们终于可以做出这个伟大的东西了。
    2010-07-07
  • JavaScript 学习 - 提高篇

    JavaScript 学习 - 提高篇

    JavaScript 学习 - 提高篇...
    2007-02-02

最新评论