JavaScript 책임 체인 패턴 개요

一、概述　

职责链模式（Chain of responsibility），就是使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理他为止。　

貌似和数据结构中的链表一样。　

但，不要搞混了，职责链可不等于链表哦，因为职责链可以在任何一个节点开始往下查找，而链表，则必须从头结点开始往下查找。　

比如，DOM事件机制中的冒泡事件就属于职责链，而捕获事件则属于链表。　

二、利用职责链模拟冒泡　

假设我们有三个对象：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);만으로도 됩니다.　

그래서, 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（이메일을 보내면, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제할 것입니다。）