if...else..의 잘못된 사용법

1. 최근 이전 DOM을 동작시키는 함수를 완성하기 위해 js 코드를 작성할 때 실수로 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

를 사용해야 하는지 고민하기 시작했습니다. 사실 그냥 3~4개 정도 있다고 생각했어요. 실행해야 하는 이 논리의 조건 세 가지 또는 네 가지 종류의 작업과 한 번에 하나의 상황만 실행할 수 있습니다(실행은 함수의 끝으로 이동합니다). 이것이 프로그램의 실행 흐름입니다. 이 과정을 거치면서 한눈에 명확하고 유지관리가 쉽도록 코드를 어떻게 변경해야 할지 고민하기 시작했습니다. 이때 자연스럽게 '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;
    }
  };