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

sherry2007fly 2012-11-07 01:51:53
我今天学习一个项目 下面是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);
}
}
})();

...全文
126 点赞 收藏 5
写回复
5 条回复
Tony-Lu 2012年11月07日
还有这里用了很多javascript面向对象编程的技巧,在javascript的世界里,函数就是对象哈。
回复 点赞
Tony-Lu 2012年11月07日
首先,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事件给覆盖了,换成后面定义的内容。 希望对你有帮助~
回复 点赞
Jusbie 2012年11月07日
建议楼主看看http://www.w3school.com.cn/js/index.asp w3c的教程 两小时看完 然后再来读这段代码 你会有很大的收获
回复 点赞
人生若只如初见 2012年11月07日
呵呵 多看看 多查查吧
回复 点赞
sherry2007fly 2012年11月07日
因为代码太长了 只说明其中一小段的意思也行啊 希望大家不吝赐教啊!!!!
回复 点赞
发动态
发帖子
Web 开发
创建于2007-09-28

5.2w+

社区成员

34.1w+

社区内容

Java Web 开发
社区公告
暂无公告