设计模式2-策略模式

策略模式

应用场景：表单校验

	<form id="registerForm">
        用户名：<input type="text" name="userName" />
        密码：<input type="text" name="password" />
        手机号：<input type="text" name="phoneNumber" />
        <button type="submit">提交</button>
    </form>
    <script>
        // 校验方法
        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(':') // 把strategy和参数分开
            this.cache.push(function(){ //  把校验步骤用空函数包装起来，并且放入cache
                var prop=ary.shift() // 用户挑选的strategy
                ary.unshift(dom.value)  //把input的value添加进参数列表
                ary.push(errorMsg)  // 把errorMsg添加进参数列表
                return strategies[prop].apply(dom,ary)
            })
        }
        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,'isNonEmpty','用户名不能为空')
            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();
            if(errorMsg){
                alert(errorMsg);
                return false; // 阻止表单提交
            }
        }
    </script>

加强版表单校验

		/***************策略类********************/
        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
                }
            },
        }
        /***************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 ary=rule.strategy.split(':') // 把strategy和参数分开
                    self.cache.push(function(){ //  把校验步骤用空函数包装起来，并且放入cache
                        var prop=ary.shift() // 用户挑选的strategy
                        ary.unshift(dom.value)  //把input的value添加进参数列表
                        ary.push(rule.errorMsg)  // 把errorMsg添加进参数列表
                        return strategies[prop].apply(dom,ary)
                    })
                })(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: 'isNonEmpty', 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; // 阻止表单提交
            }
        }