前端须知——行为型模式——策略模式

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

白话解释

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

详解

例子

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

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

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

  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>Documenttitle>
head>

<body>
    <form id="registerForm">
        请输入用户名:<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);
                });
            })(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: '用户名长度不能小于6位'
        }]);

        validator.add(registerForm.password, [{
       
            strategy: 'minLength:6',
            errorMsg: '密码长度不能小于6 位'
        }]);

        validator.add(registerForm.phoneNumber, [{
       
            strategy: 'isNonEmpty',
            errorMsg: '手机号码不能为空'
        }, {
       
            strategy: 'isMobile',
            errorMsg: '请输入正确的手机号'
        }]);
        //调用方法循环执行校验
        var errorMsg = validator.start();
        return errorMsg;
    };
    //点击提交按钮(提交事件)
    registerForm.onsubmit = function(e) {
       
        //执行上面自定义的校验方法
        var errorMsg = validataFunc();
        //如果errorMsg存在,即代表校验没有通过
        console.log(errorMsg);
        if (errorMsg) {
       
            alert(errorMsg);
            return false;
        }
    };
script>

html>

我们可以通过策略模式来解决表单校验大规模重复if-else判断等问题。

总结

策略模式的一个主要思路就是通过定义一系列的算法,然后传入参数,根据不同的参数来执行不同的算法规则;

业务复杂达到一定程度了我们才选用设计模式去解决复杂的问题,扩展性 复用性,冗余度,小的情况没必要使用

优缺点

优点:

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

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

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

  4. 在策略模式中利用组合和委托来让Context拥有执行算法的能力,这也是继承的一种更轻便的替代方案。

缺点:

  1. 程序中会增加许多策略类或者策略对象;
  2. 使用策略类必须要对所有的策略类算法了解清楚,否则不知道怎么选择。

你可能感兴趣的:(#,前端——设计模式,策略模式,前端,javascript)