策略模式： 定义一系列算法，把他们一个一个封装起来，并且使他们可以相互替换(具有相同的目标和意图)
示例
我是 div
策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来。
以策略模式的思路实现上边例子的效果的js代码:
1. 首先封装移动节点的缓动算法
1 /* 2 * 缓动算法: 接收4个参数，分别表示： 动画已消失的时间， 小球原始位置， 小球目标位置， 动画持续的总时间 3 */ 4 var tween = { 5 linear: function(t, b, c, d){ 6 return c*t/d + b; 7 }, 8 easeIn: function(t, b, c, d){ 9 return c * ( t /= d ) * t + b; 10 }, 11 strongEaseIn: function(t, b, c, d){ 12 return c * ( t /= d ) * t * t * t * t + b; 13 }, 14 strongEaseOut: function(t, b, c, d){ 15 return c * ( ( t = t / d -1 ) * t * t * t * t + 1 ) + b; 16 }, 17 sineaseIn: function(t, b, c, d){ 18 return c * ( t /= d ) * t * t + b; 19 }, 20 sineaseOut: function(t, b, c, d){ 21 return c * ( ( t = t / d -1 ) * t * t + 1 ) +b; 22 } 23 };
2. HTML 部分
1 <div style="position: relative;border: 1px solid #ff0000; width: 560px;min-height: 30px"> 2 <div style="position:absolute;background:rgba(0,0,255,.3);width: 60px;line-height: 30px;" id="div">我是 div</div> 3 </div> 4 <div> 5 <label><input type="radio" name="tween" value="linear" checked="checked">linear</label> 6 <label><input type="radio" name="tween" value="easeIn">easeIn</label> 7 <label><input type="radio" name="tween" value="strongEaseIn">strongEaseIn</label> 8 <label><input type="radio" name="tween" value="strongEaseOut">strongEaseOut</label> 9 <label><input type="radio" name="tween" value="sineaseIn">sineaseIn</label> 10 <label><input type="radio" name="tween" value="sineaseOut">sineaseOut</label><br/> 11 <input type="button" id="btnRun" value="run"> 12 </div>