首頁 > web前端 > js教程 > 主體

JavaScript中如何實作職責鏈模式

亚连
發布: 2018-06-09 14:53:09
原創
1350 人瀏覽過

這篇文章主要介紹了JavaScript實現職責鏈模式概述,詳細的介紹了什麼是職責鏈模式和實現方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下

#什麼是職責鏈模式

職責鏈模式的定義是:使多個物件都有機會處理請求,從而避免請求的發送者和接收者之間的耦合關係,將這些物件連成一條鏈,並沿著這條鏈傳遞該請求,直到有一個物件處理它為止。舉個例子:當你從公車後門上車之後,你不可能直接把硬幣放到收款箱裡面, 因為你不知道它在哪,那你就只能把硬幣給你前面一個人,讓他幫你傳到前面一個人手上,這樣一直傳遞到站在收款箱旁邊人的手上,由他把硬幣放到收款箱裡面。

職責鏈模式想法

請求發送者只需要知道鏈中的第一個節點,從而弱化了發送者和一組接收者之間的強聯繫。

JavaScript實作職責鏈模式(AOP方式)

 Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
     return fn.apply(this, arguments);
    }
    return ret;
  }
 }
登入後複製

是的沒錯,在JavaScript中實現職責鏈模式就是如此的簡單,如果對上面AOP程式碼不了解可以參考我之前寫的這篇文章JavaScript實現AOP,這個方式和裝飾者模式看起來很像,從程式碼來看確實很像,但是他們的出發點是完全不同的

AOP實現裝飾者模式:在不改變已有函數內部的情況下添加一些新的功能,你可以想像一下同心圓,你每調用一次after,就相當於給你的圓外面又加了一個圓來包裹住它。注意它們是包含關係

AOP實現職責鏈模式:在函數執行之後確定是否執行下一個函數,你每次調用after,都相當於在已有函數之後添加一個函數,至於是否執行後面這個函數,取決於前一個函數的回傳值。注意它們是鍊式關係

職責鏈模式實例

function cat (type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else {
    return "nextSuccessor"
  }
}

function dog (type) {
  if(type == "dog") {
    console.log("我是狗狗");
  } else {
    return "nextSuccessor"
  }
}

function pig (type) {
  if(type == "pig") {
    console.log("我是猪猪");
  } else {
    return "nextSuccessor"
  }
}

Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
      return fn.apply(this, arguments);
    }
    return ret;
  }
}


var pet = cat.after(dog).after(pig);

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫
登入後複製

請看上述程式碼,我們給pet方法傳入了三個不同的參數,得到了不同的結果。拿第一次呼叫舉例,其執行過程是這樣的:傳入“pig”,先由cat方法判斷,cat方法發現自己處理不了,於是把“pig”傳遞給dog方法(return "nextSuccessor"來表示傳遞給下一個函數),dog方法發現自己也處理不了,再接著把“pig”傳遞到pig方法,pig方法可以處理,控制台打印,我是豬豬。

你可能會覺得這不是浪費精神麼,上述功能只需使用下面的幾行程式碼就能解決,為何還要多寫上面那麼多程式碼

function pet(type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else if(type == "dog") {
    console.log("我是狗狗");
  } else if(type == "pig") {
    console.log("我是猪猪");
  }
}

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫
登入後複製

這樣看來,好像是簡單很多了。但你有沒有考慮過,如果以後突然多了猴子這種動物,如果使用上面的垃圾代碼,那你就要去修改pet函數的源碼,多加一條if語句判斷是不是猴子,其實這也還好,如果是加了1萬種動物呢?那你就要在pet這個函數裡加入1萬個if語句,什麼?還不夠浮誇?那你有沒有考慮過一種動物還會分很多品種,比如說貓咪分為長毛貓,短毛貓。這樣你的程式碼就會牽扯到嵌套if語句。恕我直言,現在你的程式碼已經醜成狗了,嘻嘻

但是如果使用職責鏈模式,每多一個種動物,我們就給他定義一個函數,然後添加到職責鏈上,這樣一來,新的函數就跟原來的函數高度解耦,豈不美哉?

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Vue元件中有關自訂事件(詳細教學)

利用JS如何實作小球跟隨滑鼠移動

詳細介紹NW.js基本上使用

以上是JavaScript中如何實作職責鏈模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板