快捷導(dǎo)航

JS設(shè)計(jì)模式之責(zé)任鏈模式實(shí)例詳解

更新時(shí)間：2018年02月03日 14:06:57 作者：itpinpai

這篇文章主要介紹了JS設(shè)計(jì)模式之責(zé)任鏈模式,結(jié)合實(shí)例形式詳細(xì)分析了責(zé)任鏈模式的概念、原理、功能、使用場(chǎng)景及相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS設(shè)計(jì)模式之責(zé)任鏈模式。分享給大家供大家參考，具體如下：

責(zé)任鏈設(shè)計(jì)模式：

在責(zé)任鏈模式里，很多對(duì)象由每一個(gè)對(duì)象對(duì)其下家的引用而連接起來形成一條鏈。請(qǐng)求在這個(gè)鏈上傳遞，直到鏈上的某一個(gè)對(duì)象決定處理此請(qǐng)求。發(fā)出這個(gè)請(qǐng)求的客戶端并不知道鏈上的哪一個(gè)對(duì)象最終處理這個(gè)請(qǐng)求，這使得系統(tǒng)可以在不影響客戶端的情況下動(dòng)態(tài)地重新組織和分配責(zé)任。

責(zé)任鏈模式涉及到的角色如下所示：

●　抽象處理者(Handler)角色：定義出一個(gè)處理請(qǐng)求的接口。如果需要，接口可以定義出一個(gè)方法以設(shè)定和返回對(duì)下家的引用。這個(gè)角色通常由一個(gè)Java抽象類或者Java接口實(shí)現(xiàn)。上圖中Handler類的聚合關(guān)系給出了具體子類對(duì)下家的引用，抽象方法handleRequest()規(guī)范了子類處理請(qǐng)求的操作。

●　具體處理者(ConcreteHandler)角色：具體處理者接到請(qǐng)求后，可以選擇將請(qǐng)求處理掉，或者將請(qǐng)求傳給下家。由于具體處理者持有對(duì)下家的引用，因此，如果需要，具體處理者可以訪問下家。

在JS（ES6之前）中嚴(yán)格意義上是沒有extends繼承概念，所以以下代碼沒有模擬抽象類，代碼中只實(shí)現(xiàn)了具體處理類.

使用場(chǎng)景:在一個(gè)購(gòu)物商城，在五一做了一個(gè)活動(dòng)，所以圖書類商品根據(jù)購(gòu)買的金額依次做出以下折扣方案，

1、購(gòu)買滿199元,打9折
2、購(gòu)買滿399元,打8折
3、購(gòu)買滿599元以上,打7折；

責(zé)任鏈鏈的優(yōu)點(diǎn)：

請(qǐng)求發(fā)送者只需要知道鏈中的第一個(gè)節(jié)點(diǎn)，從而弱化了發(fā)送者和一組接收者之間的強(qiáng)聯(lián)系。如果不使用責(zé)任鏈鏈模式、根據(jù)當(dāng)前價(jià)格客戶端要知道每一級(jí)打折信息，最后知道具體是那一層上打折才是符合當(dāng)前價(jià)格的折扣。

function BookHandler() {
 this.calcPrice = function( price ) {
  if ( 199 > price ) {
   console.log("原價(jià)是："+ price);
  } else {
   this.successor.calcPrice( price );
  }
 }
 this.setSuccessor = function( _successor ) {
  this.successor = _successor;
 }
}
function BookCalc9Handler( _successor ) {
 this.calcPrice = function( price ) {
  if ( 199 <= price && price < 399 ) {
   console.log("原價(jià)是："+ price +";打9折后：" + (price * 0.9));
  } else {
   this.successor.calcPrice( price );
  }
 }
 this.setSuccessor = function( _successor ) {
  this.successor = _successor;
 }
}
function BookCalc8Handler() {
 this.calcPrice = function( price ) {
  if ( 399 <= price && price < 599 ) {
   console.log("原價(jià)是："+ price +";打8折后：" + (price * 0.8));
  } else {
   this.successor.calcPrice( price )
  }
 }
 this.setSuccessor = function( _successor ) {
  this.successor = _successor;
 }
}
function BookCalc7Handler() {
 this.calcPrice = function( price ) {
  if ( price >= 599 ) {
   console.log("原價(jià)是："+ price +";打7折后：" + (price * 0.7));
  } else {
   this.successor.calcPrice( price )
  }
 }
 this.setSuccessor = function( _successor ) {
  this.successor = _successor;
 }
}

客戶端：

var price = 400;
var bookHandler = new BookHandler();
var bookCalc9Handler = new BookCalc9Handler();
var bookCalc8Handler = new BookCalc8Handler();
var bookCalc7Handler = new BookCalc7Handler();
bookHandler.setSuccessor(bookCalc9Handler);
bookCalc9Handler.setSuccessor(bookCalc8Handler);
bookCalc8Handler.setSuccessor(bookCalc7Handler);
bookHandler.calcPrice(price);

Console.log打印出來的效果：