视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
if...else..的错误用法
2020-11-27 20:31:43 责编:小采
文档

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

代码你就明白了:

document.getElementsByClassName('eButton')[0].onclick=function(){
 var checked=document.getElementsByClassName('checked');
 var eButton=document.getElementsByClassName('eButton')[0];
 if(checked.length==0){
 alert('请选择要编辑的联系人!');
 }else{
 if(checked.length >2){
 alert('每次编辑只能选择一条记录');
 }else{
 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();
 }else{
 if(checked.length ==2){
 alert('每次编辑只能选择一条记录');
 }else{
 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();
 }
 }
 }
 }
 };

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

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

document.getElementsByClassName('eButton')[0].onclick=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].onclick=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;
 }
 };

下载本文
显示全文
专题