這次帶給大家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(); } }
策略模式屬於物件行為模式,主要針對一組演算法,將每一個演算法封裝到具有共同介面的獨立的類別中,使得它們可以相互替換。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Javascript的策略模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!