一段验证代码的3点困惑



 var strategies={
                    isNonEmpty:function(value,errorMsg){
                        if(value===""){
                            return errorMsg;
                        }
                    },
                    minLength:function(value,length,errorMsg){
                        if(value.length<length){
                            return errorMsg;
                        }
                    },
                    isMoblie:function(value,errorMsg){
                        if(!/(^1[3|5|8][0-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);
                        //1、这下面的return返回的是什么意思
                        //2、strategies这个对象下没有这个[strategy]属性吧,
                        return strategies[strategy].apply(dom,ary);
                    });
                };

                Validator.prototype.start=function(){
                    //3、这个循环validatorFunc是变量他里面好像也没用到他吧,
                    //   这个validatorFunc变量是下面这个validatorFunc()吗??
                    //   下面的 validatorFunc()是调用的方法来的吧??
                    for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){
                        var msg=validatorFunc();
                        if(msg){
                            return msg;
                        }
                    }
                };

                var validataFunc=function(){
                    var validator=new 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;
                    }
                }

        ----html-----    
        <form action="http://www.xxx.com" id="registerForm" method="post">
        请输入用户名:<input type="text" name="userName" /><br/>
        请输入密码:<input type="text" name="password" /><br/>
        请输入手机号码:<input type="text" name="phoneNumber" /><br/>
        <button>提交</button>

jquery JavaScript javascript面向对象

晓saber 9 years, 4 months ago

 return strategies[strategy].apply(dom, ary);

上面的 strategy 在中括号中,可以作为一个变量(可以是 "isNonEmpty", "minLength"... )。
return 是返回校验函数执行的结果(这样才可以拿到错误信息)。


 for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var msg = validatorFunc();
        if (msg) {
            return msg;
        }
    }

这里的 validatorFunc 就是前面 add() 进缓存( cache )中的校验函数。

Qui44 answered 9 years, 4 months ago

  1. this.cache 是个数组,将一个匿名函数压入这个数组中,所以这个 return 是和你问的第三个问题相对应。

  2. 访问对象的属性有两种方法,一种用 . ,一种是在 key 为变量的情况下,采用数组的访问形式。

  3. validatorFunc 就是第一点中压入 this.cache 的匿名函数,所以, validatorFunc() 是在执行这个匿名函数,那么第一点的 return 也就知道了,就是这个 匿名函数 的返回值。

我不明白的是写成这样有什么好处么?为什么看起来很别扭啊。

jas32 answered 9 years, 4 months ago

似乎这个问题只有有人问过了
1.2)this.cache数组中添加了一个函数,这个函数的返回值为
strategies[strategy]绑定的函数的的执行结果
函数对象apply/call的用法再去搜索下吧
strategy是一个变量,这个变量的值你可以结合参照这段代码看(就是strategies的属性名,而这个属性值为一个函数对象)


 var validataFunc=function(){
    var validator=new Validator();
    validator.add(registerForm.userName,"isNonEmpty","用户名不能为空");
    validator.add(registerForm.password,"minLength:6","密码长度不能小于6位");
    validator.add(registerForm.phoneNumber,"isMobile","手机号码格式不正确");
    var errorMsg=validator.start();
    return errorMsg;
}

3)cache中存放的时函数对象
取出函数对象


 validatorFunc=this.cache[i++];

执行函数


 var msg=validatorFunc();

antiyyy answered 9 years, 4 months ago

Your Answer