javascript - 一段验证代码的3点困惑
怪我咯
怪我咯 2017-04-10 15:46:39
[JavaScript讨论组]
               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>    
怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(3)
巴扎黑
  1. this.cache是个数组,将一个匿名函数压入这个数组中,所以这个return是和你问的第三个问题相对应。

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

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

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

迷茫
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)中的校验函数。

大家讲道理

似乎这个问题只有有人问过了
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();    

  
            
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号