策略模式： 定义一系列算法，把他们一个一个封装起来，并且使他们可以相互替换(具有相同的目标和意图)
1 表单验证的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var PriceStrategy = function () {
var stragtegy = {
return30: function (price){
return +price - price*parseFloat(1 - 30 / 100);
},
return50: function (price){
return +price - price*parseFloat(1 - 50 / 100);
}
}
return function(s,price){
return stragtegy[s] && stragtegy[s](price)
}
}
var price = PriceStrategy()
console.log(price("return30",'300'))
// 表单验证的应用
var inputStrategy = function () {
var strategy = {
notNull:function(value){
return /\s+/.test(value) ? '不能为空':'';
},
number:function(value){
return /^[0-9]+(\.[0-9]?$)/.test(value) ? '':'请输入数字';
}
}
return {
check:function(type,value){
value = value.replace(/^s+|\s+$/g,'');
return strategy[type] ? strategy[type](value) : '没有该检测方法'
},
addstrategy: function (type,fn) {
strategy[type] = fn;
}
}
}
// 算法拓展
inputStrategy.addstrategy('nickname',function(value){
return /^[a-zA-Z]\w{3,7}$/.test(value) ? '' : '请输入昵称4-8位如CLSJMS'
})
// 调用
inputStrategy.check('nickname',"123423")
// 总结
//1 策略模式封装了一组代码，并且封装的代码相互之间独立，提高了算法的复用性；
//2 耦合性低
//3 优化if else 分支语句
</script>
</body>
</html>
2 缓冲动画的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;border: 1px solid #ff0000; width: 560px;min-height: 30px">
<div style="position:absolute;background:rgba(0,0,255,.3);width: 60px;line-height: 30px;" id="div">我是 div</div>
</div>
<div>
<label><input type="radio" name="tween" value="linear" checked="checked">linear</label>
<label><input type="radio" name="tween" value="easeIn">easeIn</label>
<label><input type="radio" name="tween" value="strongEaseIn">strongEaseIn</label>
<label><input type="radio" name="tween" value="strongEaseOut">strongEaseOut</label>
<label><input type="radio" name="tween" value="sineaseIn">sineaseIn</label>
<label><input type="radio" name="tween" value="sineaseOut">sineaseOut</label><br/>
<input type="button" id="btnRun" value="run">
</div>
<script>
/*
* 缓动算法: 接收4个参数，分别表示： 动画已消失的时间， 小球原始位置， 小球目标位置， 动画持续的总时间
*/
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;
}
};
/*
* Animate 的构造函数接收一个参数：即将运动起来的 dom 节点。
*/
var Animate = function( dom ){
this.dom = dom; // 进行运动的 dom 节点
this.startTime = 0; // 动画开始时间
this.startPos = 0; // 动画开始时， dom 节点的位置，即 dom 的初始位置
this.endPos = 0; //
this.propertyName = null; // dom 节点需要被改变的 css 属性名
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);
}
},20);
};
/*
* step 表示节点运动的每一帧要做的事情。 负责计算节点的当前位置和调整更新 CSS 属性值
*/
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);
// pos 为节点当前位置
this.update( pos ); // 更新节点的 CSS 属性
};
/*
2 * 负责更新节点 CSS 属性值
3 */
Animate.prototype.update = function(pos){
this.dom.style[ this.propertyName ] = pos + "px";
};
/*
* 创建要运动的节点
*/
var div = document.getElementById("div");
var animate = new Animate(div);
// 设置运行事件
var btnRun = document.getElementById("btnRun");
var radios = document.getElementsByName("tween"); // 获取单选框
btnRun.onclick = function(){
for(var i= 0,lengh=radios.length;i<lengh;i++){
// 查找被选中要执行的算法策略
if(radios[i].checked){
animate.reset(); // 重置节点运动属性
// 设置动画的基本属性
animate.start( "left", 500, 1000, radios[i].value);
break;
}
}
};
Animate.prototype.reset = function(){
// 重置为 0
this.dom.style[this.propertyName] = "0px";
};
</script>
</body>
</html>
参考 https://www.cnblogs.com/tugenhua0707/p/4722696.html
https://www.cnblogs.com/kongxianghai/p/4985122.html
策略模式总结:
策略模式的优点:
1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
2. 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展
策略模式的缺点:
1. 会在程序中增加许多策略类或者策略对象，但实际上比把他们负责的逻辑堆砌在 Context 中要好
2. 使用策略模式，必须了解所有的策略，才能更好的选择一个合适的策略
浙公网安备 33010602011771号