JavaScript で責任連鎖パターンを実装する方法

この記事では主にJavaScriptで実装された責任連鎖モデルの概要を紹介しており、興味のある方は参考にしてください。責任連鎖パターンの定義は、複数のオブジェクトにリクエストを処理する機会を与え、それによってリクエストの送信者と受信者の間の結合関係を回避し、これらのオブジェクトを 1 つに接続することです。リクエストは、オブジェクトが処理するまで保持されます。例えば、バスに後部ドアから乗る場合、どこにあるのか分からないので直接小銭を入れることはできず、前の人に渡すしかありません。そして、目の前の人にそれを渡し、次に金庫の隣に立っている人の手に渡し、その人が硬貨を金庫に入れます。

責任連鎖パターンのアイデア

リクエストの送信者はチェーン内の最初のノードのみを知る必要があるため、送信者と受信者のグループの間の強いつながりが弱まります。

JavaScript は責任連鎖モード (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;
  }
 }

はい、JavaScript で責任連鎖モードを実装するのは非常に簡単です。上記の AOP コードが理解できない場合は、この記事を参照してください。 JavaScript が AOP を実装する前に作成したこのメソッドは、コードの観点からはデコレータ パターンに非常によく似ていますが、AOP がデコレータ パターンを実装する点は、既存の関数の内部を変更せずにいくつかの関数を追加するという点でまったく異なります。新しい関数の場合、after を呼び出すたびに、円の外側に別の円を追加してそれを囲むことと同じになります。これらは包含的な関係であることに注意してください

AOP は責任の連鎖モデルを実装します。関数が実行された後に次の関数を実行するかどうかを決定するのは、既存の関数の後に関数を追加するのと同じです。後の関数を実行するかどうかは、前の関数の戻り値に依存します。これらは連鎖関係であることに注意してください

責任連鎖パターンの例

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

上記のコードを見てください。pet メソッドに 3 つの異なるパラメーターを渡し、異なる結果が得られています。最初の呼び出しを例に挙げると、実行プロセスは次のとおりです。 cat メソッドで最初に判断された "pig" を渡します。 (return "nextSuccessor" は次の関数への転送を表します)、dog メソッドはそれを処理できないことがわかり、pig メソッドに "pig" を渡します。 pig メソッドはそれを処理でき、コンソールに「I am a」と出力されます。豚。

これはエネルギーの無駄ではないと思われるかもしれません。上記の関数は次のコード行を使用するだけで解決できます。なぜさらに多くのコードを記述する必要があるのでしょうか?もっとシンプルに。しかし、将来、猿が突然現れた場合、上記のゴミコードを使用すると、pet 関数のソース コードを変更して、実際に猿であるかどうかを判断するための if ステートメントを追加する必要があることを考えたことはありますか。 、これは悪くない、10,000 匹追加したらどうなるでしょうか。次に、pet 関数に 10,000 の if ステートメントを追加する必要があります。派手さが足りませんか？たとえば、猫は長毛種と短毛種に分けられることを考えたことはありますか。このようにして、コードにはネストされた if ステートメントが含まれます。敬意を表して、あなたのコードは犬のように醜くなりました、ヒヒ

しかし、責任連鎖モデルを使用する場合、追加の動物ごとに関数を定義し、それを責任連鎖に追加します。このように、新しい機能は元の機能から高度に分離されています。 上記は私があなたのためにまとめたものです。

関連記事:

Vueコンポーネントのカスタムイベントについて(詳しいチュートリアル)

JSを使ってマウスの動きに追従するボールを実装する方法

NW.jsの基本的な使い方を詳しく紹介

以上がJavaScript で責任連鎖パターンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。