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.nextElementSibling 16 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.nextElementSibling 30 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; } };
最终代码变得简洁易于维护了,看着也赏心悦目了,嘎嘎.......