一段JS代码的进化史

要实现的页面逻辑不解释，直接下载附件运行就知道。页面和样式不变，下面的代码块放在regisster.js文件中。

很努力很用心的前端菜鸟大概这么写：

function checkEmail(emailText){
        var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
        return emailRegExp.test(emailText);
    }
    function checkPwd(pwdText){
        var pwdRegExp = /^[\S]{6,16}$/;
        return pwdRegExp.test(pwdText);
    }
    $(document).ready(function(){
        $('.register-input-area-share input').focus(
            function (){
                var selfParent = $(this).parent();
                selfParent.css('border','solid 1px #CCCCCC');
                selfParent.find('span').eq(0).css('display','none');
                selfParent.find('span').eq(1).css('background-position','-513px -55px');
                $('.information').html('');
            }                  
        );
        $('.register-input-area-share input').focusout(
            function (){
                var selfParent = $(this).parent();
                selfParent.css('border','solid 1px #EEEEEE');
                if($(this).val()==''){
                    selfParent.find('span').eq(0).css('display','block');}
            }                  
        );
        
        $('#email').focusout(
            function(){
                if($(this).val()!=''){
                    if(checkEmail($(this).val())){
                        $(this).next().css('background-position','-513px 6px');
                        //$('.information').html('');
                    }
                    else{
                        $(this).next().css('background-position','-513px -25px');
                        $('.information').html('邮件格式不正确，请查验。');
                    }
                }
            }
        );
        
        $('#password').focusout(
            function(){
                if($(this).val()!=''){
                    if(checkPwd($(this).val())){
                        $(this).next().css('background-position','-513px 6px');
                        //$('.information').html('成功');
                    }
                    else{
                        $(this).next().css('background-position','-513px -25px');
                        $('.information').html('请输入6-16位的数字、字母、下划线。');
                    }
                }
            }
        );
        $('#repassword').focusout(
            function(){
                if($(this).val()!=''){
                    if($(this).val()==$('#password').val()){
                        $(this).next().css('background-position','-513px 6px');
                        //$('.information').html('');
                    }
                    else{
                        $(this).next().css('background-position','-513px -25px');
                        $('.information').html('两次密码输入不同。');
                    }
                }
            }
        );
    });

把一样的东西抽取出来，可以看到很用心的思考了，但是水平有限看着还是那么山寨，有很多相似的代码，我们是否可以把它们抽象呢？好，引入面向对象的思想，代码如下：

 

function checkEmail(emailText){
    var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
    return emailRegExp.test(emailText);
}
function checkPwd(pwdText){
    var pwdRegExp = /^[\S]{6,16}$/;
    return pwdRegExp.test(pwdText);
}

function registerStepOne(){
    var inputs = $('.register-input-area-share input');
    //email
    var emailArgument = new HelpArgumentObj();
    emailArgument.fnCheck = function(){
        if(!checkEmail(inputs.eq(0).val())){//格式非法
            emailArgument.bgImgPosition = '-513px -25px';
            emailArgument.pointWords = '您输入的邮箱格式有误';
        }
        else if(!true){//邮箱重名查验（接口预留）
            emailArgument.bgImgPosition = '-513px -25px';
            emailArgument.pointWords = '您的邮件名已经被注册';
        }
        else{//验证通过
            emailArgument.bgImgPosition = '-513px 6px';
            emailArgument.pointWords = '';
        }        
    }
    var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
    inputs.eq(0).focus(emailFactoryFocus.fnFocus);
    inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
    
    //pwd
    var pwdArgument = new HelpArgumentObj();
    pwdArgument.fnCheck = function(){
        if(!checkPwd(inputs.eq(1).val())){//格式非法
            pwdArgument.bgImgPosition = '-513px -25px';
            pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
        }
        else{//验证通过
            pwdArgument.bgImgPosition = '-513px 6px';
            pwdArgument.pointWords = '';
        }        
    }
    var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
    inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
    inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
    
    //rePwd
    var rePwdArgument = new HelpArgumentObj();
    rePwdArgument.fnCheck = function(){
        if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
            rePwdArgument.bgImgPosition = '-513px -25px';
            rePwdArgument.pointWords = '两次密码输入不同';
        }
        else{//验证通过
            rePwdArgument.bgImgPosition = '-513px 6px';
            rePwdArgument.pointWords = '';
        }        
    }
    var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
    inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
    inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
}

function HelpArgumentObj(){
    this.fnCheck;
    this.bgImgPosition = null;
    this.pointWords = null;
}

function FactoryFocus(jqObj,helpArgumentObj){
    this.fnFocus = function(){
        var selfParent = jqObj.parent();
        selfParent.css('border','solid 1px #CCCCCC');
        selfParent.find('span').eq(0).css('display','none');
        selfParent.find('span').eq(1).css('background-position','-513px -55px');
        $('.information').html('');    
    };
    this.fnFocusout = function(){
        var selfParent = jqObj.parent();
        selfParent.css('border','solid 1px #EEEEEE');
        if(jqObj.val()==''){
            //显示标示文字，如：邮箱，密码
            selfParent.find('span').eq(0).css('display','block');        
        }else{
            helpArgumentObj.fnCheck();
            jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
            $('.information').html(helpArgumentObj.pointWords);
        }        
    };
}

$(document).ready(registerStepOne());

这下是不是好多了，将三个输入框的不同页面逻辑抽象到参数类HelpArgumentObj中，再通过工厂FactoryFocus类生产焦点得失事件函数，由于把逻辑抽了出来所以工厂的逻辑就比较简单了。还有本应该写在工厂中的页面逻辑现在在参数类实例化的时候指定，这样通过“依赖反转”将页面逻辑交给View使耦合度降低了。对于页面逻辑的扩展和维护也更为方便，比如我添加了一个邮箱重名的接口，只改动了一个地方。这样是不是找到点前端设计模式的感觉了。

好，我们再加入命名空间的概念：

function createNamespace(ns){
    if(typeof(ns)!="string"){
        throw new Error("namespace must be a string")
        return;
    }
    ns=ns.split(".");
    var o,ni;
    for(var i=0,len=ns.length;i<len,ni=ns[i];i++){
        try{
            o = (o?(o[ni]=o[ni]||{}):(eval(ni+"="+ni+"||{}")));
        }
        catch(e){
            o=eval(ni+"={}");
        }
    }
}

createNamespace("com.cheyoushuo.register");
com.cheyoushuo.register.StepOne = (new Register()).stepOne;

function Register(){    
    this.stepOne = function(){
        var inputs = $('.register-input-area-share input');
        emailFocus(inputs);
        pwdFocus(inputs);
        rePwdFocus(inputs);        
    }

    //email
    function emailFocus(inputs){    
        var emailArgument = new HelpArgumentObj();
        emailArgument.fnCheck = function(){
            if(!checkEmail(inputs.eq(0).val())){//格式非法
                emailArgument.bgImgPosition = '-513px -25px';
                emailArgument.pointWords = '您输入的邮箱格式有误';
            }
            else if(!true){//邮箱重名查验（接口预留）
                emailArgument.bgImgPosition = '-513px -25px';
                emailArgument.pointWords = '您的邮件名已经被注册';
            }
            else{//验证通过
                emailArgument.bgImgPosition = '-513px 6px';
                emailArgument.pointWords = '';
            }        
        }
        var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
        inputs.eq(0).focus(emailFactoryFocus.fnFocus);
        inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
    }
    
    //pwd
    function pwdFocus(inputs){
        var pwdArgument = new HelpArgumentObj();
        pwdArgument.fnCheck = function(){
            if(!checkPwd(inputs.eq(1).val())){//格式非法
                pwdArgument.bgImgPosition = '-513px -25px';
                pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
            }
            else{//验证通过
                pwdArgument.bgImgPosition = '-513px 6px';
                pwdArgument.pointWords = '';
            }        
        }
        var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
        inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
        inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
    }
    
    //rePwd
    function rePwdFocus(inputs){
        var rePwdArgument = new HelpArgumentObj();
        rePwdArgument.fnCheck = function(){
            if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
                rePwdArgument.bgImgPosition = '-513px -25px';
                rePwdArgument.pointWords = '两次密码输入不同';
            }
            else{//验证通过
                rePwdArgument.bgImgPosition = '-513px 6px';
                rePwdArgument.pointWords = '';
            }        
        }
        var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
        inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
        inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
    }
    
    function HelpArgumentObj(){
        this.fnCheck;
        this.bgImgPosition = null;
        this.pointWords = null;
    }

    function FactoryFocus(jqObj,helpArgumentObj){
        this.fnFocus = function(){
            var selfParent = jqObj.parent();
            selfParent.css('border','solid 1px #CCCCCC');
            selfParent.find('span').eq(0).css('display','none');
            selfParent.find('span').eq(1).css('background-position','-513px -55px');
            $('.information').html('');    
        };
        this.fnFocusout = function(){
            //console.log("asdfasdfdasfdasfdfs");
            var selfParent = jqObj.parent();
            selfParent.css('border','solid 1px #EEEEEE');
            if(jqObj.val()==''){
                //显示标示文字，如：邮箱，密码
                selfParent.find('span').eq(0).css('display','block');        
            }else{
                helpArgumentObj.fnCheck();
                jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
                $('.information').html(helpArgumentObj.pointWords);
            }        
        };
    }
    
    function checkEmail(emailText){
        var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
        return emailRegExp.test(emailText);
    }
    
    function checkPwd(pwdText){
        var pwdRegExp = /^[\S]{6,16}$/;
        return pwdRegExp.test(pwdText);
    }
}

再在页面中调用一下就OK

$(document).ready(function(){
        com.cheyoushuo.register.StepOne();
});

仔细看看还是有疏漏的地方，如果有别人也叫Register那我是不是就挂了？！参照jq的做法用匿名方法作弊包，彻底杜绝重名，代码如下：

createNamespace("com.cheyoushuo.register");

(function (ns){    
     var step1 = function(){
        var inputs = $('#register-steptOne .register-input-area-share input');
        emailFocus(inputs);
        pwdFocus(inputs);
        rePwdFocus(inputs);
    }
    
    var step2 = function(){}

    var login = function(){
        var inputs = $('#register-login .register-input-area-share input');
        loginFocus(inputs);
    }

    //email
    function emailFocus(inputs){    
        var emailArgument = new HelpArgumentObj();
        emailArgument.fnCheck = function(){
            if(!isAvailableEmail(inputs.eq(0).val())){//格式非法
                emailArgument.bgImgPosition = '-513px -25px';
                emailArgument.pointWords = '您输入的邮箱格式有误';
            }
            else if(!true){//邮箱重名查验（接口预留）
                emailArgument.bgImgPosition = '-513px -25px';
                emailArgument.pointWords = '您的邮件名已经被注册';
            }
            else{//验证通过
                emailArgument.bgImgPosition = '-513px 6px';
                emailArgument.pointWords = '';
            }        
        }
        var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
        inputs.eq(0).focus(emailFactoryFocus.fnFocus);
        inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
    }
    
    //pwd
    function pwdFocus(inputs){
        var pwdArgument = new HelpArgumentObj();
        pwdArgument.fnCheck = function(){
            if(!isAvailablePwd(inputs.eq(1).val())){//格式非法
                pwdArgument.bgImgPosition = '-513px -25px';
                pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
            }
            else{//验证通过
                pwdArgument.bgImgPosition = '-513px 6px';
                pwdArgument.pointWords = '';
            }                
        }
        var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
        inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
        inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
    }
    
    //rePwd
    function rePwdFocus(inputs){
        var rePwdArgument = new HelpArgumentObj();
        rePwdArgument.fnCheck = function(){
            if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
                rePwdArgument.bgImgPosition = '-513px -25px';
                rePwdArgument.pointWords = '两次密码输入不同';
            }
            else{//验证通过
                rePwdArgument.bgImgPosition = '-513px 6px';
                rePwdArgument.pointWords = '';
            }        
        }
        var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
        inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
        inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
    }

    //login
    function loginFocus(inputs){
        var loginArgument = new HelpArgumentObj();
        loginArgument.fnCheck = function(){};
        var emailFactoryFocus = new FactoryFocus(inputs.eq(0),loginArgument);
        inputs.eq(0).focus(emailFactoryFocus.fnFocus);
        inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
        var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),loginArgument);
        inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
        inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
    }

    function HelpArgumentObj(){
        this.fnCheck = function(){};
        this.bgImgPosition = null;
        this.pointWords = null;
    }

    function FactoryFocus(jqObj,helpArgumentObj){
        this.fnFocus = function(){
            var selfParent = jqObj.parent();
            selfParent.css('border','solid 1px #CCCCCC');
            selfParent.find('span').eq(0).css('display','none');
            selfParent.find('span').eq(1).css('background-position','-513px -55px');
            $('.information').html('');    
        };
        this.fnFocusout = function(){
            //console.log("asdfasdfdasfdasfdfs");
            var selfParent = jqObj.parent();
            selfParent.css('border','solid 1px #EEEEEE');
            if(jqObj.val()==''){
                //显示标示文字，如：邮箱，密码
                selfParent.find('span').eq(0).css('display','block');        
            }else{
                helpArgumentObj.fnCheck();
                jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
                $('.information').html(helpArgumentObj.pointWords);
            }        
        };
    }  
    
    //外露方法
    ns.step1 = step1;
    ns.stept2 = step2;
    ns.login = login;
})(com.cheyoushuo.register);

哪位读者有更好的idear，不妨留言给我，咱们共同进步….

最后附上实例下载地址：http://pan.baidu.com/share/link?shareid=160152&uk=3858966269