Comment implémenter un modèle de chaîne de responsabilité en JavaScript

Cet article présente principalement un aperçu du modèle de chaîne de responsabilité implémenté en JavaScript. Il présente en détail ce qu'est le modèle de chaîne de responsabilité et comment il est mis en œuvre. Les amis intéressés peuvent s'y référer

Qu'est-ce que le modèle de chaîne de responsabilité ?

La définition du modèle de chaîne de responsabilité est de permettre à plusieurs objets d'avoir la possibilité de traiter les demandes, évitant ainsi la relation de couplage entre l'expéditeur et le destinataire de la requête. Ces objets forment une chaîne et la requête est transmise le long de la chaîne jusqu'à ce qu'un objet la gère. Par exemple : lorsque vous montez dans le bus par la porte arrière, vous ne pouvez pas mettre les pièces directement dans la caisse parce que vous ne savez pas où elle se trouve. Vous ne pouvez alors donner les pièces qu'à la personne en face de vous. et laissez-le vous aider à le passer à la personne en face de vous, puis à le passer à la main de la personne debout à côté de la caisse, qui mettra les pièces dans la caisse.

Idée de modèle de chaîne de responsabilité

L'expéditeur de la requête n'a besoin de connaître que le premier nœud de la chaîne, affaiblissant ainsi le lien fort entre l'expéditeur et un groupe de destinataires . connecter.

JavaScript implémente le mode chaîne de responsabilité (méthode AOP)

 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;
  }
 }

Oui, c'est si simple d'implémenter le mode chaîne de responsabilité en JavaScript Si vous comprenez le. ci-dessus Si vous ne connaissez pas le code AOP, vous pouvez vous référer à cet article que j'ai écrit auparavant pour implémenter AOP en JavaScript. Cette méthode ressemble beaucoup au modèle décorateur. Elle est en effet très similaire du point de vue du code, mais leur. les points de départ sont complètement différents

AOP implémente le modèle décorateur : ajouter de nouvelles fonctions sans modifier l'intérieur des fonctions existantes. Vous pouvez imaginer des cercles concentriques à chaque fois que vous appelez après, cela équivaut à ajouter un autre cercle à envelopper. l’extérieur de votre cercle. Vivez-le. Notez qu'il s'agit de relations inclusives

AOP implémente le modèle de chaîne de responsabilité : déterminez si vous devez exécuter la fonction suivante après l'exécution de la fonction. Chaque fois que vous appelez après, cela équivaut à ajouter une fonction après la fonction existante. . Quant à savoir si la fonction suivante doit être exécutée, cette fonction dépend de la valeur de retour de la fonction précédente. Notez qu'il s'agit de relations en chaîne

Instances de modèle de chaîne de responsabilité

function cat (type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else {
    return "nextSuccessor"
  }
}

function dog (type) {
  if(type == "dog") {
    console.log("我是狗狗");
  } else {
    return "nextSuccessor"
  }
}

function pig (type) {
  if(type == "pig") {
    console.log("我是猪猪");
  } else {
    return "nextSuccessor"
  }
}

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 pet = cat.after(dog).after(pig);

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫

Regardez le code ci-dessus, nous avons transmis trois paramètres différents à la méthode pet et avons obtenu eu des résultats différents. Prenons l'exemple du premier appel.Le processus d'exécution est le suivant : Passez "pig", qui est d'abord jugé par la méthode cat. La méthode cat constate qu'elle ne peut pas le gérer, elle passe donc "pig" à la méthode dog. (le retour "nextSuccessor" représente le transfert vers la fonction suivante), la méthode dog constate qu'elle ne peut pas le gérer, puis passe "pig" à la méthode pig. La méthode pig peut le gérer et la console imprime, je suis un. cochon.

Vous pensez peut-être que ce n'est pas un gaspillage d'énergie. Les fonctions ci-dessus peuvent être résolues en utilisant simplement les lignes de code suivantes. Pourquoi avez-vous besoin d'écrire autant de code ci-dessus ?

Regardez ça de cette façon Allez, ça semble être beaucoup plus simple. Mais avez-vous déjà pensé que si des singes apparaissent soudainement dans le futur, si vous utilisez le code poubelle ci-dessus, vous devrez modifier le code source de la fonction pet et ajouter une instruction if pour déterminer s'il s'agit d'un singe. ce n'est pas mal, et si 10 000 animaux étaient ajoutés ? Ensuite, vous devez ajouter 10 000 instructions if à la fonction pet, quoi ? Pas assez flashy ? Avez-vous déjà pensé qu'un animal peut être divisé en plusieurs races ? Par exemple, les chats sont divisés en chats à poils longs et en chats à poils courts. De cette façon, votre code impliquera des instructions if imbriquées. Avec tout le respect que je vous dois, votre code est maintenant aussi laid qu'un chien, hi hi

function pet(type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else if(type == "dog") {
    console.log("我是狗狗");
  } else if(type == "pig") {
    console.log("我是猪猪");
  }
}

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫

Mais si vous utilisez le modèle de chaîne de responsabilité, pour chaque animal supplémentaire, nous définirons une fonction pour celui-ci puis l'ajouterons à la chaîne des responsabilités. De cette façon, la nouvelle fonction est fortement découplée de la fonction d'origine, n'est-ce pas beau ?

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Comment utiliser JS pour implémenter un petit suivi de balle la souris Mobile

Introduction détaillée à l'utilisation de base de NW.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!