《JavaScript设计模式与开发实践》读书笔记之策略模式
2015-07-16 15:45
603 查看
1.策略模式
定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换1.1 传统实现
根据工资基数和年底绩效来发送年终奖var calculateBonus= function (performanceLevel,salary) { if(performanceLevel === 'S'){ return salary * 4; } if(performanceLevel === 'A'){ return salary * 3; } if(performanceLevel === 'B'){ return salary * 2; } }; calculateBonus('B',20000);//输出40000 calculateBonus('S',6000);//输出24000
calculateBonus()函数包含了很多if-else语句,这些语句需要覆盖所有分支
calculateBonus()函数缺乏扩展性,如果新增一个绩效等级C,必须修改calculateBonus()函数内部实习,违反开发-封闭原则
1.2 使用策略模式重构代码
传统面向对象模式的策略模式var performanceS= function () {}; performanceS().prototype.calculate= function (salary) { return salary *4; }; var performanceA=function(){}; performanceA().prototype.calculate=function(salary){ return salary * 3; }; var Bonus= function () { this.salary=null; this.strategy=null; }; Bonus.prototype.setSalary= function (salary) { this.salary=salary; }; Bonus.prototype.setStrategy=function(strategy){ this.strategy=strategy; }; Bonus.prototype.getBonus= function () { return this.strategy.calculate(this.salary); }; var bonus=new Bonus(); bonus.setSalary(1000); bonus.setStrategy(new performanceS()); console.log(bonus.getBonus()());//输出40000
1.3 JavaScript版本的策略模式
var strategies={ "S": function (salary) { return salary*4; }, "A": function (salary) { return salary*3; }, "B": function (salary) { return salary*2; } }; //calculateBonus充当Context来接受用户请求 var calculateBonus= function (level,salary) { return strategies[level](salary); }; console.log(calculateBonus('S',2000));//输出8000
1.4 用策略模式来重构表单校验
校验规则用户名不能为空
密码长度不能少于6位
手机号码必须符合格式
var strategise={ isNonEmpty:function(value,errorMsg){ 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; } } };
Validateor类作为Context,负责接收用户请求,并委托给strategy对象
var validataFunc= function () { var validator=new Validator(); //添加校验规则 validator.add(form.userName,'isNonEmpty','用户名不能为空'); validator.add(form.password,'minLength:6','密码长度不能少于6位'); validator.add(form.phoneNumber,'isMobile','手机号码格式不正确'); var errorMsg=validator.start(); return errorMsg; }; var form =document.getElementById('form'); form.onsubmit= function () { var errorMsg=validataFunc(); if(errorMsg){ alert(errorMsg); return false; } }; var Validator= function () { this.cache=[]; }; Validator.prototype.add= function (dom,rule,errorMsg) { var ary=rule.split(':');//把strategy算法和参数分开 this.cache.push(function () { var strategy=ary.shift(); ary.unshift(dom.value); ary.push(errorMsg); return strategies[strategy].apply(dom,ary); }); }; Validator.prototype.start= function () { for(var i= 0,validatorFunc;validatorFunc=this.cache[i++];){ var msg=validatorFunc(); if(msg){ return msg; } } };
使用策略模式,可以通过配置方式完成表单校验
相关文章推荐
- AJAX样例及返回值json解析
- geekpark.js
- c# json 解析
- js金额转换三位加上逗号分隔保留小数
- JS高级程序设计8-BOM
- JavaScript (二)
- JSTL标签
- [转]JavaScript的实例化与继承:请停止使用new关键字
- javascript操作window对象
- js当前页面刷新并且清空文本内容的方法
- javascript Date format(js日期格式化)
- js图片轮播
- 如何通过按钮触发事件由一个jsp页面转到另一个jsp页面
- angular json转义html
- 《JavaScript设计模式与开发实践》读书笔记之单例模式
- scala 解析json字符串
- JavaScript typeof, null, 和 undefined
- JSON的parse()和stringfy()方法
- JSTL标准
- jsp和servlet基础1