快捷導(dǎo)航

學(xué)習(xí)JavaScript設(shè)計(jì)模式之責(zé)任鏈模式

更新時(shí)間：2016年01月18日 16:43:31 作者：奮飛

這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的責(zé)任鏈模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下

一、定義

責(zé)任鏈模式：使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接受者之間的耦合關(guān)系，將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理它為止。

二、示例

假設(shè)這么一個(gè)場景：
我們負(fù)責(zé)一個(gè)售賣手機(jī)的電商網(wǎng)站，經(jīng)過分別繳納500元定金和200元定金的兩輪預(yù)定后，到了正式購買階段。針對(duì)預(yù)定用戶實(shí)行優(yōu)惠，支付過500元定金的用戶會(huì)收到100元的商城優(yōu)惠券，支付過200元定金的用戶會(huì)收到50元的商城優(yōu)惠券，沒有支付定金的用戶歸為普通購買，且在庫存有限的情況下不一定保證買到。

/* 傳統(tǒng)方式實(shí)現(xiàn) */
// orderType：[1:500, 2:200, 3:普通]，isPaid：true/false，stock：庫存量
var order = function(orderType, isPaid, stock) {
  if(orderType === 1) {
    if(isPaid) {
      console.log("500元定金預(yù)購，得到100優(yōu)惠券");
    } else {
      if(stock > 0) {
        console.log("普通購買，無優(yōu)惠券");
      }else {
        console.log("庫存不足");
      }
    }
  }else if(orderType === 2) {
    if(isPaid) {
      console.log("200元定金預(yù)購，得到50優(yōu)惠券");
    } else {
      if(stock > 0) {
        console.log("普通購買，無優(yōu)惠券");
      }else {
        console.log("庫存不足");
      }
    }
  }else if(orderType === 2) {
    if(stock > 0) {
      console.log("普通購買，無優(yōu)惠券");
    }else {
      console.log("庫存不足");
    }
  }
}

order(1, true, 500);

/*職責(zé)鏈 */
var order500 = function(orderType, isPaid, stock) {
  if(orderType === 1 && isPaid === true) {
    console.log("500元定金預(yù)購，得到100優(yōu)惠券");
  }else {
    return "nextSuccessor";
  }
};

var order200 = function(orderType, isPaid, stock) {
  if(orderType === 2 && isPaid === true) {
    console.log("200元定金預(yù)購，得到50優(yōu)惠券");
  }else {
    return "nextSuccessor";
  }
};

var orderNormal = function(orderType, isPaid, stock) {
  if(stock > 0) {
    console.log("普通購買，無優(yōu)惠券");
  }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);

優(yōu)點(diǎn)：解耦了請(qǐng)求發(fā)送者和N個(gè)接受者之間的復(fù)雜關(guān)系。
弊端：不能保證某個(gè)請(qǐng)求一定會(huì)被鏈中的節(jié)點(diǎn)處理。

三、示例：文件上傳對(duì)象

示例2：用責(zé)任鏈模式獲取文件上傳對(duì)象
PS：對(duì)比《學(xué)習(xí)JavaScript設(shè)計(jì)模式之迭代器模式》

function getActiveUploadObj() {
  try{
    return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上傳控件
  }catch(e) {
    return "nextSuccessor";
  }
}

function getFlashUploadObj() {
  if(supportFlash().f === 1) {  // supportFlash見《JavaScript設(shè)計(jì)模式--迭代器模式》
    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節(jié)點(diǎn)中的事件冒泡，我們都能從中找到職責(zé)鏈的影子。

以上就是本文的全部內(nèi)容，希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。。

您可能感興趣的文章: