关于js问题求助 刚接触 求助各位大侠 望多多指教啊！！

Question

我今天学习一个项目 下面是jsp页面调用的js页面的一段代码 完全看不懂啊 代码比较多 因为是刚接触 所以一点都不理解 希望各位高手能够指点一二啊 在这里先行谢过了！！H.Login = (function(){
    
    var _cache = {};
    
    var checkInputVal = function(){
        if(_cache.inputs){
            for(var i = 0, len = _cache.inputs.length; i < len; i++){
                var input = _cache.inputs[i];
                var label = input.prev();
                if(input.val() != ""){   
                    label.css("display") != "none" && label.hide();
                }
                else{
                    label.css("display") == "none" && label.show();
                }
            }
        }
    }
    
    var checkFun = function(input){
        var val = input.val();
        var type = input.attr("errortype");
        switch(type){
            case "notempty":
                if($.trim(val) == ""){
                    return false;
                }
                if(input.attr("minlen") && val.length < Number(input.attr("minlen"))){
                    return false;
                }
                break;
        }
        
        return true;
    }
    
    var showMsg = function(input, error_msg){
        var par = input.parent();
        var hint = par.find(".popup-hint");
        var warIco = par.find(".ico-war");
        var msg = input.attr("errmsg");
        if(!hint.length){
            hint = $('<span class="popup-hint" style="z-index:3"><i></i>'+msg+'</span>');
            warIco = $('<b class="ico-war"></b>');
            warIco.on("mouseover", function(){
                warIco.attr("is_over", "1");
                hint.show();
            }).on("mouseout", function(){
                warIco.attr("is_over", "");
                hint.hide();
            });
            
            par.append(warIco);
            par.append(hint);
        }
        if(error_msg){
            msg = error_msg;
        }
        hint.html('<i></i>' + msg);
        warIco.show();
        hint.show();
        /*window.setTimeout(function(){
            if(!warIco.attr("is_over")){
                hint.hide();
            }
        }, 2000);*/
        input.addClass("text-war");
        
    }
    
    var hideMsg = function(input){
        var par = input.parent();
        var hint = par.find(".popup-hint");
        var warIco = par.find(".ico-war");
        if(hint.length){
            hint.hide();
        }
        if(warIco.length){
            warIco.hide();
        }
        input.removeClass("text-war");
    }
    
    var _focusTimer;
    var bindInput = function(input){
        var label = input.prev();
        label.on("mouseover", function(){
            if(_focusTimer) window.clearTimeout(_focusTimer);
            _focusTimer = window.setTimeout(function(){
                input.focus();
            }, 200);
        }).on("mouseout", function(){
            if(_focusTimer) window.clearTimeout(_focusTimer);
        });
    }
    
    return {
        Init: function(form){
            var userName = $("#userName"), pwd = $("#userPwd");
            _cache.inputs = [userName, pwd];
            bindInput(userName);
            userName.focus();
            userName.on("keypress", function(e){
                if(e.keyCode == 13){
                    if($(this).val() && pwd.val() == ""){
                        window.setTimeout(function(){
                        pwd.focus();
                        }, 10);
                        return false;
                    }
                }
            });
            bindInput(pwd);
            for(var i = 0, len = _cache.inputs.length; i < len; i++){
                var ele = _cache.inputs[i];
                ele.on("keydown", function(){
                    hideMsg($(this));
                })
            }
            
            form.on("submit", function(){
                var res = true;
                var firstDom;
                for(var i = 0, len = _cache.inputs.length; i < len; i++){
                    var ele = _cache.inputs[i];
                    if(!checkFun(ele)){
                        showMsg(ele);
                        res = false;
                        if(!firstDom){
                            firstDom = ele;
                        }
                    }
                    else{
                        hideMsg(ele);
                    }
                }
                if(firstDom){
                    firstDom.focus();
                }
                return res;
            });
            
            window.setInterval(checkInputVal, 100);
        },
        ShowMsg: function(input, msg){
            showMsg(input, msg);
        },
        HideMsg: function(input){
            hideMsg(input);
        }
    }
})();

Answer 1

建议楼主看看http://www.w3school.com.cn/js/index.asp
w3c的教程  两小时看完  然后再来读这段代码  你会有很大的收获

Answer 2

首先，H.Login = (function(){ 这一大段都是在定义H.Login这个函数，你可以理解为，function Login(){ xxx }；一样的效果，写法不同。不过这个Login是H的成员函数。接着看， var checkInputVal = function(){ ，一样的你可以理解为，定义个函数，function checkInputVal(){ xxx }；搜一下checkInputVal，发现这里用了，  window.setInterval(checkInputVal, 100);这个 window.setInterval是系统函数，延时100毫秒后，会执行checkInputVal这个函数。再随便看一个， var checkFun = function(input){ ，也等于function checkFun(input){ xxx }；form.on("submit", function(){ 意思是把这个form的submit事件给覆盖了，换成后面定义的内容。希望对你有帮助~ 

Answer 3

还有这里用了很多javascript面向对象编程的技巧，在javascript的世界里，函数就是对象哈。