JS每日一題:設(shè)計(jì)模式-如何理解職責(zé)鏈模式?

lifesimple 發(fā)布于2019-08-23 16:56 / 1402人閱讀

摘要：提交請(qǐng)求的對(duì)象并不明確知道哪一個(gè)對(duì)象將會(huì)處理它也就是該請(qǐng)求有一個(gè)隱式的接受者。

20190412期

設(shè)計(jì)模式-如何理解職責(zé)鏈模式?

定義: 使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系，將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理它為止

也就是說，請(qǐng)求以后，從第一個(gè)對(duì)象開始，鏈中收到請(qǐng)求的對(duì)象要么親自處理它，要么轉(zhuǎn)發(fā)給鏈中的下一個(gè)候選者。提交請(qǐng)求的對(duì)象并不明確知道哪一個(gè)對(duì)象將會(huì)處理它——也就是該請(qǐng)求有一個(gè)隱式的接受者（implicit receiver）。根據(jù)運(yùn)行時(shí)刻，任一候選者都可以響應(yīng)相應(yīng)的請(qǐng)求，候選者的數(shù)目是任意的，你可以在運(yùn)行時(shí)刻決定哪些候選者參與到鏈中

還不明白？ok, 來(lái)個(gè)生活小實(shí)例, 早高峰擠公交車，往往擠上去卻看不到售票員，我們常常通過他人之手將票錢傳遞給售票員，這種關(guān)系就能看做為職責(zé)鏈，我們的票錢通過多人之手最終遞交到售票員手中

代碼場(chǎng)景:
假設(shè)我們正在開發(fā)一個(gè)電商網(wǎng)站，某一個(gè)商品正在進(jìn)行預(yù)定活動(dòng)，活動(dòng)規(guī)則如下

500 元定金會(huì)收到200 優(yōu)惠劵
200 元定金會(huì)收到100 優(yōu)惠劵
沒有預(yù)定的用戶只能普通購(gòu)買
假設(shè)我們后端會(huì)返回如下字段

orderType [1,2,3] 分別為500,200,普通購(gòu)買

常規(guī)實(shí)現(xiàn):

const order = function(orderType){
  if(orderType===1){
    // 假設(shè)我們有其它需求
    if(....){
      .....
    }
    return console.log(500元定金用戶)
  }
  if(orderType===2){
    // 假設(shè)我們有其它需求
    if(....){
      .....
    }
    return console.log(200元定金用戶)
  }
  if(orderType===3){
    // 假設(shè)我們有其它需求
    if(....){
      .....
    }
    return console.log(用戶普通購(gòu)買)
  }
}
order(1) // 500元定金用戶

雖然我們得到了意料中的運(yùn)行結(jié)果，但這并不是一段優(yōu)秀的代碼，order函數(shù)會(huì)隨著業(yè)務(wù)的變更經(jīng)常修改

下面我們用職責(zé)鏈模式進(jìn)行改寫

const Chain = function(fn){
  this.fn = fn;
  this.successor = null;
}
Chain.prototype.setNextSuccessor = function(successor){ 指定在鏈中的下一個(gè)節(jié)點(diǎn)
  return this.successor = successor;
}
Chain.prototype.passRequest = function(){  //傳遞請(qǐng)求給某一下節(jié)點(diǎn)
  var ret = this.fn.apply(this,arguments);
  if(ret === false){  // 如果ret 為false 代表鏈條還得繼續(xù)往下走
    return this.successor && this.successor.passRequest.apply(this.successor,arguments)
  }
}
// 包裝成職責(zé)鏈的節(jié)點(diǎn)
var chainOrder500 = new Chain(order500);
var chainOrder200 = new Chain(order200);
// 然后再指定節(jié)點(diǎn)在鏈中的順序
chainOrder500.setNextSuccessor(chainOrder200)
// 最后把請(qǐng)求傳遞給第一個(gè)節(jié)點(diǎn)
chainOrder500.passRequest(1)  // 500元定金用戶

用AOP(Aspect Oriented Programming )實(shí)現(xiàn)職責(zé)鏈

用AOP實(shí)現(xiàn)職責(zé)鏈又簡(jiǎn)單又巧妙，但這種函數(shù)疊加在一起的方式，同時(shí)也疊加了函數(shù)的作用域，如果鏈條太長(zhǎng)也會(huì)對(duì)性能造成影響

Function.prototype.after(fn){
  var _this = this;
  return function(){
    var ret = _this.apply(this,arguments);
    if(ret === false){
      return fn.apply(this.arguments);
    }
    return ret
  }
}
var order = order500.after(order200).after(orderNormal);
order(2) // 200定金用戶

總結(jié)

職責(zé)鏈模式可以很好的幫助我們管理代碼，降低發(fā)起請(qǐng)求的對(duì)象跟接收請(qǐng)求對(duì)象的耦合，職責(zé)鏈中的節(jié)點(diǎn)順序是可變化的，我們可以在運(yùn)行中決定鏈中包含哪些節(jié)點(diǎn)

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來(lái)完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題