欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年08月07日 10:06:43   作者:咕咚蘿卜  
這篇文章主要介紹了JavaScript設(shè)計模式之職責(zé)鏈模式,結(jié)合實例形式分析了javascript責(zé)任鏈模式的概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下

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

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

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

二、實例場景說明:

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

三、實例代碼如下:

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

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

2、書寫一個把函數(shù)包裝進職責(zé)鏈節(jié)點的構(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é)點:

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é)點,如下:

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 ); //輸出:手機庫存不足

四、職責(zé)鏈模式優(yōu)點:

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)

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

相關(guān)文章

  • 使用JavaScript修改瀏覽器URL地址欄的實現(xiàn)代碼

    使用JavaScript修改瀏覽器URL地址欄的實現(xiàn)代碼

    這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄,需要的朋友可以參考下
    2013-10-10
  • JavaScript使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信

    JavaScript使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信

    這篇文章主要為大家詳細介紹了JavaScript如何使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-04-04
  • 分享Javascript實用方法二

    分享Javascript實用方法二

    javascript一種直譯式腳本語言,是一種動態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型,本文給大家分享javascript實用方法二,感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • 不得不知的ES6小技巧

    不得不知的ES6小技巧

    ES6出來已經(jīng)有好幾年了,同時很多新特性可以被巧妙地運用在項目中。我想要列下其中一些,希望它們對你有用
    2018-07-07
  • JS實現(xiàn)仿雅虎首頁快捷登錄入口及導(dǎo)航模塊效果

    JS實現(xiàn)仿雅虎首頁快捷登錄入口及導(dǎo)航模塊效果

    這篇文章主要介紹了JS實現(xiàn)仿雅虎首頁快捷登錄入口及導(dǎo)航模塊效果,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷頁面元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • javascript回車完美實現(xiàn)tab切換功能

    javascript回車完美實現(xiàn)tab切換功能

    這篇文章主要介紹了javascript通過回車實現(xiàn)tab切換功能,需要的朋友可以參考下
    2014-03-03
  • JS設(shè)計模式之策略模式概念與用法分析

    JS設(shè)計模式之策略模式概念與用法分析

    這篇文章主要介紹了JS設(shè)計模式之策略模式概念與用法,簡單分析了策略模式的基本概念、原理并結(jié)合實例形式分析了javascript實現(xiàn)與使用策略模式的相關(guān)操作技巧,需要的朋友可以參考下
    2018-02-02
  • HTML5實現(xiàn)微信拍攝上傳照片功能

    HTML5實現(xiàn)微信拍攝上傳照片功能

    這篇文章主要介紹了HTML5實現(xiàn)微信拍攝上傳照片功能,實現(xiàn)HTML5 Canvas手機拍攝,本地壓縮上傳圖片時遇到問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • JS動態(tài)添加option和刪除option(附實例代碼)

    JS動態(tài)添加option和刪除option(附實例代碼)

    option的添加和刪除通過js實現(xiàn)及動態(tài)創(chuàng)建select,本例提供實例的完整代碼,感興趣的朋友可以參考下哈,希望可以幫助到你
    2013-04-04
  • JavaScript中正則表達式的實際應(yīng)用詳解

    JavaScript中正則表達式的實際應(yīng)用詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript中正則表達式實際應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05

最新評論