if...else..的错误用法-白红宇

if...else..的错误用法

阅读量：4308 次

发布时间：2019-06-06

本文共 5913 字，大约阅读时间需要 19 分钟。

1.最近在写js代码完成一个前段DOM操作的函数时，自己错误的使用了if..else..控制体。为什么是错误的呢？看看我的

代码你就明白了：

1  document.getElementsByClassName('eButton')[0].οnclick=function(){ 2    var checked=document.getElementsByClassName('checked'); 3      var eButton=document.getElementsByClassName('eButton')[0]; 4    if(checked.length==0){ 5     alert('请选择要编辑的联系人！'); 6      }else{ 7          if(checked.length >2){ 8                 alert('每次编辑只能选择一条记录'); 9          }else{10                 if(checked[0].childNodes[0].id=='check-all'){11                     var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;12                     var name=checked[1].parentNode.nextElementSibling.innerHTML;13                     document.getElementsByClassName('edit_contact_name')[0].value=name;14                     document.getElementsByClassName('edit_contact_email')[0].value=email;15                     var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSibling16                     if(group.innerHTML !="default"){17                         var group_id=group.getAttribute('group_id')18                         document.getElementsByClassName('edit_contact_group_name')[0].value=id;19                     }20                     $('#edit_contact').modal();21                 }else{22                     if(checked.length ==2){23                         alert('每次编辑只能选择一条记录');24                     }else{25                         var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;26                         var name=checked[0].parentNode.nextElementSibling.innerHTML;27                         document.getElementsByClassName('edit_contact_name')[0].value=name;28                         document.getElementsByClassName('edit_contact_email')[0].value=email;29                         var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling30                         if(group.innerHTML !="default"){31                             var group_id=group.getAttribute('group_id')32                             document.getElementsByClassName('edit_contact_group_name')[0].value=id;33                         }34                         $('#edit_contact').modal();35                     }36                 }37        }38    }39     };

哈哈，看到自己写的这些代码，突然感觉这个函数一定很厉害。整个函数被if..else..搞得乱七八糟的，开始思考为什么当时要用if..else

，其实当时只是考虑到这个逻辑中有大概三四种不同的条件，要执行三四种运算，而且每次只能执行一种情况（执行完就到函数结尾），这些就是程序的执行流程。有了这个流程，自己开始考虑怎么把代码改改，改的一目了然，改的易于维护。这个时候自己自然而言的想到了"return"这个关键字，使用”return“后就有了下面的代码：

document.getElementsByClassName('eButton')[0].οnclick=function(){  var checked=document.getElementsByClassName('checked');    var eButton=document.getElementsByClassName('eButton')[0];  if(checked.length==0){    alert('请选择要编辑的联系人！');    return;  }  if(checked.length ==1){    var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;    var name=checked[0].parentNode.nextElementSibling.innerHTML;    document.getElementsByClassName('edit_contact_name')[0].value=name;    document.getElementsByClassName('edit_contact_email')[0].value=email;    var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling    if(group.innerHTML !="default"){     var group_id=group.getAttribute('group_id')     document.getElementsByClassName('edit_contact_group_name')[0].value=id;    }      $('#edit_contact').modal();      return;  }  if(checked.length ==2){    if(checked[0].childNodes[0].id=='check-all'){      var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;      var name=checked[1].parentNode.nextElementSibling.innerHTML;      document.getElementsByClassName('edit_contact_name')[0].value=name;      document.getElementsByClassName('edit_contact_email')[0].value=email;      var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSibling      if(group.innerHTML !="default"){        var group_id=group.getAttribute('group_id')        document.getElementsByClassName('edit_contact_group_name')[0].value=id;      }      $('#edit_contact').modal();      return;    }    alert('每次编辑只能选择一条记录');    return;  }  if(checked.length >2){    alert('每次编辑只能选择一条记录');  }};

下面这些条件罗列起来代码就清晰多了：

1.checked.length ==0

2.checked.length ==1

3.checked.length ==2

4.checked.length > 2

接下来把重复的代码封装到函数中（去除重复）得到代码：

function get_edit_modal_content(node_num,checked){    var email=checked[node_num].parentNode.nextElementSibling.nextElementSibling.innerHTML;    var name=checked[node_num].parentNode.nextElementSibling.innerHTML;        var contact_id=checked[node_num].parentNode.nextElementSibling.getAttribute('contact_id')    var regular_name=/[\u4E00-\u9FA5\uF900-\uFA2D\w]*/;    name=regular_name.exec(name)[0];    document.getElementsByClassName('edit_contact_id')[0].value=contact_id;    document.getElementsByClassName('edit_contact_name')[0].value=name;    document.getElementsByClassName('edit_contact_email')[0].value=email;    var group=checked[node_num].parentNode.nextElementSibling.nextElementSibling.nextElementSibling    if(group.innerHTML !="default"){     var group_id=group.getAttribute('group_id')     document.getElementsByClassName('edit_contact_group_name')[0].value=group_id;   } }  document.getElementsByClassName('eButton')[0].οnclick=function(){    var checked=document.getElementsByClassName('checked');    if(checked.length==0){      alert('请选择要编辑的联系人！');      return;    }    if(checked.length==1){      get_edit_modal_content(0,checked);      $('#edit_contact').modal();      return;    }    if(checked.length==2){      if(checked[0].childNodes[0].id=='check-all'){        get_edit_modal_content(1,checked);        $('#edit_contact').modal();        return;      }      alert('每次编辑只能选择一条记录');      return;    }    if(checked.length >2){      alert('每次编辑只能选择一条记录');      return;    }  };

最终代码变得简洁易于维护了，看着也赏心悦目了，嘎嘎.......

转载于:https://www.cnblogs.com/haohaodehao/p/6026667.html

你可能感兴趣的文章