策略模式

# 策略模式

定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

> 并且使它们可以相互替换”，这句话在很大程度上是相对于静态类型语言而言的。因为静态类型语言中有类型检查机制，所以各个策略类需要实现同样的接口。当它们的真正类型被隐藏在接口后面时，它们才能被相互替换。而在JavaScript这种“类型模糊”的语言中没有这种困扰，任何对象都可以被替换使用。因此，JavaScript中的“可以相互替换使用”表现为它们具有相同的目标和意图。

策略模式的目的就是将算法的使用与算法的实现分离开来。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。 第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明Context中要维持对某个策略对象的引用

```javascript
// JavaScript版本的策略模式
var strategies = {
	'S': function(salary){
		return salary * 4;
	},
	'A': function(salary){
		return salary * 3;
	},
	'B': function(salary){
		return salary * 2;
	}
}

var calculate = function(level, salary){
	return strategies[level](salary);
}
```

**缓动动画**

```javascript
/*
	@param {
		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 # 策略模式

定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

> 并且使它们可以相互替换”，这句话在很大程度上是相对于静态类型语言而言的。因为静态类型语言中有类型检查机制，所以各个策略类需要实现同样的接口。当它们的真正类型被隐藏在接口后面时，它们才能被相互替换。而在JavaScript这种“类型模糊”的语言中没有这种困扰，任何对象都可以被替换使用。因此，JavaScript中的“可以相互替换使用”表现为它们具有相同的目标和意图。

策略模式的目的就是将算法的使用与算法的实现分离开来。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。 第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明Context中要维持对某个策略对象的引用

```javascript
// JavaScript版本的策略模式
var strategies = {
	'S': function(salary){
		return salary * 4;
	},
	'A': function(salary){
		return salary * 3;
	},
	'B': function(salary){
		return salary * 2;
	}
}

var calculate = function(level, salary){
	return strategies[level](salary);
}
```

**缓动动画**

```javascript
/*
	@param {
		t: 动画已消耗的时间,
		b: 小球原始位置,
		c: 小球目标位置,
		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.easing = null;
	this.duration = null;
	this.prototyName = null;
}

Animate.prototype.start = function(prototyName,endPos,duration,easing){
	this.startTime = +new Date;
	this.startPos = this.dom.getBoundingClientRect()[prototyName];
	this.prototyName = prototyName;
	this.endPos = endPos;
	this.duration = duration;
	this.easing = tween[easing]; // 缓动算法
	var self = this;
	var timeId = setInterval(function(){
		if(self.step()===false){
			clearInterval(timeId);
		}
	})
}

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.prototyName] = pos + 'px';
}

var div = document.getElementById( 'div' );
var animate = new Animate( div );

animate.start( 'left', 500, 1000, 'strongEaseOut' );
```

**表单验证**

```javascript
<body>
	<form id="registerForm">
		请输入用户名：<input type="text" name="userName"/ >
		<br>
 请输入密码：<input type="text" name="password"/ >
 <br>
 请输入手机号码：<input type="text" name="phoneNumber"/ >
 <br>
 <button>提交</button>
	</form>
<script type="text/javascript">
	// 表单校验
	var strategies = {
		isEmpty: function(val,errormsg){
			if(val===''){
				return errormsg;
			}
		},
		minLength: function(val,length,errormsg){
			if(val.length < length){
				return errormsg;
			}
		},
		isMobile: function(val,errormsg){
			if(!/(^1[3|5|8][0-9]{9}$)/.test(val)){
				return errormsg;
			}
		}
	}

	var Validator = function(){
		this.cache = [];
	}
	Validator.prototype.add = function(dom, rule, msg){
		var ary;
		if(arguments.length===3){
			ary = rule.split(':');
			var strategy = strategies[ary.shift()];
			ary.unshift(dom.value);
			ary.push(msg);
			this.cache.push(function(){
				return strategy.apply(this,ary);
			})
		}else if(arguments.length===2&&(Object.prototype.toString.call(rule)==='[object Array]')){
			rule.map(ruleObj=>{
				this.add(dom,ruleObj.strategy,ruleObj.errormsg);
			})
		}
	}

	Validator.prototype.start = function(){
		for(var i=0, func;func = this.cache[i++]; ){
			var msg = func();
			if(msg){
				return msg;
			}
		}
	}

	var ValidatorFuc = function(){
		var validator = new Validator();
		validator.add(registerForm.userName,[
		{
			strategy: 'isEmpty',
			errormsg: '用户名不能为空'
		},
		{
			strategy: 'minLength:8',
			errormsg: '用户名长度不能少于8位'
		}
		]);
		validator.add(registerForm.password,'minLength:6','密码长度不能少于6位');
		validator.add(registerForm.userName,'isMobile','手机号格式不正确');
		var errormsg = validator.start();
		return errormsg;
	}

	document.getElementById('registerForm').onsubmit = function(e){
		e.preventDefault();
		var errorMsg = ValidatorFuc(); // 如果errorMsg有确切的返回值，说明未通过校验
	 if ( errorMsg ){
	 alert ( errorMsg );
	 return false; // 阻止表单提交
	 }
	}
</script>
```




Navigation Menu

策略模式 #17

策略模式

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

策略模式 #17

Description

策略模式

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions