策略模式学习笔记

平时我们在写代码时会偶尔用到策略模式的思想,但我们却不自知。今天学习了策略模式,特记录如下:

策略模式的定义是:定义一系列的算法,把他们一个个封装起来,并且使它们可以相互替换。

策略模式的目的是:将算法的使用和实现分离开来。一个基于策略模式的程序至少由两部分组成。第一部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二部分是环境类Context,Context接受客户的请求,随后把请求委托给某一个策略类,Context要维持对某个策略对象的引用。

在开发项目时,肯定离不开表单检验这一个环节。

在编写一个注册页面时,在点击注册按钮之前,需要做几条校验逻辑:

1.用户名不能为空;

2.密码长度不能少于6位;

3.手机号码必须符合格式。

现在开始用策略模式实现:

第一步:把校验逻辑封装成策略对象

var strategies={
    isNotEmtpy:function(value, errorMsg){
        if(value==''){
            return errorMsg;
        }
    },
    minLenth: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类,Validator类这里作为Context,负责接收用户的请求并委托给策略对象。

var Validator = function(){
    this.cache = [];  //保存校验规则
}
Validator.prototype.add=function(dom, rules){
    var _this=this;
    for(var i=0,rule;rule = rules[i++];){
        (function(rule){
            var strategyAry = rule.strategy.split(':');
            var errorMsg = rule.errorMsg;
            _this.cache.push(function(){
                var strategyName = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategies[strategyName].apply(dom, strategyAry);
            })
        })(rule);
    }
}
Validator.prototype.start=function(){
    console.log(this.cache)
    for( var i=0, validatorFunc; validatorFunc = this.cache[i++]; ){
        var msg = validatorFunc();
        if(msg){
            return msg;
        }
    }
}

有了上面的策略对象和环境类,剩下的就是调用了。一下附上完整代码。

<!DOCTYPE html>
<html>
<head>
	<title>dmeo</title>
</head>
<body>
	<form id="registerForm" method="post">
		请输入用户名:<input type="text" name="username" />
		请输入密码:<input type="text" name="userpwd" />
		<button>提交</button>
	</form>
<script>
	/***************** 策略部分 ******************/
	var strategies={
		isNotEmtpy:function(value, errorMsg){
			if(value==''){
				return errorMsg;
			}
		},
		minLenth: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;
			}
		}
	}

	/***************** 环境Context部分 ******************/
	var Validator = function(){
		this.cache = [];  //保存校验规则
	}
	Validator.prototype.add=function(dom, rules){
		var _this=this;
		for(var i=0,rule;rule = rules[i++];){
			(function(rule){
				var strategyAry = rule.strategy.split(':');
				var errorMsg = rule.errorMsg;
				_this.cache.push(function(){
					var strategyName = strategyAry.shift();
					strategyAry.unshift(dom.value);
					strategyAry.push(errorMsg);
					return strategies[strategyName].apply(dom, strategyAry);
				})
			})(rule);
		}
	}

	Validator.prototype.start=function(){
		console.log(this.cache)
		for( var i=0, validatorFunc; validatorFunc = this.cache[i++]; ){
			var msg = validatorFunc();
			if(msg){
				return msg;
			}
		}
	}

	/***************** 调用部分 ******************/
	var validatorFn = function(){
		var validator = new Validator();
		validator.add(registerForm.username, [{strategy:'isNotEmtpy',errorMsg:'用户名不能为空!'},{strategy:'minLenth:4',errorMsg:'用户名长度不能少于4位!'}] );
		validator.add(registerForm.userpwd, [{strategy:'minLenth:6',errorMsg:'密码长度不能少于6位!'}]);
		var errorMsg = validator.start();
		return errorMsg;
	}

	var registerForm = document.getElementById('registerForm');
	registerForm.onsubmit = function(){
		var errorMsg = validatorFn();
		if(errorMsg){
			alert(errorMsg);
			return false;
		}
	}
</script>
</body>
</html>

还可以做成一个适合项目的校验插件,方便调用。

策略模式还可以有其他使用场景:可以用来封装一系列的"业务规则",单出现很多判断条件语句时,就可以思考一下是否可以使用策略模式。

如有错误,请指正!

 

posted @ 2019-01-26 19:12  heyujun-  阅读(273)  评论(0编辑  收藏  举报