设计模式之-策略模式

策略模式定义：

策略模式定义了一系列的算法，并且会将每一个算法封装起来，让它们可以相互的替换。

策略模式的组成：

一个基于策略模式的程序至少由两部分组成，第一部分是一组策略类，策略类封装了具体的算法，并负责具体计算过程，第二个部分是环境类Context,Context接受客户的请求，随后把请求委托给某一个策略类，说明Context中要维护对某个策略对象的引用

// 策略接口interfaceIStrategy{execute(a:number,b:number):number;}// 定义具体的策略类// 这里定义了四个具体的策略类，分别是加法、减法、乘法和除法classAddStrategyimplementsIStrategy{execute(a:number,b:number):number{returna+b;}}classSubStrategyimplementsIStrategy{execute(a:number,b:number):number{returna-b;}}classMulStrategyimplementsIStrategy{execute(a:number,b:number):number{returna*b;}}classDivStrategyimplementsIStrategy{execute(a:number,b:number):number{returna/b;}}// 上下文内部维护了具体的策略的引用// 回头客户端调用的时候，只需要调用上下文的方法即可classContext{// 维护具体的策略privatestrategy:IStrategy;constructor(st:IStrategy){this.strategy=st;}// 设置新的策略setStrategy(st:IStrategy){this.strategy=st;}//执行策略方法executeStrategy(a:number,b:number):number{returnthis.strategy.execute(a,b);}}// 创建一个上下文对象// 在创建的时候，传递一个默认的执行策略constcontext=newContext(newAddStrategy());// 执行对应的策略consta=5;constb=3;constresult=context.executeStrategy(a,b);context.setStrategy(newSubStrategy())constresult2=context.executeStrategy(a,b);context.setStrategy(newMulStrategy());constresult3=context.executeStrategy(a,b);console.log(result);console.log(result2);console.log(result3);

再来看一个表单的例子

<formid="registerForm"action="#">请输入用户名：<inputtype="text"name="username"/>请输入密码：<inputtype="text"name="password"/>请输入手机号：<inputtype="text"name="phoneNumber"/><buttonid="button">提交</button></form><script>varregisterForm=document.getElementById('registerForm');varbutton=document.getElementById('button');button.onclick=function(){if(registerForm.username.value===''){console.log('用户名不能为空');returnfalse}if(registerForm.password.value.length<6){console.log('密码长度不能少于6位');returnfalse}if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)){console.log('手机号码格式不正确');returnfalse}}</script>

这是一种很常见的做法，提交函数比较庞大，缺少弹性，违反开放-封闭原则
下面用策略模式来重构表单校验

varstrategies={isNonEmpty:function(value,errorMsg){// 不为空if(value===''){returnerrorMsg;}},minLength:function(value,length,errorMsg){// 限制最小长度if(value.length<length){returnerrorMsg;}},isMobile:function(value,errorMsg){// 手机号码格式if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){returnerrorMsg;}}}varvalidataFunc=function(){varvalidator=newValidator();// 创建一个validator对象// 添加一些校验规则validator.add(registerForm.username,'isNonEmpty','用户名不能为空');validator.add(registerForm.password,'minLength:6','密码长度不能少于6位');validator.add(registerForm.phoneNumber,'isMobile','手机号码格式不正确');varerrorMsg=validator.start();// 获得校验结果returnerrorMsg;// 返回校验结果}varregisterForm=document.getElementById('registerForm');varbutton=document.getElementById('button');button.onclick=function(e){e.preventDefault();varerrorMsg=validataFunc();// 如果有返回值，说明未通过校验if(errorMsg){console.log(errorMsg);returnfalse;}}varValidator=function(){this.cache=[];// 保存校验规则}Validator.prototype.add=function(dom,rule,erroeMsg){vararg=rule.split(':');// 把strategy和参数分开this.cache.push(function(){// 把校验的步骤用空函数包装起来，并且放入cachevarstrategy=arg.shift();// 用户挑选的strategyarg.unshift(dom.value);arg.push(erroeMsg);returnstrategies[strategy].apply(dom,arg);})}Validator.prototype.start=function(){for(leti=0,validataFunc;validataFunc=this.cache[i++];){varmsg=validataFunc();// 开始校验，并取得校验后返回信息if(msg){// 有返回值，说明校验没有通过returnmsg;}}}

非原创，来源渡一谢杰老师和javascript设计模式与开发实践 -曾探 简单记录，周五啦，周末愉快