一段JS代码的进化史

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

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

View Code
 1 function checkEmail(emailText){
 2         var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
 3         return emailRegExp.test(emailText);
 4     }
 5     function checkPwd(pwdText){
 6         var pwdRegExp = /^[\S]{6,16}$/;
 7         return pwdRegExp.test(pwdText);
 8     }
 9     $(document).ready(function(){
10         $('.register-input-area-share input').focus(
11             function (){
12                 var selfParent = $(this).parent();
13                 selfParent.css('border','solid 1px #CCCCCC');
14                 selfParent.find('span').eq(0).css('display','none');
15                 selfParent.find('span').eq(1).css('background-position','-513px -55px');
16                 $('.information').html('');
17             }                  
18         );
19         $('.register-input-area-share input').focusout(
20             function (){
21                 var selfParent = $(this).parent();
22                 selfParent.css('border','solid 1px #EEEEEE');
23                 if($(this).val()==''){
24                     selfParent.find('span').eq(0).css('display','block');}
25             }                  
26         );
27         
28         $('#email').focusout(
29             function(){
30                 if($(this).val()!=''){
31                     if(checkEmail($(this).val())){
32                         $(this).next().css('background-position','-513px 6px');
33                         //$('.information').html('');
34                     }
35                     else{
36                         $(this).next().css('background-position','-513px -25px');
37                         $('.information').html('邮件格式不正确,请查验。');
38                     }
39                 }
40             }
41         );
42         
43         $('#password').focusout(
44             function(){
45                 if($(this).val()!=''){
46                     if(checkPwd($(this).val())){
47                         $(this).next().css('background-position','-513px 6px');
48                         //$('.information').html('成功');
49                     }
50                     else{
51                         $(this).next().css('background-position','-513px -25px');
52                         $('.information').html('请输入6-16位的数字、字母、下划线。');
53                     }
54                 }
55             }
56         );
57         $('#repassword').focusout(
58             function(){
59                 if($(this).val()!=''){
60                     if($(this).val()==$('#password').val()){
61                         $(this).next().css('background-position','-513px 6px');
62                         //$('.information').html('');
63                     }
64                     else{
65                         $(this).next().css('background-position','-513px -25px');
66                         $('.information').html('两次密码输入不同。');
67                     }
68                 }
69             }
70         );
71     });

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

 

 1 function checkEmail(emailText){
 2     var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
 3     return emailRegExp.test(emailText);
 4 }
 5 function checkPwd(pwdText){
 6     var pwdRegExp = /^[\S]{6,16}$/;
 7     return pwdRegExp.test(pwdText);
 8 }
 9 
10 function registerStepOne(){
11     var inputs = $('.register-input-area-share input');
12     //email
13     var emailArgument = new HelpArgumentObj();
14     emailArgument.fnCheck = function(){
15         if(!checkEmail(inputs.eq(0).val())){//格式非法
16             emailArgument.bgImgPosition = '-513px -25px';
17             emailArgument.pointWords = '您输入的邮箱格式有误';
18         }
19         else if(!true){//邮箱重名查验(接口预留)
20             emailArgument.bgImgPosition = '-513px -25px';
21             emailArgument.pointWords = '您的邮件名已经被注册';
22         }
23         else{//验证通过
24             emailArgument.bgImgPosition = '-513px 6px';
25             emailArgument.pointWords = '';
26         }        
27     }
28     var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
29     inputs.eq(0).focus(emailFactoryFocus.fnFocus);
30     inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
31     
32     //pwd
33     var pwdArgument = new HelpArgumentObj();
34     pwdArgument.fnCheck = function(){
35         if(!checkPwd(inputs.eq(1).val())){//格式非法
36             pwdArgument.bgImgPosition = '-513px -25px';
37             pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
38         }
39         else{//验证通过
40             pwdArgument.bgImgPosition = '-513px 6px';
41             pwdArgument.pointWords = '';
42         }        
43     }
44     var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
45     inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
46     inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
47     
48     //rePwd
49     var rePwdArgument = new HelpArgumentObj();
50     rePwdArgument.fnCheck = function(){
51         if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
52             rePwdArgument.bgImgPosition = '-513px -25px';
53             rePwdArgument.pointWords = '两次密码输入不同';
54         }
55         else{//验证通过
56             rePwdArgument.bgImgPosition = '-513px 6px';
57             rePwdArgument.pointWords = '';
58         }        
59     }
60     var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
61     inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
62     inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
63 }
64 
65 function HelpArgumentObj(){
66     this.fnCheck;
67     this.bgImgPosition = null;
68     this.pointWords = null;
69 }
70 
71 function FactoryFocus(jqObj,helpArgumentObj){
72     this.fnFocus = function(){
73         var selfParent = jqObj.parent();
74         selfParent.css('border','solid 1px #CCCCCC');
75         selfParent.find('span').eq(0).css('display','none');
76         selfParent.find('span').eq(1).css('background-position','-513px -55px');
77         $('.information').html('');    
78     };
79     this.fnFocusout = function(){
81         var selfParent = jqObj.parent();
82         selfParent.css('border','solid 1px #EEEEEE');
83         if(jqObj.val()==''){
84             //显示标示文字,如:邮箱,密码
85             selfParent.find('span').eq(0).css('display','block');        
86         }else{
87             helpArgumentObj.fnCheck();
88             jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
89             $('.information').html(helpArgumentObj.pointWords);
90         }        
91     };
92 }
93 
94 $(document).ready(registerStepOne());

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

好,我们再加入命名空间的概念:

  1 function createNamespace(ns){
  2     if(typeof(ns)!="string"){
  3         throw new Error("namespace must be a string")
  4         return;
  5     }
  6     ns=ns.split(".");
  7     var o,ni;
  8     for(var i=0,len=ns.length;i<len,ni=ns[i];i++){
  9         try{
 10             o = (o?(o[ni]=o[ni]||{}):(eval(ni+"="+ni+"||{}")));
 11         }
 12         catch(e){
 13             o=eval(ni+"={}");
 14         }
 15     }
 16 }
 17 
 18 createNamespace("com.cheyoushuo.register");
 19 com.cheyoushuo.register.StepOne = (new Register()).stepOne;
 20 
 21 function Register(){    
 22     this.stepOne = function(){
 23         var inputs = $('.register-input-area-share input');
 24         emailFocus(inputs);
 25         pwdFocus(inputs);
 26         rePwdFocus(inputs);        
 27     }
 28 
 29     //email
 30     function emailFocus(inputs){    
 31         var emailArgument = new HelpArgumentObj();
 32         emailArgument.fnCheck = function(){
 33             if(!checkEmail(inputs.eq(0).val())){//格式非法
 34                 emailArgument.bgImgPosition = '-513px -25px';
 35                 emailArgument.pointWords = '您输入的邮箱格式有误';
 36             }
 37             else if(!true){//邮箱重名查验(接口预留)
 38                 emailArgument.bgImgPosition = '-513px -25px';
 39                 emailArgument.pointWords = '您的邮件名已经被注册';
 40             }
 41             else{//验证通过
 42                 emailArgument.bgImgPosition = '-513px 6px';
 43                 emailArgument.pointWords = '';
 44             }        
 45         }
 46         var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
 47         inputs.eq(0).focus(emailFactoryFocus.fnFocus);
 48         inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
 49     }
 50     
 51     //pwd
 52     function pwdFocus(inputs){
 53         var pwdArgument = new HelpArgumentObj();
 54         pwdArgument.fnCheck = function(){
 55             if(!checkPwd(inputs.eq(1).val())){//格式非法
 56                 pwdArgument.bgImgPosition = '-513px -25px';
 57                 pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
 58             }
 59             else{//验证通过
 60                 pwdArgument.bgImgPosition = '-513px 6px';
 61                 pwdArgument.pointWords = '';
 62             }        
 63         }
 64         var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
 65         inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
 66         inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
 67     }
 68     
 69     //rePwd
 70     function rePwdFocus(inputs){
 71         var rePwdArgument = new HelpArgumentObj();
 72         rePwdArgument.fnCheck = function(){
 73             if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
 74                 rePwdArgument.bgImgPosition = '-513px -25px';
 75                 rePwdArgument.pointWords = '两次密码输入不同';
 76             }
 77             else{//验证通过
 78                 rePwdArgument.bgImgPosition = '-513px 6px';
 79                 rePwdArgument.pointWords = '';
 80             }        
 81         }
 82         var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
 83         inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
 84         inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
 85     }
 86     
 87     function HelpArgumentObj(){
 88         this.fnCheck;
 89         this.bgImgPosition = null;
 90         this.pointWords = null;
 91     }
 92 
 93     function FactoryFocus(jqObj,helpArgumentObj){
 94         this.fnFocus = function(){
 95             var selfParent = jqObj.parent();
 96             selfParent.css('border','solid 1px #CCCCCC');
 97             selfParent.find('span').eq(0).css('display','none');
 98             selfParent.find('span').eq(1).css('background-position','-513px -55px');
 99             $('.information').html('');    
100         };
101         this.fnFocusout = function(){
102             //console.log("asdfasdfdasfdasfdfs");
103             var selfParent = jqObj.parent();
104             selfParent.css('border','solid 1px #EEEEEE');
105             if(jqObj.val()==''){
106                 //显示标示文字,如:邮箱,密码
107                 selfParent.find('span').eq(0).css('display','block');        
108             }else{
109                 helpArgumentObj.fnCheck();
110                 jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
111                 $('.information').html(helpArgumentObj.pointWords);
112             }        
113         };
114     }
115     
116     function checkEmail(emailText){
117         var emailRegExp = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;
118         return emailRegExp.test(emailText);
119     }
120     
121     function checkPwd(pwdText){
122         var pwdRegExp = /^[\S]{6,16}$/;
123         return pwdRegExp.test(pwdText);
124     }
125 }

再在页面中调用一下就OK

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

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

View Code
  1 createNamespace("com.cheyoushuo.register");
  2 
  3 (function (ns){    
  4      var step1 = function(){
  5         var inputs = $('#register-steptOne .register-input-area-share input');
  6         emailFocus(inputs);
  7         pwdFocus(inputs);
  8         rePwdFocus(inputs);
  9     }
 10     
 11     var step2 = function(){}
 12 
 13     var login = function(){
 14         var inputs = $('#register-login .register-input-area-share input');
 15         loginFocus(inputs);
 16     }
 17 
 18     //email
 19     function emailFocus(inputs){    
 20         var emailArgument = new HelpArgumentObj();
 21         emailArgument.fnCheck = function(){
 22             if(!isAvailableEmail(inputs.eq(0).val())){//格式非法
 23                 emailArgument.bgImgPosition = '-513px -25px';
 24                 emailArgument.pointWords = '您输入的邮箱格式有误';
 25             }
 26             else if(!true){//邮箱重名查验(接口预留)
 27                 emailArgument.bgImgPosition = '-513px -25px';
 28                 emailArgument.pointWords = '您的邮件名已经被注册';
 29             }
 30             else{//验证通过
 31                 emailArgument.bgImgPosition = '-513px 6px';
 32                 emailArgument.pointWords = '';
 33             }        
 34         }
 35         var emailFactoryFocus = new FactoryFocus(inputs.eq(0),emailArgument);
 36         inputs.eq(0).focus(emailFactoryFocus.fnFocus);
 37         inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
 38     }
 39     
 40     //pwd
 41     function pwdFocus(inputs){
 42         var pwdArgument = new HelpArgumentObj();
 43         pwdArgument.fnCheck = function(){
 44             if(!isAvailablePwd(inputs.eq(1).val())){//格式非法
 45                 pwdArgument.bgImgPosition = '-513px -25px';
 46                 pwdArgument.pointWords = '请输入6-16位的数字、字母、下划线';
 47             }
 48             else{//验证通过
 49                 pwdArgument.bgImgPosition = '-513px 6px';
 50                 pwdArgument.pointWords = '';
 51             }                
 52         }
 53         var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),pwdArgument);
 54         inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
 55         inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
 56     }
 57     
 58     //rePwd
 59     function rePwdFocus(inputs){
 60         var rePwdArgument = new HelpArgumentObj();
 61         rePwdArgument.fnCheck = function(){
 62             if(inputs.eq(1).val()!=inputs.eq(2).val()){//格式非法
 63                 rePwdArgument.bgImgPosition = '-513px -25px';
 64                 rePwdArgument.pointWords = '两次密码输入不同';
 65             }
 66             else{//验证通过
 67                 rePwdArgument.bgImgPosition = '-513px 6px';
 68                 rePwdArgument.pointWords = '';
 69             }        
 70         }
 71         var rePwdFactoryFocus = new FactoryFocus(inputs.eq(2),rePwdArgument);
 72         inputs.eq(2).focus(rePwdFactoryFocus.fnFocus);
 73         inputs.eq(2).focusout(rePwdFactoryFocus.fnFocusout);
 74     }
 75 
 76     //login
 77     function loginFocus(inputs){
 78         var loginArgument = new HelpArgumentObj();
 79         loginArgument.fnCheck = function(){};
 80         var emailFactoryFocus = new FactoryFocus(inputs.eq(0),loginArgument);
 81         inputs.eq(0).focus(emailFactoryFocus.fnFocus);
 82         inputs.eq(0).focusout(emailFactoryFocus.fnFocusout);
 83         var pwdFactoryFocus = new FactoryFocus(inputs.eq(1),loginArgument);
 84         inputs.eq(1).focus(pwdFactoryFocus.fnFocus);
 85         inputs.eq(1).focusout(pwdFactoryFocus.fnFocusout);
 86     }
 87 
 88     function HelpArgumentObj(){
 89         this.fnCheck = function(){};
 90         this.bgImgPosition = null;
 91         this.pointWords = null;
 92     }
 93 
 94     function FactoryFocus(jqObj,helpArgumentObj){
 95         this.fnFocus = function(){
 96             var selfParent = jqObj.parent();
 97             selfParent.css('border','solid 1px #CCCCCC');
 98             selfParent.find('span').eq(0).css('display','none');
 99             selfParent.find('span').eq(1).css('background-position','-513px -55px');
100             $('.information').html('');    
101         };
102         this.fnFocusout = function(){
103             //console.log("asdfasdfdasfdasfdfs");
104             var selfParent = jqObj.parent();
105             selfParent.css('border','solid 1px #EEEEEE');
106             if(jqObj.val()==''){
107                 //显示标示文字,如:邮箱,密码
108                 selfParent.find('span').eq(0).css('display','block');        
109             }else{
110                 helpArgumentObj.fnCheck();
111                 jqObj.next().css('background-position',helpArgumentObj.bgImgPosition);
112                 $('.information').html(helpArgumentObj.pointWords);
113             }        
114         };
115     }  
116     
117     //外露方法
118     ns.step1 = step1;
119     ns.stept2 = step2;
120     ns.login = login;
121 })(com.cheyoushuo.register);

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

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

posted @ 2012-12-15 11:45  龙则  阅读(759)  评论(0编辑  收藏  举报