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

2019-11-20 10:46:33

字体：大中小

来源：转载

供稿：网友

一、定义

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

二、示例

假设这么一个场景：
我们负责一个售卖手机的电商网站，经过分别缴纳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基于notie.js插件实现消息提示特效

下一篇：深入学习jQuery Validate表单验证（二）