视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Javascript的策略模式
2020-11-27 20:01:02 责编:小采
文档


这次给大家带来Javascript的策略模式,Javascript策略模式的注意事项有哪些,下面就是实战案例,一起来看一下。

策略模式是指对一系列的算法定义,并将每一个算法封装起来,而且使它们还可以相互替换。策略模式让算法于使用它的客户而变化。

策略模式利用组合、委托等技术和思想,可以避免很多if条件语句

策略模式提供了开放-封闭原则,使代码更容易理解和拓展

简单取值

很多例子?以绩效等级和薪资计算奖金为?说明

let calculateBouns = (level,salary)=>{ if(level=='A'){ return salary * 1.4;
 }else if(level=='B'){ return salary * 1.3;
 }else if(level=='C'){ return salary * 1.2;
 }else{ return salary;
 }
}console.log(calculateBouns('A', 8000)); //11200console.log(calculateBouns('C', 8000)); //9600

策略模式重构

//策略对象class ruleA{ calculate(salary){ return salary * 1.4; }} class ruleB{ calculate(salary){ return salary * 1.3; }} class ruleC{ calculate(salary){ return salary * 1.2; }} //奖金类class Bouns{ constructor(){ this.salary = null; this.level = null; } setLevel(level){ this.level = level; } setSalary(salary){ this.salary = salary; } getBouns(){ return this.level.calculate(this.salary); }}let tom = new Bouns(),jerry = new Bouns();//设置薪资tom.setSalary(8000);jerry.setSalary(10000);//设置策略对象tom.setLevel(new ruleA());jerry.setLevel(new ruleA());console.log(tom.getBouns()); //11200console.log(jerry.getBouns()); //14000jerry.setLevel(new ruleB());console.log(jerry.getBouns()); //13000

表单

还有一种?理解策略模式的例子就是表单验证,通常会涉及到多个字段有效性判断

let form = document.getElementById("Form");
form.onsubmit = function(){ if(form.username.value == ''){
 alert('用户名不能为空'); return false;
 }else if(form.username.value.length <= 6){
 alert('用户名长度不能小于6位'); return false;
 }else if(form.password.value.length <= 6){
 alert('密码长度不能小于6位'); return false;
 }else if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
 alert("手机号码格式不正确"); return;
 }else{
 submit();
 }
}

这样实现的代码的缺点:

函数体积臃肿,包含了很多if判断

函数缺乏弹性,违反了开放-封闭原则

函数复用性差,如果增加表单需要类似验证,只能复制一遍

策略模式实现表单验证

// 策略对象let strategys = { isEmpty: (value,errorMsg)=> { if(value === '') { return errorMsg;
 }
 }, // 最小长度
 minLength: (value,length,errorMsg)=> { if(value.length < length) { return errorMsg;
 }
 }, // 手机号码格式
 illegalPhone: (value,errorMsg)=> { if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) { return errorMsg;
 }
 } 
};class Validator{ constructor(){ this.cache = []; //保存校验规则
 }
 addRule(dom,rules){ var self = this; for(let i = 0, rule; rule = rules[i++]; ){ let strategyAry = rule.strategy.split(":"); let errorMsg = rule.errorMsg;
 self.cache.push(function(){ let strategy = strategyAry.shift();
 strategyAry.unshift(dom.value);
 strategyAry.push(errorMsg); return strategys[strategy].apply(dom,strategyAry);
 });
 }
 }
 check(){ for(let i = 0, fn; fn = this.cache[i++]; ) { let msg = fn(); // 开始效验 并取得效验后的返回信息
 if(msg) { return msg;
 }
 }
 }
}// 代码调用let form = document.getElementById("Form");let validateFunc = function(){ let validator = new Validator(); // 实例化Validator
 //添加一些校验规则
 validator.addRule(form.username,[
 {strategy: 'isEmpty',errorMsg:'用户名不能为空'},
 {strategy: 'minLength:6',errorMsg:'用户名长度不能小于6位'}
 ]);
 validator.addRule(form.password,[
 {strategy: 'minLength:6',errorMsg:'密码长度不能小于6位'},
 ]);
 validator.addRule(form.phone,[
 {strategy: 'illegalPhone',errorMsg:'手机号格式不正确'},
 ]); return validator.check();
};
form.onsubmit = function(){ let errorMsg = validateFunc(); if(errorMsg){
 alert(errorMsg); return false;
 }else{
 submit();
 }
}

策略模式属于对象行为模式,主要针对一组算法,将每一个算法封装到具有共同接口的的类中,使得它们可以相互替换。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

关于JS继承的详解

node的文件批量重命名

下载本文
显示全文
专题