javascript模板方法模式和职责链模式实例分析

 更新时间:2023年07月12日 08:43:49   作者:flying_huixia  
这篇文章主要介绍了javascript模板方法模式和职责链模式,结合实例形式较为详细的分析了模板方法模式和职责链模式基本原理、实现方法与相关注意事项,需要的朋友可以参考下

一、模板方法模式

1、模板方法模式,基于继承的设计模式,由两部分组成,抽象父类和具体实现子类。

2、例子Coffe 和 Tea

//创建抽象类 -- 饮料
     function Beverage(){}
     Beverage.prototype.boilWater = function(){
         console.log("把水煮沸")
     }
     //抽象的父类方法,具体实现由子类来写
     Beverage.prototype.brew = function(){} //泡
     Beverage.prototype.pourIncup = function(){} //饮料倒进杯子
     Beverage.prototype.addCond = function(){} //加调料
     Beverage.prototype.init = function(){
         this.boilWater();
         this.brew();
         this.pourIncup();
         this.addCond();
     }
     //创建具体子类 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 被称为模板方法的原因是:该方法封装了子类的算法框架,作为算法模板,指导子类以何种顺序去执行方法。

​​抽象方法没有具体的实现过程,是一些哑方法,当子类继承这个抽象类,必须重写父类的抽象方法。

如果子类忘记实现父类中的抽象方法?

Beverage.prototype.brew = function (){
    throw new Error("子类必须重写父类的brew方法")
}

二、职责链模式

1、职责链模式:弱化了发送(请求)-接收者之间的强联系。

2、购物付定金例子

 //旧版 order
        //orderType 预付定金类型,code为1 500元定金 code为2 200元定金 code为3 普通用户
        //pay 是否已经支付过定金
        //stock  当前用于普通购买客户的手机内存数量
        var order = function (orderType, pay, stock) {
            if (orderType === 1) {
                if (pay) {
                    console.log("预付500定金并且已支付,得到100元优惠券")
                } else { //定金未支付,降到普通购买
                    if (stock > 0) {
                        console.log("普通购买,无优惠券")
                    } else {
                        console.log("库存不足");
                    }
                }
            }
            if (orderType === 2) {
                if (pay) {
                    console.log("预付200定金并且已支付,得到50元优惠券")
                } else { //定金未支付,降到普通购买
                    if (stock > 0) {
                        console.log("普通购买,无优惠券")
                    } else {
                        console.log("库存不足");
                    }
                }
            }
            if (orderType === 3) {
                if (stock > 0) {
                    console.log("普通购买,无优惠券")
                } else {
                    console.log("库存不足");
                }
            }
        }
        //重构
        var order500 = function(orderType, pay, stock){
            if(orderType ===1 && pay){
                console.log("预付500定金并且已支付,得到100元优惠券")
            }else{
                order200(orderType, pay, stock)
            }
        }
        var order500 = function(orderType, pay, stock){
            if(orderType ===1 && pay){
                console.log("预付500定金并且已支付,得到100元优惠券")
            }else{
                order200(orderType, pay, stock)
            }
        }
        var order200 = function(orderType, pay, stock){
            if(orderType ===2 && pay){
                console.log("预付200定金并且已支付,得到50元优惠券")
            }else{
                orderNormal(orderType, pay, stock)
            }
        }
        var orderNormal = function(orderType, pay, stock){
            if (stock > 0) {
                    console.log("普通购买,无优惠券")
                } else {
                    console.log("库存不足");
                }
        }

大函数拆分成3个小函数,去掉了许多嵌套的条件分支语句。

但是耦合严重,order500和order200耦合在一起,违反开放-封闭原则;

更多设计模式相关知识点,还可以参考本站文章:

https://www.jb51.net/article/252965.htm

https://www.jb51.net/article/27973.htm

相关文章

  • 详细聊聊对async/await的理解和用法

    详细聊聊对async/await的理解和用法

    随着Nodev7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await,这篇文章主要给大家介绍了关于对async/await的理解和用法,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • JavaScript oncopy事件用法实例解析

    JavaScript oncopy事件用法实例解析

    这篇文章主要介绍了JavaScript oncopy事件用法实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • javascript+css实现俄罗斯方块小游戏

    javascript+css实现俄罗斯方块小游戏

    这篇文章主要为大家详细介绍了javascript+css实现俄罗斯方块小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解js中call与apply关键字的作用

    详解js中call与apply关键字的作用

    本文主要介绍js中call与apply关键字的作用以及它们的用法,具体实例如下,希望对大家有所帮助
    2016-11-11
  • 提供复制本站内容时出现,该文章转自脚本之家等字样的js代码

    提供复制本站内容时出现,该文章转自脚本之家等字样的js代码

    提供复制本站内容时出现,该文章转自脚本之家等字样的js代码...
    2007-03-03
  • 利用JS轻松实现获取表单数据

    利用JS轻松实现获取表单数据

    本文主要介绍了利用JS轻松实现获取表单数据。方法有别于原始的做法,大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下,希望对大家有所帮助
    2016-12-12
  • js提示信息jtip封装代码,可以是图片或文章

    js提示信息jtip封装代码,可以是图片或文章

    今天是相当的困,所以就点比较容易点的东西吧,讲关于鼠标移动后出现提示信息的js代码。能力有限,写得不好尽管提出来。
    2010-01-01
  • JavaScript双问号(??)操作符用法详解

    JavaScript双问号(??)操作符用法详解

    在现代JavaScript开发中,处理变量默认值是一个常见但容易引发bug的操作,很多开发者可能都遇到过这样的问题:使用||设置默认值时,意外覆盖了0、''等合法值,这时候,ES2020引入的双问号操作符(??)就能完美解决这类问题,本文将带您全面掌握这个操作符的使用场景和高级技巧
    2025-04-04
  • 用JavaScript实现让浏览器停止载入页面的方法

    用JavaScript实现让浏览器停止载入页面的方法

    下面小编就为大家带来一篇用JavaScript实现让浏览器停止载入页面的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    JS+html5实现异步上传图片显示上传文件进度条功能示例

    这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
    2019-11-11

最新评论