So implementieren Sie ein Verantwortungskettenmuster in JavaScript

Dieser Artikel gibt hauptsächlich einen Überblick über das in JavaScript implementierte Chain-of-Responsibility-Modell und stellt detailliert vor, wie es implementiert wird. Interessierte Freunde können sich darauf beziehen >

Was ist das Muster der Verantwortungskette?

Die Definition des Musters der Verantwortungskette besteht darin, mehreren Objekten die Möglichkeit zu geben, Anfragen zu verarbeiten, wodurch die Kopplungsbeziehung vermieden wird zwischen dem Absender und dem Empfänger der Anfrage bilden eine Kette, und die Anfrage wird entlang der Kette weitergeleitet, bis ein Objekt sie verarbeitet. Wenn Sie zum Beispiel durch die Hintertür in den Bus einsteigen, können Sie die Münzen nicht direkt in die Geldkassette werfen, weil Sie nicht wissen, wo sie ist. Dann können Sie die Münzen nur der Person vor Ihnen geben und lassen Sie sich von ihm helfen, es an die Person vor Ihnen weiterzugeben, und geben Sie es dann an die Person weiter, die neben der Geldkassette steht, die die Münzen in die Geldkassette wirft.

Idee des Chain-of-Responsibility-Modells

Der Absender der Anfrage muss nur den ersten Knoten in der Kette kennen, wodurch die starke Verbindung zwischen dem Absender und einer Gruppe von Empfängern geschwächt wird . verbinden.

JavaScript implementiert den Chain-of-Responsibility-Modus (AOP-Methode)

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

Ja, es ist so einfach, den Chain-of-Responsibility-Modus in JavaScript zu implementieren, wenn Sie sich das oben Gesagte ansehen AOP-Code Wenn Sie es nicht wissen, können Sie auf diesen Artikel verweisen, den ich zuvor geschrieben habe, um AOP in JavaScript zu implementieren. Diese Methode sieht aus Code-Sicht sehr ähnlich aus, aber ihre Ausgangspunkte sind völlig unterschiedlich

AOP-Implementierung Dekoratormuster: Fügen Sie einige neue Funktionen hinzu, ohne die Interna bestehender Funktionen zu ändern. Sie können sich vorstellen, dass jedes Mal, wenn Sie danach anrufen, ein weiterer Kreis an der Außenseite hinzugefügt wird Kreis, um es einzuwickeln. Beachten Sie, dass es sich um inklusive Beziehungen handelt.

AOP implementiert das Chain-of-Responsibility-Modell: Bestimmen Sie, ob die nächste Funktion ausgeführt werden soll, nachdem die Funktion ausgeführt wurde. Dies entspricht dem Hinzufügen einer Funktion nach der vorhandenen Funktion Ob die folgende Funktion ausgeführt werden soll, hängt vom Rückgabewert der vorherigen Funktion ab. Beachten Sie, dass es sich um Kettenbeziehungen handelt

Chain-of-Responsibility-Musterinstanz

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"); //我是猫猫

Sehen Sie sich den obigen Code an, wir haben drei verschiedene Parameter an die Pet-Methode übergeben und unterschiedliche Ergebnisse erhalten . Nehmen Sie den ersten Aufruf als Beispiel: Übergeben Sie „pig“, das zuerst von der cat-Methode beurteilt wird, und übergibt daher „pig“ an die dog-Methode (Die Rückgabe von „nextSuccessor“ stellt die Übertragung zur nächsten Funktion dar), die Dog-Methode stellt fest, dass sie damit nicht umgehen kann, und übergibt dann „pig“ an die Pig-Methode. Die Pig-Methode kann damit umgehen, und die Konsole druckt „I am a“. Schwein.

Sie denken vielleicht, dass dies keine Energieverschwendung ist, indem Sie einfach die folgenden Codezeilen verwenden.

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"); //我是猫猫

Auf diese Weise scheint es viel einfacher zu sein. Aber haben Sie jemals darüber nachgedacht, dass Sie, wenn in Zukunft plötzlich Affen auftauchen, den Quellcode der Haustierfunktion ändern und eine if-Anweisung hinzufügen müssen, um festzustellen, ob es sich tatsächlich um einen Affen handelt? Das ist nicht schlecht, was wäre, wenn 10.000 Tiere dazukämen? Dann müssen Sie der Haustierfunktion 10.000 if-Anweisungen hinzufügen, was? Nicht auffällig genug? Haben Sie schon einmal darüber nachgedacht, dass ein Tier in viele Rassen eingeteilt werden kann? Katzen werden beispielsweise in Langhaarkatzen und Kurzhaarkatzen eingeteilt. Auf diese Weise enthält Ihr Code verschachtelte if-Anweisungen. Bei allem Respekt, Ihr Code ist jetzt so hässlich wie ein Hund, hehe

Aber wenn Sie das Chain-of-Responsibility-Modell verwenden, definieren wir für jedes zusätzliche Tier eine Funktion dafür und fügen sie dann hinzu Auf diese Weise ist die neue Funktion stark von der ursprünglichen Funktion entkoppelt, nicht wahr?

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

Wie man JS verwendet, um eine kleine Ballfolge zu implementieren die Maus Mobile

Detaillierte Einführung in die grundlegende Verwendung von NW.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Verantwortungskettenmuster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!