JavaScript设计模式策略模式案例分享

 更新时间:2022年06月23日 14:29:52   作者:​ 前端若水   ​  
这篇文章主要介绍了JavaScript设计模式策略模式案例分享,策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案

前言

策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案

比如我们去买书,书店都会搞一些优惠活动,满100减20,满200减50,八折优惠这些,但是优惠活动源源不止这些,后期会陆续添加优惠活动,比如双11活动打七折,等到双11活动过去之后打七折活动还需要取消

我们先不用策略设计模式进行实现计算折扣后价格,我们声明一个方法,里面接受俩个参数,这俩个参数一个是价格一个是折扣种类,然后在方法里面使用if语句判断折扣种类计算价格,如果没有折扣就是原价,最后把计算过的折扣价格返回出去

//price 价格 
//type 折扣种类
 function calcPrice(price, type) {
            if (type == '100_20') {
                price -= 20
            } else if (type == '200_50') {
                price -= 50
            }
            return price;

        }
        // 使用
        const bookPrice = calcPrice(300, '100_20')

这种方式如果是折扣活动比较少的情况下还行,但是每次添加新的折扣活动都需要去往方法里面添加折扣活动的if语句判断以及记住新折扣种类的字段以免和之前的折扣活动名字重复,对于折扣活动到期的情况还需要手动进行删除该if语句,长此以往代码不仅冗余还很维护

使用策略设计模式实现:

我们声明一个闭包函数,闭包函数中有一个折扣种类中心,里面有默认的几个折扣种类,还有一个计算折扣价格的方法,方法上我们又给他定义了俩个方法,一个是添加折扣种类方法,一个是删除折扣种类方法,然后在把计算折扣方法暴露出去就可以了

//计算折扣价格闭包函数
        const calcPrice = (function() {
            // 折扣种类中心
            const sale = {
           //100-20折扣活动
                    '100_20': function(price) {
                        return price -= 20
                    },
                    //200-50折扣活动
                    '200_50': function(price) {
                        return price -= 50
                    },
                    //打八折折扣活动
                    '80%': function(price) {
                        return price *= 0.8
                    },
                }
     
               /** *
               * 计算折扣价格
               * price 价格 
               * type 折扣类型
               * **/
            function totalPrice(price, type) {
                // 判断折扣种类里面是否拥有这个折扣类型,如果有就执行,没有就返回原价
                if (sale[type]) {
                    // 使用折扣函数
                    price = sale[type](price)
                }
                // 返回价格
                return price
            }
            /**
             * 
             *  添加折扣方法
             *  type  折扣类型
             * callback 折扣类型方法
             * **/
            totalPrice.add = function(type, callback) {
                    // 判断折扣类型是否存在
                    if (sale[type]) return '折扣已存在'
                    //给折扣类型中心添加折扣价格方法
                    sale[type] = callback
                    return '折扣方法添加成功'
                }
                // 删除折扣方法
                totalPrice.del(type){
                //通过delete关键字删除折扣类型中心方法
                   delete   sale[type] 
                }
             // 被return出去的函数,才是计算价格的本体
            return totalPrice
        })();
        //使用计算价格
        const bookPrice = calcPrice(240, '200_50');
       //添加打七折折扣类型方法
       calcPrice.add('70%',function(price) {return price *= 0.7 })
       //删除打八折折扣类型方法
        calcPrice.add('80%')

策略设计模式拥有易于维护,易于理解,易于扩展的特点

到此这篇关于JavaScript设计模式策略模式案例分享的文章就介绍到这了,更多相关JavaScript 策略模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 奉献给JavaScript初学者的编写开发的七个细节

    奉献给JavaScript初学者的编写开发的七个细节

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
    2011-01-01
  • ES6知识点整理之数组解构和字符串解构的应用示例

    ES6知识点整理之数组解构和字符串解构的应用示例

    这篇文章主要介绍了ES6知识点整理之数组解构和字符串解构的应用,结合实例形式分析了ES6数组解构和字符串解构的实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-04-04
  • javascript解决IE6下hover问题的方法

    javascript解决IE6下hover问题的方法

    本文分享了一个小技巧:javascript解决IE6下hover问题的方法,方法很实用,需要了解的朋友可以参考下
    2015-07-07
  • 复制小说文本时出现的随机乱码的去除方法

    复制小说文本时出现的随机乱码的去除方法

    想把小说复制下来慢慢看,却发现复制到记事本里出现一大堆乱七八糟的东西,很是不爽。于是就想了个简单的办法把它干掉了。
    2010-09-09
  • JS通过识别id、value值对checkbox设置选中状态

    JS通过识别id、value值对checkbox设置选中状态

    最开始需要获取的是input value值设置checkbox选中状态,由于input value要使用计算业务,后来改造为id,这里就为大家分享一下实现代码,需要的朋友可以参考下
    2020-02-02
  • 前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    这篇文章主要介绍了前端开发中常用的防抖(Debounce)和节流(Throttle)技术的相关资料,文章还提供了JavaScript的防抖和节流实现示例,并展示了如何在实际项目中结合使用这两种技术以达到最佳效果,需要的朋友可以参考下
    2025-01-01
  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画性能好

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销,这篇文章给大家详细介绍使用requestAnimationFrame实现js动画
    2015-08-08
  • 对于JavaScript继承你到底了解多少

    对于JavaScript继承你到底了解多少

    js的继承机制不同于传统的面向对象语言,采用原型链实现继承,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法,下面这篇文章主要给大家介绍了关于JS继承的相关资料,需要的朋友可以参考下
    2021-09-09
  • JavaScript使用setInterval()函数实现简单轮询操作的方法

    JavaScript使用setInterval()函数实现简单轮询操作的方法

    这篇文章主要介绍了JavaScript使用setInterval()函数实现简单轮询操作的方法,以实例形式分析了轮询操作的原理与javascript实现技巧,需要的朋友可以参考下
    2015-02-02
  • Bootstrap~多级导航(级联导航)的实现效果【附代码】

    Bootstrap~多级导航(级联导航)的实现效果【附代码】

    下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-03-03

最新评论