JavaScriptの責任連鎖パターンの概要

一、概要　

責任連鎖パターン（Chain of responsibility）は、複数のオブジェクトがリクエストを処理する機会を持たせることで、リクエストの送信者と受信者間の結合関係を避けるパターンです。このオブジェクトを一つの鎖に結びつけ、その鎖を通じてリクエストを伝播し、そのリクエストを処理するオブジェクトが見つかるまで伝播します。　

データ構造のリストのように見えます。　

しかし、混同しないように、責任連鎖はリストとは異なりますよ。なぜなら、責任連鎖はどのノードからでも下に検索できるからです。一方、リストは最初のノードから始めて下に検索する必要があります。　

例えば、DOMイベントメカニズムのバブルイベントは責任連鎖に属し、キャプチャーイベントはリストに属します。　

二、責任連鎖を用いた冒泡のシミュレーション　

例えば、以下の3つのオブジェクト：li、ul、divがあり、その関係図は以下の通りです：

例えば、liオブジェクトをトリガーした場合、liがバブルを阻止しなかったら、ulオブジェクトに伝播し、ulに到達すると、バブルを阻止しなかったらdivオブジェクト（ここでdivがルートノードであると仮定します）に伝播します。同様に、ul、div。　

ここに来たら、明らかに責任連鎖パターンが適していることがわかりますので、このような要件を記述します。　

しかし、JavaScriptで責任連鎖パターンを実現する方法はどうですか？　

以下，我々はプロトタイプチェーンの方法で基本的な構造を構築することができます：　

function CreateDOM(obj){
  this.next = obj || null;
};  
CreateDOM.prototype = {
  handle: function(){
    if(this.next){
      this.next.handle();
    }
  }
};

CreateDOM構造関数を使ってオブジェクトを作成するたびに、関連するオブジェクトを渡します（もちろんです、これがリストのようです）。　

その後、あるオブジェクトをトリガーしてhandleメソッドを実行すると、このチェーンを辿って進むことができます。　

ただし、あるオブジェクトのhandleプロパティがプロトタイプチェーンのhandleをオーバーライドした場合、どのように引き続き伝播するか注意してください。　

CreateDOM.prototype.handle.call(this);で十分です。　

So，実現li、ul、divのコードは以下の通りです：　

var li = null; 
  ul = null; 
  div = null;
div = new CreateDOM();
div.handle = function(stopBubble){
  console.log('DIV');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
ul = new CreateDOM(div);
ul.handle = function(stopBubble){
  console.log('UL');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
li = new CreateDOM(ul);
li.handle = function(stopBubble){
  console.log('LI');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};

これでこの記事のすべての内容が終わりです。皆さんの学習に役立つことを願っています。また、呐喊ガイドを多くの人がサポートしてくれることを願っています。

声明：この記事の内容はインターネットから取得され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードした内容であり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害の疑いがある場合は、notice#wまでメールを送ってください。3codebox.com（メール送信時、#を@に変更して報告してください。関連する証拠を提供し、一旦確認ができたら、このサイトは即座に侵害疑いのコンテンツを削除します。）