您的位置:首页技术文章
文章详情页

怎样用Javascript实现策略模式

【字号: 日期:2023-10-02 10:40:01浏览:2作者:猪猪
概述

策略模式是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)); //56000console.log(calculateBonus('A',10000)); //30000console.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)); //56000console.log(calculateBonus('A',10000)); //30000console.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' 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、使用策略类必须要对所有的策略类算法了解清楚,否则不知道怎么选择。

以上就是JavaScript策略模式的详细内容,更多关于JavaScript策略模式的资料请关注好吧啦网其它相关文章!

标签: JavaScript
相关文章: