javascript设计模式学习之五——策略模式
一、策略模式定义：
定义一些列的算法/规则，将它们封装起来，使得它们可以互相替换/组合使用。其目的在于将算法/规则封装起来，将算法/规则的使用与实现分离出来。
通过策略模式，可以减少算法计算过程中大量的if-else分支，并提高复用性。
一个策略模式的程序至少由两部分组成，一个是一组策略类，策略类封装了具体算法，并负责具体的实现过程；第二个部分是环境类context,context接受客户的请求，随后将请求委托给具体的某一个策略类。context中需要有一个变量来保存对对象的引用。
二、java中的策略模式：
考虑以下应用场景，大部分公司都会根据绩效发放年终奖，假设说如果绩效为A的话，年终奖发放5倍月薪；如果绩效为B的话，年终奖发放4倍月薪。按照一般的思路，计算函数中可能包含如下的分支语句，if （绩效为A） else if(绩效为B){};如果新增了一个C绩效，则需要进入计算函数的内部进行修改，因此考虑将算法的实现与算法的使用相分离。
为了实现多态，需要定义对应的接口或者抽象类：
package com.bobo.shejimoshi; public abstract class Performance { public abstract int calBonus(int salary); }
绩效A类：
package com.bobo.shejimoshi; public class PerformanceA extends Performance{ @Override public int calBonus(int salary) { // TODO Auto-generated method stub return salary*4; } }
绩效B类：
package com.bobo.shejimoshi; public class PerformanceB extends Performance{ @Override public int calBonus(int salary) { // TODO Auto-generated method stub return salary*5; } }
实现context类：
package com.bobo.shejimoshi; public class Bonus { private Performance perfo; private int salary; public void setPerfo(Performance perfo) { this.perfo = perfo; } public void setSalary(int salary) { this.salary = salary; } public int getBonus(int salary){ return this.perfo.calBonus(salary); } }
调用方法如下：
package com.bobo.shejimoshi; public class Test { public static void main(String[] args) { Bonus bonus = new Bonus(); bonus.setPerfo(new PerformanceA()); System.out.println(bonus.getBonus(1000));//输出4000 bonus.setPerfo(new PerformanceB()); System.out.println(bonus.getBonus(1000));//输出5000 } }
三、javascript中的策略模式
在javascript中，函数也是对象，因此完全不必要使用策略类，将其直接定义为函数即可。对策略的引用可以像java中通过context类的一个属性来保存其引用，可以通过函数参数来进行传递。
//策略模式 //策略实现 var strategies={ 'S':function(salary){ return salary*4; }, 'A':function(salary){ return salary*3; }, 'B':function(salary){ return salary*2; } }; //context实现 var calBonus=function(leval,salary){ return strategies[leval].call(this,salary); }; console.log(calBonus('S',2000)); console.log(calBonus('A',2000));
三、案例
1）jquery中的动画类，其各种缓动动画，也是策略模式的具体实现；
2）如果认为策略模式就是用来封装算法的，那未免太狭隘了，事实上，广义的算法也可以是一系列的“业务规则”，只要这些业务规则指向的目标一致，就可以被替换，甚至可以被组合使用。如下面封装的一个表单验证插件。
//使用策略模式来实现表单验证 var strategies = { 'isNonEmpty': function(value, errorMsg) { if (value == '') { return errorMsg; } }, 'minLength': function(value, length, errorMsg) { if (value.length < length) { return errorMsg; } }, }; function Validate() { this.cache = []; } Validate.prototype.add = function(dom, rules) { var self = this; for (var i = 0; i < rules.length; i++) { var curRule = rules[i]; (function(curRule) { var argsAry = curRule['strategy'].split(':'); var errorMsg = curRule['errorMsg']; self.cache.push(function() { var strategy = argsAry.shift(); argsAry.unshift(dom.value); argsAry.push(errorMsg); return strategies[strategy].apply(dom, argsAry); }); })(curRule); } }; Validate.prototype.start = function() { for (var i = 0; i < this.cache.length; i++) { var func = this.cache[i]; var errorMsg = func(); if (errorMsg) { return errorMsg; } } }; var testForm = document.getElementById("testForm"); function validateForm() { var validate = new Validate(); validate.add(testForm.username, [{ 'strategy': 'isNonEmpty', 'errorMsg': '该字段不能为空!' }]); validate.add(testForm.password, [{ 'strategy': 'minLength:3', 'errorMsg': '输入长度不能小于3' }]); console.log(validate.cache); var errorMsg = validate.start(); return errorMsg; } testForm.onsubmit = function() { var errorMsg = validateForm(); if (errorMsg) { console.log(errorMsg); return false; } };
如果采用《你不知道的javascript》中推崇的基于委托的写法，那么实现的代码如下：
//基于委托的表单验证组件的实现 //在编写组件之前，首先了解用户是如何使用组件的，总的来说，有两个API //.add(registerForm.password,[{strategy:'minLength:6',errorMsg:'长度不能小于6'},{strategy:'isNonEmpty',errorMsg:'输入不能为空'}],'长度不能小于6位')；添加校验规则 //.start()启动校验，返回错误信息 var strategies={ isNonEmpty:function(value,errorMsg){ console.log(arguments); 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; } } }; var validator={ //不是函数，内部不能定义变量 //var cache=[], init:function(){ this.cache=[]; }, add:function(elem,rules){ var i,len,self=this; for(i=0,len=rules.length;i<len;i++){ (function(i){ self.cache.push(function(){ //这是个闭包 var curRule=rules[i], strategyAry=curRule.strategy.split(':'), errorMsg=curRule.errorMsg, strategy=strategyAry.shift(); strategyAry.push(errorMsg); strategyAry.unshift(elem.value); //console.log(strategy); return strategies[strategy].apply(elem,strategyAry); }); })(i); } }, start:function(){ var i,len,errorMsg; for(i=0,len=this.cache.length;i<len;i++){ if((errorMsg=this.cache[i]())!==undefined){ return errorMsg; } } } }; //测试 var form=document.forms['login']; var myValid=Object.create(validator); myValid.init(); myValid.add(form.name,[{strategy:'isNonEmpty',errorMsg:'字段不能为空'},{strategy:'minLength:3',errorMsg:'长度不能小于3'}]); console.log(myValid.start());
