Javascript的策略模式

来源：懂视网责编：小采时间：2020-11-27 20:01:02

Javascript的策略模式

Javascript的策略模式:这次给大家带来Javascript的策略模式，Javascript策略模式的注意事项有哪些，下面就是实战案例，一起来看一下。策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。策略模式利

推荐度：

点击下载本文 文档为doc格式

导读Javascript的策略模式:这次给大家带来Javascript的策略模式，Javascript策略模式的注意事项有哪些，下面就是实战案例，一起来看一下。策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。策略模式利

这次给大家带来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网其它相关文章！

Javascript的策略模式

推荐度：

点击下载本文 文档为doc格式

标签：模式 js javascript

热门焦点

Javascript的策略模式

Javascript的策略模式

Javascript的策略模式

最新推荐

猜你喜欢

热门推荐