Apprenez le modèle de chaîne de responsabilité des modèles de conception JavaScript_compétences Javascript

1. Définition

Modèle de chaîne de responsabilité : Donner à plusieurs objets la possibilité de traiter les demandes, évitant ainsi la relation de couplage entre l'expéditeur et le destinataire de la demande, connectant ces objets dans une chaîne, et le long de celle-ci, la demande est passé à travers la chaîne jusqu'à ce qu'un objet le manipule.

2. Exemple

• Supposons un scénario comme celui-ci :
• Nous sommes responsables d'un site de commerce électronique qui vend des téléphones portables. Après deux tours de réservation avec un dépôt de 500 yuans et un dépôt de 200 yuans respectivement, nous avons atteint le stade formel de l'achat. Des réductions sont mises en œuvre pour les utilisateurs de réservation. Les utilisateurs qui ont payé un dépôt de 500 yuans recevront un coupon de 100 yuans pour le centre commercial. Les utilisateurs qui ont payé un dépôt de 200 yuans recevront un coupon de 50 yuans pour le centre commercial. classés comme achats ordinaires. Et lorsque le stock est limité, l’achat peut ne pas être garanti.
  

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

Avantages : Découple la relation complexe entre l'expéditeur de la requête et les N destinataires.
Inconvénients : Il n'y a aucune garantie qu'une certaine demande sera traitée par les nœuds de la chaîne.

3. Exemple : Objet de téléchargement de fichier

Exemple 2 : Obtenir un objet de téléchargement de fichier à l'aide du modèle de chaîne de responsabilité
PS : comparez « Modèle d'itérateur de modèles de conception JavaScript d'apprentissage »

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

Qu'il s'agisse de la chaîne de portée, de la chaîne de prototypes, ou de l'événement bouillonnant dans le nœud DOM, on peut retrouver l'ombre de la chaîne de responsabilité.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript. .