javascript模板方法模式和職責鏈模式實例分析

更新時間：2023年07月12日 08:43:49 作者：flying_huixia

這篇文章主要介紹了javascript模板方法模式和職責鏈模式,結(jié)合實例形式較為詳細的分析了模板方法模式和職責鏈模式基本原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下

一、模板方法模式

1、模板方法模式，基于繼承的設計模式，由兩部分組成，抽象父類和具體實現(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 被稱為模板方法的原因是：該方法封裝了子類的算法框架，作為算法模板，指導子類以何種順序去執(zhí)行方法。

??抽象方法沒有具體的實現(xiàn)過程，是一些啞方法，當子類繼承這個抽象類，必須重寫父類的抽象方法。

如果子類忘記實現(xiàn)父類中的抽象方法？

Beverage.prototype.brew = function (){
    throw new Error("子類必須重寫父類的brew方法")
}

二、職責鏈模式

1、職責鏈模式：弱化了發(fā)送（請求）-接收者之間的強聯(lián)系。

2、購物付定金例子

 //舊版 order
        //orderType 預付定金類型，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("預付500定金并且已支付，得到100元優(yōu)惠券")
                } else { //定金未支付，降到普通購買
                    if (stock > 0) {
                        console.log("普通購買，無優(yōu)惠券")
                    } else {
                        console.log("庫存不足");
                    }
                }
            }
            if (orderType === 2) {
                if (pay) {
                    console.log("預付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("預付500定金并且已支付，得到100元優(yōu)惠券")
            }else{
                order200(orderType, pay, stock)
            }
        }
        var order500 = function(orderType, pay, stock){
            if(orderType ===1 && pay){
                console.log("預付500定金并且已支付，得到100元優(yōu)惠券")
            }else{
                order200(orderType, pay, stock)
            }
        }
        var order200 = function(orderType, pay, stock){
            if(orderType ===2 && pay){
                console.log("預付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耦合在一起，違反開放-封閉原則；

更多設計模式相關(guān)知識點，還可以參考本站文章：

http://m.fzitv.net/article/252965.htm

http://m.fzitv.net/article/27973.htm

您可能感興趣的文章: