定义
定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换。
其目的就是将算法的使用和算法的实现分离开来。
JS版本的策略模式
// 封装一系列的算法
var strategies = {
"S":function(m){
return m*4;
},
"A":function(m){
return m*3;
},
"B":function(m){
return m*2;
}
}
// 算法的实现
var calculateBonus = function(level, m){
return strategies[level](m);
}
console.log(calculateBonus('S',10000));
使用策略模式实现缓动动画
// 动画移动效果算法
var tween = {
linear(t,b,c,d){
return c*t/d+b;
},
easeIn(){
return c*(c/=d) * t+b;
}
}
// 先创建一个类
var Animate = function(dom){
this.dom = dom; // 进行运动的dom节点
this.startTime = 0; // 动画开始时间
this.startPos = 0; // 动画开始的像素点
this.endPos = 0; // 动画结束的像素点
this.properyName=null; // dom节点需要被修改的css属性名
this.easing = null; // 动画缓动算法
this.duration = null; // 动画持续时间
}
// start方法负责启动这个动画
Animate.prototype.start = function(properyName,endPos,duration,easing){
...
this.easing = tween[easing];
}
// step代表小球运动的每一帧要做的事情
Animate.prototype.step = function(){}
// 每一帧动画要做的修改
Animate.prototype.update = function(){}
// 引用
var div = document.getElementById("div");
var animate = new Animate(div);
animate.start('left',100,1000,'easeIn');
上述代码中分为两部分，
一部分是tween类，这部分是策略模式中的算法部分，可以被替换赋值；
一部分是Animate业务逻辑类，这部分是策略模式中的实现部分。负责调用不同的算法类实现不同的缓动效果。
tween类只是用于提供动画是如何计算缓动的，可以随意替换变化。这也是策略模式的核心。实现业务和功能的低耦合。
更广义的“算法”
策略模式指的是定义一系列的算法，并把它们封装起来。实现和业务代码的低耦合。
表单验证
<html>
<body>
<form action="#" id="post" method="post">
<label>请输入用户名：<input type="text" name="username" /></label>
<label>请输入密码：<input type="text" name="password" /></label>
<label>请输入手机号码：<input type="text" name="phone" /></label>
</form>
</body>
</html>
<script>
/**********策略对象**********/
var strategies = {
isNonEmpty(value,errorMsg){
if(value === '') return errorMsg;
},
minLength(value,length,errorMsg){
if(value.length<length) return errorMsg;
},
isMobile(value,errorMsg){
if(!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(value)) return errorMsg;
}
}
/****************业务代码Validator类*****************/
var Validator = function(){
this.cache = [];
}
Validator.prototype.add = function(dom,rules){
var self = this;
for(var i=0,rule;rule = rules[i++]){
(function(){
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;
self.cache.push(function(){
var strategy = strategyAry.shiht();
strategyAry.unshift(dom.value);
strategyAry.push(errorMsg);
return strategies[strategy].apply(dom,strategyAry);
})
})(rule)
}
}
Validator.prototype.start = function(){}
/***********客户端调用************/
var form = document.getElementById('post');
var validataFunc = function(){
var validator = new Validator();
validator.add(form.username,[{
strategy:'isNonEmpty',
errorMsg:'用户名不得为空！'
},{
strategy:'minLength',
errorMsg:'用户名长度不能小于10位'
}])
}
form.onsubmit = function(){
var errorMsg = validataFunc();
if(errorMsg){
alert(errorMsg);
return false;
}
}
</script>
上述代码中，策略代码和业务执行代码分开。
说白了策略模式比较倾向于有一些算法逻辑的业务模式，将算法部分封装起来，实现和业务代码的低耦合。
作者很喜欢将各种方法封装，调用的时候使用对象的key-value的方式传入字符串进行调用。
作者很喜欢这种 高阶函数的调用方式来实现业务需求。将这些被封装的算法四处传递。
这种函数式编程可以借鉴，不过总感觉不规范和不安全。
总结
策略模式的缺点是会暴露一些内部需求的实现，比如上述表单验证，在使用isNonEmpty还是minLength方法验证之前，就需要先知道两者的引用参数是什么样子的才行。这就违反了最少知识原则。
实际JS开发中，这种策略模式的封装会被函数所代替，也就变成了“隐形”的了。所以看代码觉得这是很常见的一种写法。
网友评论