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 策略模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-21

JavaScript设计模式之策略模式实现原理详解

俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小

javascript设计模式 – 策略模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 策略模式原理与用法.分享给大家供大家参考,具体如下: 介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法.在这里,每一种算法的封装都可以称之为一种策略.策略模式的主要目的是将算法的定义与使用分开. 定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换.策略模式让算法独立与使用它的客户而变化,也称为政策模式.策略模式是一种对象行为型模式. 场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装. 示

JavaScript设计模式之策略模式详解

在程序设计中,我们也常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. /* * pre:策略模式 * 示例:公司计算奖金,分A.B.C 三种绩效,计算方式如下 * 绩效为A,奖金乘以系数5 * 绩效为B,奖金乘以系数4 * 绩效为C,奖金乘以系数3 */ //-------- 示例1 ---------- var calcula

学习JavaScript设计模式之策略模式

把不变的部分和变化的部分隔开是每个设计模式的主题. 条条大路通罗马.我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法.也可以使用gzip算法.其灵活多样,我们可以采用策略模式解决. 一.定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 基于策略类模式的程序至少由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类. 二.示例 计

javascript设计模式--策略模式之输入验证

策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:

javascript设计模式之策略模式学习笔记

1. 理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点: 1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句. 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展. 3. 策略模式中的代码可以复用. 一:使用策略模式计算奖金: 下面的demo是我在书上看到的,但是没有关系,我们只是来理解下策略模式的使用而已,我们可以使用策略模式来计算奖金问题: 比如公司的年终奖是根据

学习JavaScript设计模式(策略模式)

何为策略?比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 1.策略模式的定义 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选择骑自行车. 在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法. 定义:策略模式定义一系列的算法,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 策略模式有着广泛的应用.本

JavaScript设计模式之策略模式实例

策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换. 一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. 复制代码 代码如下: $( div ).animate( {"left: 200px"}, 1000, 'linear' );  //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' );  //三次方的缓动 这2句代码都是让div在1000ms内往右移动

javascript设计模式之策略模式

目录 一. 认识策略模式 二. 具体实现和思想 三. 策略模式的实际运用 四. 总结 一. 认识策略模式 策略模式的定义:定义一系列的算法,将他们一个个封装起来,使他们直接可以相互替换. 策略模式是开发中常用的第二种设计模式,它在开发中非常常见,由两部分组成.第一部分是策略类,封装了许多具体的,相似的算法.第二部分是环境类,接受客户请求,随后将请求委托给策略类.说的通俗一点就是将相同算法的函数存放在一个包装里边,每个函数用相同的方式拿出来,就叫做策略模式.下面我们来通过代码实现深入了解一下. 二

javascript设计模式之Adapter模式【适配器模式】实现方法示例

本文实例讲述了javascript设计模式之Adapter模式.分享给大家供大家参考,具体如下: 所谓Adapter模式就是适配器模式,主要是指使两个原本没有关联的类结合一起使用. JS实现Adapter模式示例如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="json.js"&g

Java经典设计模式之策略模式原理与用法详解

本文实例讲述了Java经典设计模式之策略模式.分享给大家供大家参考,具体如下: 策略模式指:策略模式指将程序中可变部分抽象分离成一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化. 策略模式一般由下面三部分组成: 1. 抽象策略角色: 策略类,通常由一个接口或者抽象类实现. 2. 具体策略角色:包装了相关的算法和行为. 3. 环境角色:持有某一个策略类的引用,客户端调用. 策略模式设计原则: 1. 把程序中需要变化的部分抽离出来,独立于不变

学习JavaScript设计模式之迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. JavaScript中的Array.prototype.forEach 一.jQuery中的迭代器 $.each([1, 2, 3], function(i, n) { console.log("当前下标为:"+ i + " 当前元素为:"+ n ); }); 二.实现自己的迭代器 var each = function(ary, callback) { for(var i

Java设计模式之策略模式_动力节点Java学院整理

定义:定义一组算法,将每个算法都封装起来,并且使他们之间可以互换. 类型:行为类模式 类图: 策略模式是对算法的封装,把一系列的算法分别封装到对应的类中,并且这些类实现相同的接口,相互之间可以替换.在前面说过的行为类模式中,有一种模式也是关注对算法的封装--模版方法模式,对照类图可以看到,策略模式与模版方法模式的区别仅仅是多了一个单独的封装类Context,它与模版方法模式的区别在于:在模版方法模式中,调用算法的主体在抽象的父类中,而在策略模式中,调用算法的主体则是封装到了封装类Context中

JavaScript设计模式之单体模式全面解析

单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚). 单体模式是javascript里面最基本但也是最有用的模式之一. 特点: 1. 可以用来划分命名空间,从而清除全局变量所带来的危险或影响. 2. 利用分支技术来来封装浏览器之间的差异. 3. 可以把代码组织的更为一体,便于阅读和维护. 单体模式的基本写法: /* 最基本的单体模式 */ var her = { name: 'Anna', sex: 'wom