定义
定义一系列的算法,把他们一个个封装起来,并使他们可以相互替换。
策略模式利用组合,多态的思想有效避免了多重条件分支,提供了open-close原则的完美支持。使用策略模式必须了解所有的strategy。
使用策略模式计算奖金
将计算方法封装起来,避免使用条件分支判断
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',2000))
使用策略模式编写动画
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
}
}
var Animate = function(dom){
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPost = 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]
this.propertyName = propertyName;
this.endPos = endPos;
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 );
return false;
}
var pos = this.easing( t-this.startTime,this.startPos,
this.endPos-this.startPos,this.duration
)
this.update(pos);
}
Animate.prototype.update = function( pos ){
this.dom.style[this.propertyName] = pos + 'px';
}
var div = document.getElementById('na')
var animate = new Animate(div)
animate.start('left',500,1000,'linear')
表单验证
1. 策略对象维护验证方法
2. Validator类添加验证规则
3. 用户输入验证失败信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http:/www.bai.com" id="registerForm" method='post'>
请输入用户名:<input type="text" name="userName">
请输入密码:<input type="text" name="password">
请输入手机号码:<input type="text" name="phoneNumber">
<button>提交</button>
</form>
<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
}
}
}
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, validatorFunc; validatorFunc = this.cache[i++];){
var errorMsg = validatorFunc();
if(errorMsg){
return errorMsg
}
}
}
var registerForm = document.getElementById('registerForm');
var validataFunc = function(){
var validator = new Validator;
validator.add(registerForm.userName,[
{
strategy:'isNonEmpty',
errorMsg:'用户名不能为空'
},{
strategy:'minLength:10',
errorMsg:'用户名长度不能小于10位'
}
])
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>
</body>
</html>