快捷導(dǎo)航

JavaScript設(shè)計模式之職責(zé)鏈模式應(yīng)用示例

更新時間：2018年08月07日 10:06:43 作者：咕咚蘿卜

這篇文章主要介紹了JavaScript設(shè)計模式之職責(zé)鏈模式,結(jié)合實(shí)例形式分析了javascript責(zé)任鏈模式的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

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

一、職責(zé)鏈的定義：

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

二、實(shí)例場景說明：

某公司對公司產(chǎn)品-手機(jī)進(jìn)行促銷活動，有以下政策：在正式購買時，已經(jīng)支付過500元定金的用戶會收到100元的商城優(yōu)惠卷，交200元定金的用戶可以收到50元的優(yōu)惠卷，而之前沒有支付定金的用戶只能進(jìn)入普通購買模式，也就是沒有優(yōu)惠卷，主要危險為在庫存有限的情況下不一定能買到手機(jī)。

三、實(shí)例代碼如下：

1、創(chuàng)建3中購買模式的函數(shù)對象，如下：

/**
* @param: orderType 表示訂單類型
* @param: pay 表示用戶是否已經(jīng)支付定金
* @param: stock 表示當(dāng)前用戶普通購買的手機(jī)庫存數(shù)量，交過定金的用戶不受此限制
**/
var order500 = function( orderType, pay, stock ){
  if( orderType === 1 && pay === true)
     console.log('500元定金預(yù)購，得到100優(yōu)惠卷');
  else
     return 'nextSuccessor'; //不知道下一個節(jié)點(diǎn)是誰，反正把請求往后面?zhèn)鬟f
};
var order200 = function( orderType, pay, stock){
  if( orderType === 2 && pay === true)
    console.log( '200元定金預(yù)購，得到50元優(yōu)惠卷' );
  else
    return 'nextSuccessor';
};
var orderNormal = function(orderType, pay, stock){
  if(stock > 0)
    console.log('普通購買，無優(yōu)惠卷');
  else
    console.log('手機(jī)庫存不足');
};

2、書寫一個把函數(shù)包裝進(jìn)職責(zé)鏈節(jié)點(diǎn)的構(gòu)造函數(shù)，如下：

var 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 === 'nextSuccessor'){
    return this.successor && this.successor.passRequest.apply( this,successor, arguments );
  }
   return ret;
};

3、調(diào)用如下：

1> 把3個訂單函數(shù)分別包裝成職責(zé)鏈的節(jié)點(diǎn)：

var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );

2> 指定節(jié)在職責(zé)鏈中的順序：

chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );

3> 把請求傳遞給第一個節(jié)點(diǎn)，如下：

chainOrder500.passRequest( 1, true, 500 ); //輸出：500元定金預(yù)購，得到100優(yōu)惠卷
chainOrder500.passRequest( 2, true, 500 ); //輸出：200元定金預(yù)購，得到50優(yōu)惠卷
chainOrder500.passRequest( 3, true, 500 ); //輸出：普通購買，無優(yōu)惠卷
chainOrder500.passRequest( 1, false, 0 ); //輸出：手機(jī)庫存不足

四、職責(zé)鏈模式優(yōu)點(diǎn)：

通過上述代碼，我們可以靈活的添加和刪除節(jié)點(diǎn)，以及可靈活的修改節(jié)點(diǎn)的順序。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: