js设计模式——策略模式 -数据天堂

js设计模式——策略模式

# 前端 2024-04-03 04:39 0 13 来源：数据天堂

策略模式是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>