这次给大家带来javascript的策略模式，javascript策略模式的注意事项有哪些，下面就是实战案例，一起来看一下。
策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。
策略模式利用组合、委托等技术和思想，可以避免很多if条件语句
策略模式提供了开放-封闭原则，使代码更容易理解和拓展
简单取值
立即学习“Java免费学习笔记（深入）”；
很多例子�以绩效等级和薪资计算奖金为�说明
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 这样实现的代码的缺点：
函数体积臃肿，包含了很多if判断
函数缺乏弹性，违反了开放-封闭原则
函数复用性差，如果增加表单需要类似验证，只能复制一遍
策略模式实现表单验证
// 策略对象let strategys = { isEmpty: (value,errorMsg)=> { if(value === '') { return errorMsg; } }, // 限制最小长度 minLength: (value,length,errorMsg)=> { if(value.length { 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(); }}
登录后复制
策略模式属于对象行为模式，主要针对一组算法，将每一个算法封装到具有共同接口的独立的类中，使得它们可以相互替换。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
关于JS继承的详解
node的文件批量重命名
以上就是Javascript的策略模式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783196.html
