一个根据等级计算奖金的例子。
var stratagies = {
"S": function (salary) {
return salary*4;
},
"A": function (salary) {
return salary*3;
},
"B": function (salary) {
return salary*2;
}
};
var calculateBonus = function (level, salary) {
return stratagies[level](salary);};
console.log(calculateBonus('S', 20000));
console.log(calculateBonus('A', 10000));所有跟计算奖金有关的逻辑不再放在context中，而是分布在各个策略对象中。Context并没有计算将近的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时，他们会返回各自不同的计算结果，这正是对象多态性的体现。
使用策略模式实现缓动动画
思路和一些准备工作：
我们目标编写一个动画类和一些缓动算法，让小球以各种各样的缓动效果在页面中运动。
在运动之前，需要记录一些有用的信息，至少包括：动画开始时，小球所在的原始位置；小球移动的目标位置；动画开始时的准确时间点；运动持续的时间。
随后，我们会用setInterval创建一个定时器。在定时器的每一帧里，我们会把动画已消耗的时间、小球的原始位置、目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数，计算出小球当前应该所在的位置。最后再更新该div对应的css属性，小球就能顺利的运动起来了。
让小球运动起来：
在实现完整的功能前，我们先了解一些常见的缓动算法。这些算法都接受4个参数，这4个参数的含义分别是动画已消耗的时间、原始位置、目标位置、动画持续的总时间，返回的值则是动画元素应该处在的当前位置。
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;
}
};首先在页面中放置一个div：
<div style="position: absolute; background: lightskyblue" id="div">我是div</div>
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; // 持续时间
};
Animate.prototype.start = function (propertyName, endPos, duration, easing) {
this.startTime = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
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);
};
Animate.prototype.step = function () {
var t = +new Date; // 取得当前时间
if ( t >= this.startTime + this.duration ) {
this.update(this.endPos); // 更新小球的css属性
return false;
}
var pos = this.easing(t-this.startTime, this.startPos, this.endPos-this.startPos, this.duration); //pos为小球当前位置
this.update(pos); // 更新小球的css属性
};
Animate.prototype.update = function (pos) {
this.dom.style[this.propertyName] = pos + 'px';
}
var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left', 500, 1000, 'strongEaseOut');
//animate.start('top', 1500, 500, 'strongEaseIn');从定义上看，策咯模式就是用来封装算法的。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以用可以用策略模式来封装它们。
表单验证
假设我们要编写一个注册的页面，有如下几条校验逻辑。
1.用户名不能为空
2.密码长度不能少于6位
3.手机号码必须符合格式
表单校验的第一个版本：
此处没有引入策略模式。
<form id="registerForm" method="post" action="">
请输入用户名： <input type="text" name="userName"/>
请输入密码： <input type="text" name="password"/>
请输入手机号码： <input type="text" name="phoneNumber"/>
</form>
<script>
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
if (registerForm.userName.value === '') {
alert('用户名不能为空');
return false;
}
if (registerForm.password.value.length < 6) {
alert('密码长度不能小于6位');
return false;
}
if ( !/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value) ) {
alert('手机号码格式不正确');
return false;
}
}
</script>1.registerForm.onsubmit函数比较庞大，包含了很多分支语句，这些语句需要覆盖所有的校验规则
2.registerForm.onsubmit缺乏弹性
3.算法的复用性差
用策略模式重构表单校验
下面用策略模式来重构表单校验的代码，很显然第一步要把这些校验逻辑都封装成策略对象：
var strategies = {
inNotEmpty: function (value, errorMsg) {
if (value === '') {
return errorMsg;
}
},
minLength: function (value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
}
},
isMobile: function (value, errorMsg) {
if ( !/(^1[3|5|8][0-9]{9}$)/.test(value) ) {
return errorMsg;
}
}
};
var validataFunc = function () {
var validator = new Validator(); //创建一个validator对象
// 添加一些校验规则
validator.add(registerForm.userName, 'inNotEmpty', '用户名不能为空');
validator.add(registerForm.password, 'minLength:6', '密码长度不能小于6位');
validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确');
var errorMsg = validator.start(); // 获得校验结果
return errorMsg;
};
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
var errorMsg = validataFunc(); // 如果errorMsg有确切的返回值，说明未通过校验
if (errorMsg) {
alert(errorMsg);
return false; // 阻止表单提交
}
};
var Validator = function () {
this.cache = []; // 保存校验规则
};
Validator.prototype.add = function (dom, rule, errorMsg) {
var ary = rule.split(':'); // 把strategy和参数分开
this.cache.push(function () { // 把校验的步骤用空函数包装起来，并放入cache
var strategy = ary.shift(); // 用户挑选的strategy
ary.unshift(dom.value); // 把input的value添加进参数列表
ary.push(errorMsg); // 把errorMsg添加进参数列表
return strategies[strategy].apply(dom, ary);
});
};
Validator.prototype.start = function () {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
if (msg) {
return msg;
}
}
};在某个文本输入框添加多种校验规则
目前的表单校验实现留有一点小遗憾：一个文本输入框只能对应一种检验规则，如果我们既想校验它是否为空，又想校验它输入文本的长度不小于10呢？我们期望以这样的方式进行校验：
validator.add(registerForm.userName, [{
strategy: 'inNotEmpty',
errorMsg: '用户名不能为空'
},{
strategy: 'minLength:10',
errorMsg: '长度不能小于10'
}]);
<form id="registerForm" method="post" action="">
请输入用户名： <input type="text" name="userName"/>
请输入密码： <input type="text" name="password"/>
请输入手机号码： <input type="text" name="phoneNumber"/>
<button>提交</button>
</form>
<script>
/*************************策略对象**************************/
var strategies = {
inNotEmpty: function (value, errorMsg) {
if (value === '') {
return errorMsg;
}
},
minLength: function (value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
}
},
isMobile: function (value, errorMsg) {
if ( !/(^1[3|5|8][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 (rule) {
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;
self.cache.push(function () {
var strategy = strategyAry.shift();
strategyAry.unshift(dom.value);
strategyAry.push(errorMsg);
return strategies[strategy].apply(dom, strategyAry);
});
})(rule)
}
};
Validator.prototype.start = function () {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
if (msg) {
return msg;
}
}
};
/*************************客户调用代码************************/
var validataFunc = function () {
var validator = new Validator(); //创建一个validator对象
validator.add(registerForm.userName, [{
strategy: 'inNotEmpty',
errorMsg: '用户名不能为空'
},{
strategy: 'minLength:10',
errorMsg: '用户名长度不能小于10'
}]);
validator.add(registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密码长度不能小于6'
}]);
validator.add(registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号码格式不正确'
}]);
var errorMsg = validator.start(); // 获得校验结果
return errorMsg;
};
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
};
</script>
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
