策略模式
策略模式指的是 定义一系列的算法，把它们一个个封装起来，将不变的部分和变化的部分隔开，实际就是将算法的使用和实现分离出来, 这样就能避免很多的 if 条件判断, 并且增强了代码的复用性;
其中包含一个策略类, 和一个环境类;
计算奖金的例子:
// 策略类
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;
}
// 环境类
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(1000); // 设置原始工资
bonus.setStrategy(new performanceS()); // 设置策略对象
console.log(bonus.getBonus());
缓动动画
// 策略类
var tween = {
/**
* 缓动动画
* @param t 已消耗的时间
* @param b 小球的原始位置
* @param c 小球的目标位置
* @param d 动画持续的总时间
* @return {*}
*/
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;
}
/**
* 启动动画
* @param propertyName 属性
* @param endPose 结束位置
* @param duration 持续时间
* @param easing 缓动算法
*/
Animate.prototype.start = function (propertyName, endPose, duration, easing) {
this.startTime = +new Date();
this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 节点初始位置
this.propertyName = propertyName;
this.endPos = endPose;
this.duration = duration;
this.easing = tween[easing];
var self = this;
var timerId = setInterval(function () {
if (self.step() === false) {
clearInterval(timerId);
}
}, 19);
}
// 每 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(‘div’);
var animate = new Animate(div);
// animate.start(‘left’, 1500, 5000, ‘linear’);
// animate.start(‘left’, 1500, 5000, ‘easeIn’);
// animate.start(‘left’, 1500, 5000, ‘strongEaseIn’);
animate.start(‘left’, 1500, 5000, ‘strongEaseOut’);
// animate.start(‘left’, 1500, 5000, ‘sineaseIn’);
// animate.start(‘left’, 1500, 5000, ‘sineaseOut’);
// animate.start(‘top’, 1500, 5000, ‘linear’);
// animate.start(‘top’, 1500, 5000, ‘easeIn’);
// animate.start(‘top’, 1500, 5000, ‘strongEaseIn’);
// animate.start(‘top’, 1500, 5000, ‘strongEaseOut’);
// animate.start(‘top’, 1500, 5000, ‘sineaseIn’);
// animate.start(‘top’, 1500, 5000, ‘sineaseOut’);
表单校验
// 策略类
var strategies = {
isNonEmpty: 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 Validator = function () {
this.cache = [];
}
Validator.prototype.add = function (dom, rule, errorMsg) {
var ary = rule.split(‘:’);
this.cache.push(function () {
var strategy = ary.shift(); // 删除并返回数据第一个元素
ary.unshift(dom.value); // 向数组的开头添加一个或更多元素，并返回新的长度
ary.push(errorMsg);
return strategies[strategy].apply(dom, ary);
});
}
Validator.prototype.start = function () {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
console.log(validatorFunc = this.cache[i++]);
var msg = validatorFunc();
if (msg) {
return msg;
}
}
}
var validatorFunc = function () {
var validator = new Validator();
validator.add(registerForm.userName, ‘isNonEmpty’, ‘ 用户名不能为空 ’);
validator.add(registerForm.password, ‘minLength:6’, ‘ 密码长度不能少于 6 位 ’);
validator.add(registerForm.phoneNumber, ‘isMobile’, ‘ 手机号码格式不正确 ’);
return validator.start();
}
var registerForm = document.getElementById(‘registerForm’);
registerForm.onsubmit = function () {
var errorMsg = validatorFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
}
以上的代码都是在我的 github 上可以看到