JavaScript设计模式（10）—— 职责链模式

深碍√TFBOYSˉ_ 2021-09-07 06:02 346阅读 0赞

# 职责链模式！=‘学术命名’ #

我在本系列的第一篇文章里阐述过一个原则：即学习设计模式并不能帮助你优化代码，经常是给你现有的代码进行学术命名，而本章的内容可能不属于“学术命名”范畴了，职责链模式是一种彻彻底底的我在教你做事模式。

# 职责链模式的使用场景 #

不管是任何设计模式，都有属于自己适用的场景，而职责链模式的使用场景跟它的名字一样，将一个请求不断地传递，直到遇到能处理他的函数为止。当然为了确保请求能被处理，请至少有一个保底函数来处理那些错误请求，比如你想找工作，但你把这个请求发送到淘宝去了，那这个请求不管怎么传递都不可能有回复的，所以淘宝最终会返回一个“没找到任何相关结果”的页面。

# 开始教你做事 #

介绍完职责链模式的使用场景，开始教你如何使用职责链模式。通常这个系列我们都是先介绍一个例子，然后巴拉巴拉告诉你，原来这个例子他有个好听的名字叫“XXX"，但是职责链模式不同，这个模式有一个固定的套路来帮你实现职责链。当然我们还是以简单的例子出发，将它一步步改造成职责链模式。  
讲一个三个和尚没水喝的故事吧。

// number 代表和尚数量
      function drinkWater(number){ 
           if(number===1){ 
               console.log('一个和尚挑水喝')
           }else{ 
               if(number===2){ 
                   console.log('两个和尚抬水喝')
               }else{ 
                   console.log('三个和尚没水喝')
               }
           }
       }

上面的例子就是一个最简单的”职责链“，通过不断的if嵌套把一个请求往深层传递，直到这个请求被处理为止。  
这样写代码的坏处显而易见，当和尚数量越来越多的时候，这个函数的嵌套会庞大到难以阅读，因此我们将采用职责链模式重构这段代码。首先我们将数量不同的和尚能做的事情封装到独立的函数里。保证每个函数只做自己该做的事情，并把自己做不了的信息统一传达出来。当然我们还需要一个处理错误请求的函数。代码如下：

function drinkWater1(number){ 
       if(number===1){ 
            console.log('一个和尚挑水喝')
            return '一个和尚挑水喝'
        }else{ 
            return '我干不了，请求支援'
        }
    }
    function drinkWater2(number){ 
        if(number===2){ 
            console.log('两个和尚抬水喝')
            return '两个和尚抬水喝'
        }else{ 
            return '我干不了，请求支援'
        }
    }
    
    function drinkWaterError(number){ 
        console.log('三个和尚没水喝')
    }

现在我们已经得到三个各司其职的函数了，下一步是将他们组合成一条职责链。这里我们定义一个构造函数Chain，这个构造函数可以指定将函数封装成节点，并指定节点在职责链中的顺序。

function Chain(fn){ 
          this.fn = fn
          this.nextFn = null
      }
      Chain.prototype.setNext = function(fn){ 
          this.nextFn = fn
      }
      Chain.prototype.getRequest = function(){ 
          let reqRet = this.fn.apply(this,arguments)
          if(reqRet === '我干不了，请求支援'){ 
              return this.nextFn.getRequest.apply(this.nextFn, arguments) // 如果没有收尾的函数请使用下面的代码
              // return this.nextFn && this.nextFn.getRequest.apply(this.nextFn, arguments)
          }
          return reqRet // reqRet 可能是无返回，处理请求不一定要有返回值
      }

下面把三个各司其职的函数封装成职责链的节点，并指定每个节点在职责链中的顺序（当然这个顺序就跟配置文件一样，可以根据实际情况随意打乱），最后我们不需要知道寺庙里有几个和尚，只要将已知请求发给任意一个和尚就可以了，当然你最好是知道起点在哪里，不然你很容易错过可以处理请求的函数，最保险的方法就是从职责链的第一个节点开始传递请求，当然这也是最消耗性能的传递方式。

let chainDrinkWater1 = new Chain(drinkWater1)
      let chainDrinkWater2 = new Chain(drinkWater2)
      let chainDrinkWaterError = new Chain(drinkWaterError)
    
      chainDrinkWater1.setNext(chainDrinkWater2)
      chainDrinkWater2.setNext(chainDrinkWaterError)
    
      chainDrinkWater1.getRequest(2) // 两个和尚抬水喝
      chainDrinkWater2.getRequest(3) // 三个和尚没水喝

# 职责链模式的优点 #

1.降低处理函数的耦合性，根据不同的场景可以使用不同的处理函数  
2.不需要知道请求需要交给哪个函数处理也可以得到正确的结果（牺牲一点性能）  
3.可以像使用配置文件一样使用函数，并且可以随意组合他们的顺序。