JS设计模式——策略模式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS设计模式——策略模式相关的知识,希望对你有一定的参考价值。

核心:定义一些列的算法(逻辑)封装起来,并且它们是平等关系可以相互替换
js中的策略模式关键字:策略和业务分离

(一)基本实现

常见代码:

function playGame(gameName){
	let str;
	if(gameName == ‘footBall‘){
		str = ‘不喜欢玩足球‘
	}else if(method == ‘basketball‘){
		str = ‘不喜欢玩蓝球‘
	}else if(method == ‘pingpang‘){
		str = ‘不喜欢玩乒乓‘
	}else if(method == ‘swing‘){
		str = ‘好啊,我最喜欢游泳了‘
	}
	alert(str)
}

策略模式优化

let gameStrategies = {
	‘footBall‘: function(){
		return ‘不喜欢玩足球‘
	},
	‘basketball‘: function(){
		return ‘不喜欢玩蓝球‘
	},
	‘pingpang‘: function(){
		return ‘不喜欢玩乒乓‘
	},
	‘swing‘: function(){
		return ‘好啊,我最喜欢游泳了‘
	}
}

function playGame_1(gameName){
	let str;
	str = gameStrategies(gameName)
	alert(str)
}

  将策略单独提取出来封装,和业务代码分离。这样需要修改策略不需要去业务代码里面查找,而提取出来的策略也可以被多个业务代码复用。

(二)场景案例

//策略模式实现表单判断
let formStrategies = {
	isNonEmpty: 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
		}
	}
}

registerForm.onsubmit = function(){
	let userNameErrorMsg = formStrategies.isNonEmpty(registerForm.userName,‘用户名不能为空‘)
	let pwdErrorMsg = formStrategies.minLength(registerForm.pwd,‘密码长度不能少于6位‘)
	let telErrorMsg = formStrategies.isMobile(registerForm.tel,‘手机格式不正确‘)
	if(userNameErrorMsg){
		alert(userNameErrorMsg)
	}else if(pwdErrorMsg){
		alert(pwdErrorMsg)
	}else if(telErrorMsg){
		alert(telErrorMsg)
	}
}

  这里可以继续优化

//start--------实现一个可配置策略的验证类
function Validator(){
	this.rules = []	//待验证规则队列
}
Validator.prototype.add = function(rule,dom,errorMsg){
	let _rule = rule.split(‘:‘) //把策略和参数分开,比如minLength:6
	this.rules.push(function(){
		let strategy = _rule.shift() //策略字符串
		_rule.unshift(dom.value)
		_rule.push(errorMsg)
		return formStrategies[strategy].apply(dom,_rule)

	})
}
Validator.prototype.start = function(){
	for(let i = 0,validatorFunc;validatorFunc = this.rules[i++];){
		let msg = validatorFunc()
		if(msg)return msg
	}
}
//end-----------

let validataFunc = function(){
	let validator = new Validator()
	validator.add(registerForm.userName,‘isNonEmpty‘,‘用户名不能为空‘)
	validator.add(registerForm.pwd,‘minLength‘,‘密码长度不能少于6位‘)
	validator.add(registerForm.tel,‘isMobile‘,‘手机格式不正确‘)

	let errorMsg = validator.start()
	return errorMsg
}

registerForm.onsubmit = function(){
	let errorMsg = validataFunc()
	if(errorMsg){
		alert(errorMsg)
		return
	}
}

(三)场景案例

//上午返回‘上午好‘;中午返回‘中午‘;下午返回‘下午好‘;晚上返回‘晚上好‘;凌晨返回‘凌晨了,请马上休息‘
function say(){
	var hour = new Date().getHours()
	if(hour > 6 && hour < 12){
		return ‘上午好‘
	}else if(hour >= 12 && hour <= 13){
		return ‘中午好‘
	}else if(hour > 13 && hour <18){
		return ‘下午好‘
	}else if(hour >= 18 && hour < 24){
		return ‘晚上好‘
	}else{
		return ‘凌晨了,请马上休息‘
	}
}
//策略模式
//语言策略
var say_words = {
	morning : function(){
		return ‘上午好‘
	},
	noon : function(){
		return ‘中午好‘
	},
	afternoon : function(){
		return ‘下午好‘
	},
	night : function(){
		return ‘晚上好‘
	},
	beforeDawn : function(){
		return ‘凌晨了,请马上休息‘
	}
}

//时间策略
var say_times = {
	time6_12 : function(hour){
		return hour > 6 && hour < 12
	},
	time12_13 : function(hour){	
		return hour >= 12 && hour <= 13
	},
	time13_18 : function(hour){
		return hour > 13 && hour <18
	},
	time18_24 : function(hour){
		return hour >= 18 && hour < 24
	},
	time0_6 : function(hour){
		return hour >= 0 && hour <= 6
	},
}

function say1(){
	var hour = new Date().getHours()			
	if(say_times.time6_12){
		return say_words.morning()
	}else if(say_times.time12_13){
		return say_words.noon()
	}else if(say_times.time13_18){
		return say_words.afternoon()
	}else if(say_times.time18_24){
		return say_words.night()
	}else{
		return say_words.beforeDawn()
	}
}

//继续优化
function say2(){
	var hour = new Date().getHours()	
	
	//策略模式和多态思想结合
	function doSayByStrategies(arr){
		for(var i in arr){					
			if(say_times[i](hour)){
				return arr[i]()		
			}
		}
	}
	return doSayByStrategies({
				time6_12:say_words.morning,
				time12_13:say_words.noon,
				time18_24:say_words.night
			})
	
}

  这个例子其实并不是一个好例子,因为使用策略模式显得比直接使用if else语句更加繁琐,这个例子中如果say_words和say_times的逻辑比较复杂且需要很多场景共用,则该模式的好处将愈发显现。

 

以上是关于JS设计模式——策略模式的主要内容,如果未能解决你的问题,请参考以下文章

JS设计模式——策略模式

js设计模式---策略模式

js策略模式

JS设计模式策略模式

js策略模式

js 设计模式之策略模式