JavaScript 设计模式 责任链模式

Question

责任链模式可以用来消除请求的发送者和接受者之间的耦合。这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的。链中的每个对象可以处理请求，也可以将其传给下一个对象。JavaScript 内部就是使用了这个模式来处理事件捕获和冒泡的问题。

责任链模式中的角色：发出者、接受者

责任链模式的流程：

1. 发送者知道链中的第一个接受者，它向这个接受者发出请求
2. 每一个接受者都对请求进行分析，要么处理它，要么往下传递
3. 每一个接受者知道的其他对象只有一个，即它的下家对象
4. 如果没有任何接受者处理请求，那么请求将从链上离开，不同的实现对此有不同的反应

//责任链模式 responsibility
//目的：发出者 和接受者之间的耦合    
/**
                 *     发送者知道链中的第一个接受者，它向这个接受者发出请求
                    每一个接受者都对请求进行分析，要么处理它，要么往下传递
                    每一个接受者知道的其他对象只有一个，即它的下家对象
                    如果没有任何接受者处理请求，那么请求将从链上离开，不同的实现对此有不同的反应。
                 */

//做项目 ->：项目经理 ：->task  项目组[小 A,小 B,小 C,小 D]

//任务的类（发送者)
var Assign = function(task){
  this.task = task ;
};

// 接受任务的类
var WorkFlow = function(assign){
  this.assign = assign;
};

WorkFlow.prototype = {
  constructor: WorkFlow,
  //分析当前的任务到底谁能去执行
  filterHandler:function(es){
    for(var i = 0 ,len = es.length; i <len;i++ ){
      //如果当前的任务正好是你这个人比较擅长的 那就之间执行
      if(this.assign.task === es[i].cando){
        return es[i].todo();
      }
    }
    return ;
  }
};

//处理者
var Executor = function(name,cando){
  this.name = name ;     //接受者的姓名
  this.cando = cando;    //擅长的任务
};
Executor.prototype = {
  constructor:Executor,
  todo:function(){
    document.write(this.name + '开发:' + this.cando);
  }
};

//实例化 4 个处理对象
var e1 = new Executor('小 A','javascript 编程');
var e2 = new Executor('小 B','css 编程');
var e3 = new Executor('小 C','java 编程');
var e4 = new Executor('小 D','sql 编程');

//实例化任务对象
var assign = new Assign('java 编程');
//处理任务的类实例
var wf = new WorkFlow(assign);
wf.filterHandler([e1,e2,e3,e4]);

重构版

//责任链模式 responsibility
//目的：发出者 和 接受者之间的耦合    
/**
                 *     发送者知道链中的第一个接受者，它向这个接受者发出请求
                    每一个接受者都对请求进行分析，要么处理它，要么往下传递
                    每一个接受者知道的其他对象只有一个，即它的下家对象
                    如果没有任何接受者处理请求，那么请求将从链上离开，不同的实现对此有不同的反应。
                 */

//做项目 ->：项目经理 ：->task  项目组[小 A,小 B,小 C,小 D]

//任务的类（发送者)
var Assign = function(task){
  this.task = task ;
};

// 接受任务的类
var WorkFlow = function(assign){
  this.assign = assign;
};

WorkFlow.prototype = {
  constructor:WorkFlow,
  //当前过滤函数只接受 一个接收者对象（链中的第一个接收者）
  filterHandler:function(executor){
    //如果当前任务 适合 就直接执行
    if(this.assign.task === executor.cando ){
      return executor.todo();
    } else {
      //call apply 大显身手
      arguments.callee.call(this,executor.successor);
    }
  }
};

//处理者
var Executor = function(name,cando){
  this.name = name ;     //接受者的姓名
  this.cando = cando;    //擅长的任务
  this.successor = null; // 保留当前接受者的下一个对象的引用
};
Executor.prototype = {
  constructor:Executor,
  todo:function(){
    document.write(this.name + '开发:' + this.cando);
  },
  //设置责任链的配置函数
  setSuccessor:function(successor){
    this.successor = successor;
  }
};

//实例化 4 个处理对象
var e1 = new Executor('小 A','javascript 编程');
var e2 = new Executor('小 B','css 编程');
var e3 = new Executor('小 C','java 编程');
var e4 = new Executor('小 D','sql 编程');
//设置对象之间的责任链关系
e1.setSuccessor(e2);
e2.setSuccessor(e3);
e3.setSuccessor(e4);

//实例化任务对象
var assign = new Assign('sql 编程');
//处理任务的类实例
var wf = new WorkFlow(assign);
wf.filterHandler(e1);