JavaScript设计模式与开发实践---读书笔记 策略模式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript设计模式与开发实践---读书笔记 策略模式相关的知识,希望对你有一定的参考价值。
策略模式的定义是:定义一系列的算法,把它们一个个封转起来,并且使它们可以相互替换。
javascript版本的策略模式:
奖金系统:
var strategies = { "S": function(salary){ return salary*4; }, "A": function(salary){ return salary*3; }, "B": function(salary){ return salary*2; } }; var calculateBonus = function(level,salary){ return strategies[level](salary); }; console.log(calculateBonus(‘S‘,20000));//输出:80000 console.log(calculateBonus(‘A‘,10000));//输出:30000
使用策略模式实现缓动动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球运动策略模式</title> <style> #div{ position: absolute; background: blue; width:50px; height: 50px; } </style> </head> <body> <div id="div">我是小球</div> </body> </html> <script> var tween = { linear: function(t,b,c,d){ return c*t/d+b; }, easeIn: function(t,b,c,d){ return c*(t/=d)*t+b; }, strongEaseIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t+b; }, strongEaseOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t+1)+b; }, sineaseIn: function(t,b,c,d){ return c*(t/=d)*t*t+b; }, sineaseOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t+1)+b; } }; var Animate = function(dom){ this.dom = dom;//进行运动的dom节点 this.startTime = 0;//动画开始时间 this.startPos = 0; this.endPos = 0; this.propertyName = null; this.easing = null; this.duration = null; }; Animate.prototype.start = function(propertyName,endPos,duration,easing){ //启动这个动画 this.startTime = +new Date; this.startPos = this.dom.getBoundingClientRect()[propertyName];//dom初始节点位置 this.propertyName = propertyName;//dom节点需要被改变的CSS属性名 this.endPos = endPos;//dom节点目标位置 this.duration = duration;//动画持续事件 this.easing = tween[easing];//缓动算法 var self = this; var timeId = setInterval(function(){ if(self.step()===false){ clearInterval(timeId); } },19) }; Animate.prototype.step = function(){ //代表小球运动的每一帧要做的事情 var t = +new Date; if(t>=this.startTime+this.duration){//修正小球位置 this.update(this.endPos);//更新小球的CSS属性值 return false; } var pos = this.easing(t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration); this.update(pos);//更新小球的CSS属性值 }; Animate.prototype.update = function(pos){ this.dom.style[this.propertyName] = pos+‘px‘; }; var div = document.getElementById(‘div‘); var animate = new Animate(div); animate.start(‘left‘,500,1000,‘strongEaseOut‘); //animate.start(‘top‘,1500,500,‘strongEaseIn‘); </script>
策略模式指的是定义一系列的算法,并且把它们封装起来。
表单验证:
校验逻辑:
- 用户名不能为空
- 密码长度不能少于6位
- 手机号码必须符合格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>策略模式表单验证</title> </head> <body> <form action="" id="registerForm" method="post"> 请输入用户名:<input type="text" name="userName"> 请输入密码:<input type="text" name="password"> 请输入手机号码:<input type="text" name="phoneNumber"> <button>提交</button> </form> </body> </html> <script> var strategies = { 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; } } }; //Validator实现 var Validator = function(){ this.cache = []; }; Validator.prototype.add = function(dom,rules){ var self = this; for(var i=0,rule;rule = rules[i++]; ){ (function(rule){ var strategyAry = rule.strategy.split(‘:‘); var errorMsg = rule.errorMsg; self.cache.push(function(){ var strategy = strategyAry.shift(); strategyAry.unshift(dom.value); strategyAry.push(errorMsg); return strategies[strategy].apply(dom,strategyAry); }); })(rule) } }; Validator.prototype.start = function(){ for(var i=0,validataFunc;validataFunc = this.cache[i++]; ){ var errorMsg = validataFunc(); if(errorMsg){ return errorMsg; } } }; //用户调用代码 var registerForm = document.getElementById(‘registerForm‘); var validataFunc = function(){ var validator = new validator();//创建一个validator对象 validator.add(registerForm.userName,[{ strategy:‘isNonEmpty‘, errorMsg:‘用户名不能为空‘ },{ strategy:‘minLength:6‘, errorMsg:‘用户名长度不能小于6位‘ }]); validator.add(registerForm.password,[{ strategy:‘minLength:6‘, errorMsg:‘密码长度不能小于6位‘ }]); validator.add(registerForm.phoneNumber,[{ strategy:‘isMobile‘, errorMsg:‘手机号码格式不正确‘ }]); var errorMsg = validator.start(); return errorMsg; }; registerForm.onsubmit = function(){ var errorMsg = validataFunc(); if(errorMsg){ alert(errorMsg); return false; } }; </script>
策略模式的一些优点:
策略模式利用组合、委托和多态等技术思想,可以有效地避免多重条件选择语句。
策略模式提供了对开放-封闭原则的完美支持,将算法封装在独立的startegy中,使得它们易于切换,易于理解,易于扩展。
策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制性粘贴工作。
在策略模式中利用组合和委托让Context拥有执行算法的能力,这也是继承的一种更轻便的替代方案。
在JavaScript语言的策略模式中,策略类往往被函数所代替,这时策略模式就是一种"隐形"的模式。
以上是关于JavaScript设计模式与开发实践---读书笔记 策略模式的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript设计模式与开发实践---读书笔记 迭代器模式
JavaScript设计模式与开发实践---读书笔记 命令模式
JavaScript设计模式与开发实践---读书笔记(10) 组合模式