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",100));//400
	console.log(calculateBonus("B",100));//200

用策略模式实现缓动动画

	// 用策略模式实现缓动动画
	//缓动算法
	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;
		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];
		this.propertyName=propertyName;
		this.duration=duration;
		this.easing=tween[easing];
		this.endPos=endPos;

		console.log(this);
		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( 'player' );
	var animate = new Animate( div );

	//延迟两秒执行动画
	setTimeout(function(){
		animate.start( 'left', 200, 5000, 'strongEaseOut' );			
	},2000);
	

我是主角