JavaScript 디자인 패턴_javascript 기술의 책임 사슬 패턴을 학습합니다.

1. 정의

책임 체인 패턴: 여러 개체에 요청을 처리할 수 있는 기회를 부여함으로써 요청의 발신자와 수신자 간의 결합 관계를 피하고 이러한 개체를 체인으로 연결하며 이에 따라 요청은 다음과 같습니다. 물체가 처리할 때까지 체인을 통과합니다.

2. 예시

• 다음 시나리오를 가정해 보세요.
• 휴대폰을 판매하는 전자상거래 사이트를 담당하고 있습니다. 보증금 500위안과 보증금 200위안으로 두 차례 예약을 거쳐 정식 구매 단계에 이르렀습니다. 예약 사용자에게는 할인이 적용됩니다. 보증금 500위안을 지불한 사용자에게는 100위안 몰 쿠폰이 제공됩니다. 보증금을 지불한 사용자에게는 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 수신자 간의 복잡한 관계를 분리합니다.
단점: 특정 요청이 체인의 노드에 의해 처리된다는 보장이 없습니다.

3. 예: 파일 업로드 개체

예 2: 책임 사슬 모델을 사용하여 파일 업로드 객체 획득
추신: "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 노드의 이벤트 버블링이든 책임 체인의 그림자를 찾을 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 이 글이 자바스크립트 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다. .