文章詳情頁
javascript模板方法模式和職責鏈模式實例分析
瀏覽:17日期:2022-06-13 09:08:18
一、模板方法模式
1、模板方法模式,基于繼承的設(shè)計模式,由兩部分組成,抽象父類和具體實現(xiàn)子類。
2、例子Coffe 和 Tea
//創(chuàng)建抽象類 -- 飲料 function Beverage(){} Beverage.prototype.boilWater = function(){ console.log('把水煮沸') } //抽象的父類方法,具體實現(xiàn)由子類來寫 Beverage.prototype.brew = function(){} //泡 Beverage.prototype.pourIncup = function(){} //飲料倒進杯子 Beverage.prototype.addCond = function(){} //加調(diào)料 Beverage.prototype.init = function(){ this.boilWater(); this.brew(); this.pourIncup(); this.addCond(); } //創(chuàng)建具體子類 coffee and tea var Coffee = function (){}; Coffee.prototype = new Beverage(); Coffee.prototype.brew = function (){ console.log('用沸水沖泡咖啡') } Coffee.prototype.brew = function (){ console.log('把咖啡倒進杯子') } Coffee.prototype.brew = function (){ console.log('加糖和牛奶') } var coffee = new Coffee(); coffee.init(); var Tea = function(){}; Tea.prototype = new Beverage(); Tea.prototype.brew = function (){ console.log('用沸水沖泡茶') } Tea.prototype.brew = function (){ console.log('茶倒進杯子') } Tea.prototype.brew = function (){ console.log('加檸檬') } var tea= new Tea(); tea.init();Beverage.prototype.init 被稱為模板方法的原因是:該方法封裝了子類的算法框架,作為算法模板,指導(dǎo)子類以何種順序去執(zhí)行方法。
??抽象方法沒有具體的實現(xiàn)過程,是一些啞方法,當子類繼承這個抽象類,必須重寫父類的抽象方法。
如果子類忘記實現(xiàn)父類中的抽象方法?
Beverage.prototype.brew = function (){ throw new Error('子類必須重寫父類的brew方法')}二、職責鏈模式1、職責鏈模式:弱化了發(fā)送(請求)-接收者之間的強聯(lián)系。

2、購物付定金例子
//舊版 order//orderType 預(yù)付定金類型,code為1 500元定金 code為2 200元定金 code為3 普通用戶//pay 是否已經(jīng)支付過定金//stock 當前用于普通購買客戶的手機內(nèi)存數(shù)量var order = function (orderType, pay, stock) { if (orderType === 1) {if (pay) { console.log('預(yù)付500定金并且已支付,得到100元優(yōu)惠券')} else { //定金未支付,降到普通購買 if (stock > 0) {console.log('普通購買,無優(yōu)惠券') } else {console.log('庫存不足'); }} } if (orderType === 2) {if (pay) { console.log('預(yù)付200定金并且已支付,得到50元優(yōu)惠券')} else { //定金未支付,降到普通購買 if (stock > 0) {console.log('普通購買,無優(yōu)惠券') } else {console.log('庫存不足'); }} } if (orderType === 3) {if (stock > 0) { console.log('普通購買,無優(yōu)惠券')} else { console.log('庫存不足');} }}//重構(gòu)var order500 = function(orderType, pay, stock){ if(orderType ===1 && pay){console.log('預(yù)付500定金并且已支付,得到100元優(yōu)惠券') }else{order200(orderType, pay, stock) }}var order500 = function(orderType, pay, stock){ if(orderType ===1 && pay){console.log('預(yù)付500定金并且已支付,得到100元優(yōu)惠券') }else{order200(orderType, pay, stock) }}var order200 = function(orderType, pay, stock){ if(orderType ===2 && pay){console.log('預(yù)付200定金并且已支付,得到50元優(yōu)惠券') }else{orderNormal(orderType, pay, stock) }}var orderNormal = function(orderType, pay, stock){ if (stock > 0) { console.log('普通購買,無優(yōu)惠券')} else { console.log('庫存不足');}}大函數(shù)拆分成3個小函數(shù),去掉了許多嵌套的條件分支語句。
但是耦合嚴重,order500和order200耦合在一起,違反開放-封閉原則;
更多設(shè)計模式相關(guān)知識點,還可以參考本站文章:
https://www.jb51.net/article/252965.htm
https://www.jb51.net/article/27973.htm
標簽:
JavaScript
相關(guān)文章:
1. 使用讓 JavaScript 安全且并發(fā)的 Web Workers2. 來自1000多個項目的10大JavaScript錯誤淺析3. 原生JavaScript實現(xiàn)彈幕組件的示例代碼4. 一文帶你搞懂JavaScript中轉(zhuǎn)義字符的使用5. 關(guān)于JavaScript對象類型之Array及Object6. 一篇文章帶你了解JavaScript-對象7. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁8. JavaScript多級判定代碼優(yōu)化淺析9. JavaScript WeakMap使用詳解10. Javascript的獨特的概念之閉包
排行榜

網(wǎng)公網(wǎng)安備