JS每日一題:設計模式-如何理解職責鏈模式?

lifesimple 發布于2019-08-23 16:56 / 1408人閱讀

摘要：提交請求的對象并不明確知道哪一個對象將會處理它也就是該請求有一個隱式的接受者。

20190412期

設計模式-如何理解職責鏈模式?

定義: 使多個對象都有機會處理請求，從而避免請求的發送者和接收者之間的耦合關系，將這些對象連成一條鏈，并沿著這條鏈傳遞該請求，直到有一個對象處理它為止

也就是說，請求以后，從第一個對象開始，鏈中收到請求的對象要么親自處理它，要么轉發給鏈中的下一個候選者。提交請求的對象并不明確知道哪一個對象將會處理它——也就是該請求有一個隱式的接受者（implicit receiver）。根據運行時刻，任一候選者都可以響應相應的請求，候選者的數目是任意的，你可以在運行時刻決定哪些候選者參與到鏈中

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

代碼場景:
假設我們正在開發一個電商網站，某一個商品正在進行預定活動，活動規則如下

500 元定金會收到200 優惠劵
200 元定金會收到100 優惠劵
沒有預定的用戶只能普通購買
假設我們后端會返回如下字段

orderType [1,2,3] 分別為500,200,普通購買

常規實現:

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

雖然我們得到了意料中的運行結果，但這并不是一段優秀的代碼，order函數會隨著業務的變更經常修改

下面我們用職責鏈模式進行改寫

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

用AOP(Aspect Oriented Programming )實現職責鏈

用AOP實現職責鏈又簡單又巧妙，但這種函數疊加在一起的方式，同時也疊加了函數的作用域，如果鏈條太長也會對性能造成影響

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定金用戶

總結

職責鏈模式可以很好的幫助我們管理代碼，降低發起請求的對象跟接收請求對象的耦合，職責鏈中的節點順序是可變化的，我們可以在運行中決定鏈中包含哪些節點

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器 JS設計模式 js繼承模式 js模式化窗口兼容模式不兼容js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103534.html

JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

zacklee 2019-08-30 15:55 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

lbool 2019-08-23 14:52 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

Alex 2019-08-02 14:09 評論0 收藏0