JavaScript设计模式——策略模式

时间 2019-11-09

标签 javascript 设计模式策略栏目 JavaScript 繁體版

原文原文链接

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

　　定义：web

定义一系列算法，并将这些算法各自封装成策略类（方法），而后将不变的部分和变化的部分分离开来，而且这些算法能够相互替换算法

　　白话解释：
设计模式

　　　实际上所谓的策略模式就是指根据不一样的策略来执行不一样的方法，是否是很相似与if-else分支判断；可是策略模式是用来解决多重条件判断语句的；app

　　 使用场景：dom

　　　　需求：post

　　　　年终将至，某公司决定提早发年终奖，可是年终奖的计算是有必定的规则的，年终奖的多少跟绩效考核密切相关；因此某公司的年终奖方案是这样的：学习

　　　　绩效考核为S的员工，年终奖是我的月工资的4倍；优化

　　　　绩效考核为A的员工，年终奖是我的月工资的3倍；ui

　　　　绩效考核为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判断等问题，上面的代码注释我已经给的很详细了，学习设计模式必定要去细品代码，学习思路；反正策略模式的一个主要思路就是经过定义一系列的算法，而后传入参数，根据不一样的参数来执行不一样的算法规则；

　　优缺点：

　　　　优势：　　　

　　　　一、利用组合、委托和多态技术和思想，能够避免多重条件选择语句；

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

　　　　三、策略模式能够复用在系统的其余地方，从而避免重复的复制粘贴工做；　　　

　　　　缺点：　　　

　　　　一、程序中会增长许多策略类或者策略对象；

　　　　二、使用策略类必需要对全部的策略类算法了解清楚，不然不知道怎么选择。