js设计模式——策略模式

更新日期: 2019-09-17阅读: 2.4k标签: 模式

策略模式是JavaScript设计模式中行为型的设计模式;

定义:

定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换  


白话解释:

实际上所谓的策略模式就是值根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断;但是策略模式是用来解决多重条件判断语句的;


使用场景:

需求:年终将至,某公司决定提前发年终奖,但是年终奖的计算是有一定的规则的,年终奖的多少跟绩效考核密切相关;所以某公司的年终奖方案是这样的:

绩效考核为S的员工,年终奖是个人月工资的4倍;

绩效考核为A的员工,年终奖是个人月工资的3倍;

绩效考核为B的员工,年终奖是个人月工资的2倍;

看到这里让你开始编写程序,一般大部分的代码是这样的:

    function calculateBonus(level,salary){
        if(level === 'S'){
            return salary*4;
        }
        
        if(level === 'A'){
            return salary*3
        }

        if(level === 'B'){
            return salary*2
        }
    }

    console.log(calculateBonus("S",14000));  //56000
    console.log(calculateBonus("A",10000)); //30000
    console.log(calculateBonus("B",5000));  //10000

上面的代码用来解决当前需求固然没有问题,但是在程序设计的角度来说,上面的代码是还有可以优化的点的;因为该方法相对来说比较庞大,有很多的分支判断,缺乏弹性;如果年终奖方案改了,需要增加一个C方案呢?那是不是又得去方法里面加分支判断呢?这就违反了开放封闭原则;


优化:

    var strategies  = {
        "S":function(salary){
            return salary*4
        },
        "A":function(salary){
            return salary*3;
        },
        "B":function(salary){
            return salary*2
        }
    }

    var calculateBonus =function(level,salary){
        return strategies[level](salary);
    } 
    console.log(calculateBonus("S",14000));  //56000
    console.log(calculateBonus("A",10000));  //30000
    console.log(calculateBonus("B",5000));   //10000

通过优化上述代码之后,上面就是用策略模式来进行改造代码的,我们可以看到我们定义了一个策略对象,然后calculateBonus根据用户传入的等级和工资即可算出年终奖的金额,经过改造之后,代码的结构变得更加简洁;

在web开发中,登录页的注册、登录等功能都是需要进行表单提交的;然而在提交的过程中肯定要进行校验和筛选,不符合校验规则的将不能直接提交;在没有学习设计模式之前我们的校验可能也是跟上面一样都是多重if分支判断,然后我们现在用策略模式来实现一个表单校验:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <form action="http:// xxx.com/register" id="registerForm" method="post">
            请输入用户名:<input type="text" name="userName"/ >
            请输入密码:<input type="text" name="password"/ >
            请输入手机号码:<input type="text" name="phoneNumber"/ >
            <button>提交</button>
        </form>
</body>
<script>
        // 定义策略类算法校验规则
        var strategies = {
        isNonEmpty: function( value, errorMsg ){
            if ( value === '' ){
                return errorMsg;
            }
        },
        minLength: function( value, length, errorMsg ){
            if ( value.length < length ){
                return errorMsg;
            }
        },
        isMobile: function( value, errorMsg ){
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                return errorMsg;
            }
        }
    };
    //Validator 类  
    var Validator = function(){
        // 保存校验规则
        this.cache = [];
    };
    //添加校验规则的方法
    Validator.prototype.add = function( dom, rules ){
        var self = this;
        for ( var i = 0, rule; rule = rules[ i++ ]; ){
            (function( rule ){
                //将校验规则对象中的strategy属性的值进行分割
                var strategyAry = rule.strategy.split( ':' );
                var errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    //将校验规则对象中的strategy属性的第一个值返回装进strategy中
                    var strategy = strategyAry.shift();
                    //组成参数
                    strategyAry.unshift( dom.value );
                    //组装参数
                    strategyAry.push( errorMsg );
                    //找到策略对象执行方法装进cache变量中
                    return strategies[ strategy ].apply( dom, strategyAry );
                });
                console.log(strategyAry);
            })( rule )
        }
    };
    //开始校验方法
    Validator.prototype.start = function(){
        for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
             //循环cache执行方法校验
            var errorMsg = validatorFunc();
            //如果执行策略对象方法中返回了errorMsg,就说明方法已经报错(没有通过校验规则)
            if ( errorMsg ){
                return errorMsg;
            }
        }
    };

    //调用校验
    var registerForm = document.getElementById( 'registerForm' );
    //定义方法可以自定义添加校验规则
    var validataFunc = function(){
        //实例化对象
        var validator = new Validator();
        //自定义添加校验规则
        validator.add( registerForm.userName, [{
            strategy: 'isNonEmpty',
            errorMsg: '用户名不能为空'
        }, {
            strategy: 'minLength:6',
            errorMsg: '用户名长度不能小于10 位'
        }]);
        validator.add( registerForm.password, [{
            strategy: 'minLength:6',
            errorMsg: '密码长度不能小于6 位'
        }]);
        //调用方法循环执行校验
        var errorMsg = validator.start();
        return errorMsg;
    }
    //点击提交按钮(提交事件)
    registerForm.onsubmit = function(){
        //执行上面自定义的校验方法
        var errorMsg = validataFunc();
        //如果errorMsg存在,即代表校验没有通过
        if ( errorMsg ){
            alert ( errorMsg );
            return false;
        }

    };
</script>
</html>

我们可以通过策略模式来解决表单校验大规模重复if-else判断等问题,上面的代码注释我已经给的很详细了,学习设计模式一定要去细品代码,学习思路;反正策略模式的一个主要思路就是通过定义一系列的算法,然后传入参数,根据不同的参数来执行不同的算法规则;

 

优缺点:

 优点:   

1、利用组合、委托和多态技术和思想,可以避免多重条件选择语句;

2、将算法封装在独立的策略类里,使得易于切换,易于理解,易于扩展;

3、策略模式可以复用在系统的其他地方,从而避免重复的复制粘贴工作;   

 缺点:   

1、程序中会增加许多策略类或者策略对象;

2、使用策略类必须要对所有的策略类算法了解清楚,否则不知道怎么选择。


链接: https://www.fly63.com/article/detial/5965

js设计模式之单例模式,javascript如何将一个对象设计成单例

单例模式是我们开发中一个非常典型的设计模式,js单例模式要保证全局只生成唯一实例,提供一个单一的访问入口,单例的对象不同于静态类,我们可以延迟单例对象的初始化,通常这种情况发生在我们需要等待加载创建单例的依赖。

前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式

工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。

JavaScript设计模式_js实现建造者模式

建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象

html和xhtml,DOCTYPE和DTD,标准模式和兼容模式

主要涉及知识点: HTML与XHTML,HTML与XHTML的区别,DOCTYPE与DTD的概念,DTD的分类以及DOCTYPE的声明方式,标准模式(Standard Mode)和兼容模式(Quircks Mode),标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别

前端四种设计模式_JS常见的4种模式

JavaScript中常见的四种设计模式:工厂模式、单例模式、沙箱模式、发布者订阅模式

javascript 策略模式_理解js中的策略模式

javascript 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句,策略模式提供了开放-封闭原则,使代码更容易理解和扩展, 策略模式中的代码可以复用。

javascript观察者模式_深入理解js中的观察者模式

javascript观察者模式又叫发布订阅模式,观察者模式的好处:js观察者模式支持简单的广播通信,自动通知所有已经订阅过的对象。存在一种动态关联,增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

Vue中如何使用方法、计算属性或观察者

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的

我最喜欢的 JavaScript 设计模式

我觉得聊一下我爱用的 JavaScript 设计模式应该很有意思。我是一步一步才定下来的,经过一段时间从各种来源吸收和适应直到达到一个能提供我所需的灵活性的模式。让我给你看看概览,然后再来看它是怎么形成的

Flutter 设计模式 - 简单工厂

在围绕设计模式的话题中,工厂这个词频繁出现,从 简单工厂 模式到 工厂方法 模式,再到 抽象工厂 模式。工厂名称含义是制造产品的工业场所,应用在面向对象中,顺理成章地成为了比较典型的创建型模式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!