Erlernen Sie das Verantwortungskettenmuster von JavaScript-Designmustern_Javascript-Fähigkeiten

1. Definition

Verantwortungskettenmuster: Geben Sie mehreren Objekten die Möglichkeit, Anforderungen zu verarbeiten, wodurch die Kopplungsbeziehung zwischen dem Absender und dem Empfänger der Anforderung vermieden wird, diese Objekte zu einer Kette verbunden werden und entlang dieser Die Anforderung ist durch die Kette geleitet, bis ein Objekt sie verarbeitet.

2. Beispiel

• Nehmen Sie ein Szenario wie dieses an:
• Wir sind für eine E-Commerce-Website verantwortlich, die Mobiltelefone verkauft. Nach zwei Reservierungsrunden mit einer Anzahlung von jeweils 500 Yuan und einer Anzahlung von 200 Yuan haben wir die formelle Kaufphase erreicht. Benutzer, die eine Anzahlung von 500 Yuan geleistet haben, erhalten Rabatte. Benutzer, die eine Anzahlung von 200 Yuan geleistet haben, erhalten einen Gutschein von 50 Yuan Als gewöhnliche Käufe eingestuft. Und wenn der Vorrat begrenzt ist, kann der Kauf nicht garantiert werden.
  

/* 传统方式实现 */
// 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);

Vorteile: Entkoppelt die komplexe Beziehung zwischen dem Absender der Anfrage und N Empfängern.
Nachteile: Es gibt keine Garantie dafür, dass eine bestimmte Anfrage von den Knoten in der Kette verarbeitet wird.

3. Beispiel: Datei-Upload-Objekt

Beispiel 2: Datei-Upload-Objekt mithilfe des Verantwortungskettenmodells abrufen
PS: Vergleiche „JavaScript-Entwurfsmuster lernen, Iteratormuster“

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());

Ob es sich um die Bereichskette, die Prototypenkette oder das im DOM-Knoten sprudelnde Ereignis handelt, wir können den Schatten der Verantwortungskette finden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass dieser Artikel für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird. .