if...else..的錯誤用法

1.最近在寫js代碼完成一個前段DOM操作的函數時，自己錯誤的使用了if..else..控制體。為什么是錯誤的呢？看看我的

代碼你就明白了：

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

最終代碼變得簡潔易于維護了，看著也賞心悅目了，嘎嘎.......