JavaScript設(shè)計(jì)模式之職責(zé)鏈模式應(yīng)用示例
本文實(shí)例講述了JavaScript設(shè)計(jì)模式之職責(zé)鏈模式。分享給大家供大家參考,具體如下:
一、職責(zé)鏈的定義:
使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求,從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系,將這些對(duì)象連成一條鏈,并沿著這條鏈傳遞該請(qǐng)求,直到有一個(gè)對(duì)象處理它為止。
二、實(shí)例場(chǎng)景說(shuō)明:
某公司對(duì)公司產(chǎn)品-手機(jī)進(jìn)行促銷(xiāo)活動(dòng),有以下政策:在正式購(gòu)買(mǎi)時(shí),已經(jīng)支付過(guò)500元定金的用戶(hù)會(huì)收到100元的商城優(yōu)惠卷,交200元定金的用戶(hù)可以收到50元的優(yōu)惠卷,而之前沒(méi)有支付定金的用戶(hù)只能進(jìn)入普通購(gòu)買(mǎi)模式,也就是沒(méi)有優(yōu)惠卷,主要危險(xiǎn)為在庫(kù)存有限的情況下不一定能買(mǎi)到手機(jī)。
三、實(shí)例代碼如下:
1、創(chuàng)建3中購(gòu)買(mǎi)模式的函數(shù)對(duì)象,如下:
/** * @param: orderType 表示訂單類(lèi)型 * @param: pay 表示用戶(hù)是否已經(jīng)支付定金 * @param: stock 表示當(dāng)前用戶(hù)普通購(gòu)買(mǎi)的手機(jī)庫(kù)存數(shù)量,交過(guò)定金的用戶(hù)不受此限制 **/ var order500 = function( orderType, pay, stock ){ if( orderType === 1 && pay === true) console.log('500元定金預(yù)購(gòu),得到100優(yōu)惠卷'); else return 'nextSuccessor'; //不知道下一個(gè)節(jié)點(diǎn)是誰(shuí),反正把請(qǐng)求往后面?zhèn)鬟f }; var order200 = function( orderType, pay, stock){ if( orderType === 2 && pay === true) console.log( '200元定金預(yù)購(gòu),得到50元優(yōu)惠卷' ); else return 'nextSuccessor'; }; var orderNormal = function(orderType, pay, stock){ if(stock > 0) console.log('普通購(gòu)買(mǎi),無(wú)優(yōu)惠卷'); else console.log('手機(jī)庫(kù)存不足'); };
2、書(shū)寫(xiě)一個(gè)把函數(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個(gè)訂單函數(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> 把請(qǐng)求傳遞給第一個(gè)節(jié)點(diǎn),如下:
chainOrder500.passRequest( 1, true, 500 ); //輸出:500元定金預(yù)購(gòu),得到100優(yōu)惠卷 chainOrder500.passRequest( 2, true, 500 ); //輸出:200元定金預(yù)購(gòu),得到50優(yōu)惠卷 chainOrder500.passRequest( 3, true, 500 ); //輸出:普通購(gòu)買(mǎi),無(wú)優(yōu)惠卷 chainOrder500.passRequest( 1, false, 0 ); //輸出:手機(jī)庫(kù)存不足
四、職責(zé)鏈模式優(yōu)點(diǎn):
通過(guò)上述代碼,我們可以靈活的添加和刪除節(jié)點(diǎn),以及可靈活的修改節(jié)點(diǎn)的順序。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄,需要的朋友可以參考下2013-10-10JavaScript使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09javascript回車(chē)完美實(shí)現(xiàn)tab切換功能
這篇文章主要介紹了javascript通過(guò)回車(chē)實(shí)現(xiàn)tab切換功能,需要的朋友可以參考下2014-03-03JS動(dòng)態(tài)添加option和刪除option(附實(shí)例代碼)
option的添加和刪除通過(guò)js實(shí)現(xiàn)及動(dòng)態(tài)創(chuàng)建select,本例提供實(shí)例的完整代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04JavaScript中正則表達(dá)式的實(shí)際應(yīng)用詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中正則表達(dá)式實(shí)際應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05