JavaScript设计模式---策略模式

策略模式

---

/**
 * 策略模式：定义一系列的算法，把他们一个个封装起来，并且使他们可以互相替换。
 * 例如年终奖的计算
 * 基于策略模式的程序至少有两部分组成：一个是一组策略类，封装了具体的算法进行计算；第二个是环境类，来接受客户的请求，并将其委托给某一个策略类。
 */
// 模仿传统面向对象语言的策略模式实现
// 定义一组策略
const PerformanceS = function() {};
performanceS.prototype.calculate = function(salary) {
	return salary * 4;
};
const PerformanceA = function() {};
performanceA.prototype.calculate = function(salary) {
	return salary * 3;
};
const PerformanceB = function() {};
performanceB.prototype.calculate = function(salary) {
	return salary * 2;
};
// 定义奖金类
const 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);
};
let bonus = new Bonus();
bonus.setSalary(10000);
bonus.setStrategy(new PerformanceS());
console.log(bonus.getBonus()); // 40000
// JavaScript中策略模式
// 定义策略类
const Strategies = {
	S: function(salary) {
		return salary * 4;
	},
	A: function(salary) {
		return salary * 3;
	},
	B: function(salary) {
		return salary * 2;
	}
};
// 环境
function calculateBonus(level, salary) {
	return Strategies[level](salary);
}
console.log(calculateBonus('S', 20000)); // 80000
/**
 * 常见的缓动算法
 * t: 动画已消耗时间
 * b: 起始位置
 * c: 目标位置
 * d: 动画持续时间
 */
const PointToPoint = {
	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;
	}
};
/**
 * 表单校验
 * 例如：用户名不为空、密码长度不少于6位、手机号格式要求
 */
const Rules = {
	isNonEmpty: function(value, errorMsg) {
		if(value === '') {
			return errorMsg;
		}
	},
	minLength: function(value, length, errorMsg) {
		if(value.length < length) {
			return errorMsg;
		}
	},
	isMobileNumber: function(value, errorMsg) {
		if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
			return errorMsg;
		}
	}
};
function Validator() {
	this.cache = [];
}
Validator.prototype.add = function(dom, rule, errorMsg) {
	let ary = rule.split(':');
	this.cache.push(function() {
		let strategy = ary.shift();
		ary.unshift(dom.value);
		ary.push(errorMsg);
		return Rules[strategy].apply(dom, ary)
	});
};
Validator.prototype.start = function() {
	for(let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
		let msg = validatorFunc();
		if(msg) {
			return msg;
		}
	}
};
function validatorFunc() {
	let validtor = new Validator();
	validator.add(registerForm.userName, 'isNonEmpty', '用户名不能少于6位');
	validator.add(registerForm.password, 'minLength:8', '密码不能少于8位');
	validator.add(registerForm.phoneNumber, 'isMobileNumber', '手机号码格式不对');
	let errorMsg = validator.start();
	return errorMsg;
};
/**
 * html：
 * <form action="http:// xxx.com/register" id="registerForm" method="post"> 
 * 	请输入用户名：<input type="text" name="userName"/ > 
 * 	请输入密码：<input type="text" name="password"/ > 
 * 	请输入手机号码：<input type="text" name="phoneNumber"/ > 
 * 	<button>提交</button> 
 * </form> 
 */
const registerForm = document.querySelector('#registerForm');
registerForm.onsubmit = function() {
	let errorMsg = validatorFunc();
	if(errorMsg) {
		alert(errorMsg);
		return false;
	}
};
// 在JavaScript中策略模式往往是隐形的，被高阶函数所替代。