第5章 策略模式

第二部分 设计模式

第5章 策略模式

定义：定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换。

其实就是定义一系列的算法，把他们各自封装成策略类，算法被封装在策略类内部的方法里。在对Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。

5.1 使用策略模式计算奖金

 

	/**
	 * 使用策略模式计算奖金
	 * S 4个月奖金
	 * A 3个月奖金
	 * B 2个月奖金
	 */
	
	//1、最原始实现方式
	//缺点：
	//（1）calculate函数比较庞大，包含了很多判断语句，这些语句必须包含所有的逻辑分支
	//（2）函数缺乏弹性，如果增加了新的绩效等级，或者想把绩效等级的奖金系数修改一下，我们必须深入calculate函数内部实
	//现违反了开放-封闭原则
	//算法的复用性差，如果在程序的其它地方用到这些算法，我们只能复制粘帖
	var calculateBonus = function(performanceLevel, salary){
		switch(performanceLevel){
			case 'S':
			return salary*4
			break
			case 'A':
			return salary*3
			break
			case 'B':
			return salary*2
			break
			default:
			return salary
			break
		}
	}
	console.log(calculateBonus('A',10000))

 

　　

	//2、使用组合函数重构代码
	//优点：（1）把各种算法封装到一个个的小函数里，可以一目了然的知道对应的哪种算法
	//（2）复用性强
	//缺点：calculateBouns函数会越来越庞大，在系统变化的时候缺乏弹性
	var performanceS = function(salary){
		return salary*4
	}
	var performanceA = function(salary){
		return salary*3
	}
	var performanceB = function(salary){
		return salary*2
	}

	var calculateBonus = function(performanceLevel, salary){
		switch(performanceLevel){
			case 'S':
			return performanceS(salary)
			break
			case 'A':
			return performanceA(salary)
			break
			case 'B':
			return performanceB(salary)
			break
		}
	}
	console.log(calculateBonus('B',10000))

　　

	//3、使用策略模式重构代码，将不变的部分和变化的部分隔离开来，策略模式的目的就是将算法的使用和
	//算法的实现分离开来。
	//一个基于策略模式的程序至少由两部分组成。
	//第一部分是策略类，策略类封装了具体的算法，并负责具体的计算过程。
	//第二部分是环境类Context，Context接收用户的请求，随后把请求委托给某一个策略类。
	
	
	//把每种绩效的计算规则都封装在对应的策略类里面
	var performanceS = function(){}
	performanceS.prototype.calculate = function(salary){
		return salary*4
	}
	var performanceA = function(){}
	performanceA.prototype.calculate = function(salary){
		return salary*3
	}
	var performanceB = function(){}
	performanceB.prototype.calculate = function(salary){
		return salary*2
	}

	//定义奖金类Bonus
	var Bonus = function(){
		this.salary = null
		this.strategy = null
	}
	Bonus.prototype.setSalary = function(salary){
		this.salary = salary
	}
	Bonus.prototype.setStrategy = function(strategy){
		this.strategy = strategy
	}
	Bonus.prototype.getBonus = function(){
		return this.strategy.calculate(this.salary)
	}

	var bonus = new Bonus()
	bonus.setSalary(10000)
	bonus.setStrategy(new performanceS())//设置策略对象

	console.log(bonus.getBonus())

　5.2 JavaScript中函数形式的策略模式

	//javaScript中函数形式的策略模式
	var strategy = {
		'S': function(salary){
			return salary*4
		},
		'A': function(salary){
			return salary*3
		},
		'B': function(salary){
			return salary*2
		}
	}

	var calculateBonus = function(level,salary){
		return strategy[level](salary)
	}
	console.log(calculateBonus('A',10000))

　5.3 使用策略模式实现缓动动画

<div id="div" style="position: absolute;background: blue">我是DIV</div>

	/**
	 * [tween 动画缓动的算法]
	 * @type {Object}
	 * t 动画已消耗时间
	 * b 原始位置
	 * c 目标位置
	 * d 动画持续时间
	 */
	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 description]
	 * @param {[type]} dom [description]
	 */
	var Animate = function(dom){
		this.dom = dom //进行运动的dom节点
		this.startTime = 0 //动画开始时间
		this.startPos = 0 //动画开始时dom节点的初始位置
		this.endPos = 0 //动画结束时dom节点的目标位置
		this.propertyName = null //dom节点需要改变的css属性
		this.easing = null //缓动算法
		this.duration = null //动画持续时间
	}

	/**
	 * [start 动画启动]
	 * @param  {[type]} propertyName [dom节点需要改变的css属性，如left、right、top]
	 * @param  {[type]} endPos       [动画结束时dom节点的目标位置]
	 * @param  {[type]} duration     [动画持续时间]
	 * @param  {[type]} easing       [缓动算法]
	 * @return {[type]}              [description]
	 */
	Animate.prototype.start = function(propertyName, endPos, duration, easing){
		this.startTime = +new Date() //获取当间时间
		//getBoundingClientRect获取元素位置
		this.startPos = this.dom.getBoundingClientRect()[propertyName] //dom节点初始位置
		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)
	}

	/**
	 * [step 动画运动的每一帧要做的事]
	 * @return {[type]} [description]
	 */
	Animate.prototype.step = function(){
		var t = +new Date() //取得当前时间
		if(t >= this.startTime + this.duration){
			this.update(this.endPos)
			return false
		}
		//dom当前位置
		var pos = this.easing(t - this.startTime, this.startPos, this.endPos, this.duration)

		//更新dom当前位置信息
		this.update(pos)
	}

	/**
	 * [update 更新动画运动的位置]
	 * @param  {[type]} pos [当前动画的位置]
	 * @return {[type]}     [description]
	 */
	Animate.prototype.update = function(pos){
		this.dom.style[this.propertyName] = pos + 'px'
	}

	var div = document.getElementById('div')
	var animate = new Animate(div)
	animate.start('right',500, 1000, 'easeIn')