javascript - dry - nested if 문

Question

코딩에 익숙하지 않지만, DRY에 대해 읽고 있었으므로 자신을 반복하지 마십시오.

DRY 접근 방식에 맞지 않는 JavaScript if/else 문이 있지만 내용을 반복하지 않도록 JavaScript if/else 문을 작성하는 방법을 연습 할 수 없습니다.

나보다 똑똑한 사람이 나를 보여줄 수 있기를 바란다.

여기 내 코드입니다 :

{% if user.get_profile.subscription_category == '00' %} 

     $('#id_name_details_prefix_title').addClass('kmw-disabled'); 

     $('#id_name_details_first_name').addClass('kmw-disabled'); 

     $('#id_name_details_middle_name').addClass('kmw-disabled'); 

     $('#id_name_details_last_name').addClass('kmw-disabled'); 

     $('#id_name_details_suffix_title').addClass('kmw-disabled'); 

    {% else %} 

     {% if user.get_profile.display_virtual_keyboard %} 

      $('#id_name_details_prefix_title').removeClass('kmw-disabled'); 

      $('#id_name_details_first_name').removeClass('kmw-disabled'); 

      $('#id_name_details_middle_name').removeClass('kmw-disabled'); 

      $('#id_name_details_last_name').removeClass('kmw-disabled'); 

      $('#id_name_details_suffix_title').removeClass('kmw-disabled'); 

     {% else %} 

      $('#id_name_details_prefix_title').addClass('kmw-disabled'); 

      $('#id_name_details_first_name').addClass('kmw-disabled'); 

      $('#id_name_details_middle_name').addClass('kmw-disabled'); 

      $('#id_name_details_last_name').addClass('kmw-disabled'); 

      $('#id_name_details_suffix_title').addClass('kmw-disabled'); 

     {% endif %} 

    {% endif %} 

if 문 2의 다른 반복되는 경우 1의 내용 - 내가 한 번만 반복 내용을 작성해야 할 것으로 기대하고있다.

Answer 1

당신은 무슨 일이 일어나고 있는지 분리 함수로 클래스 추가/제거 다음

$(selectors.join(',')).addClass('kmw-disabled') 

Answer 2

브레이크 그것을

var selectors = [#id_name_details_prefix_title', '#id_name_details_first_name' ...]; 

배열에 선택기를 넣을 수 있습니다.

{% if something %} 
    functionThathAddsClass(); 
{% else %} 
    {% if something_else %} 
     functionThatRemovesClass(); 
    {% else %} 
     functionThathAddsClass(); 
    {% endif %} 
{% endif %} 

이 경우 두 개의 전역 함수를 만드는 문제가 발생하지만 다른 문제입니다.

제가 개인적으로 부르는 CSS Guards를 만들고 싶습니다. CSS Guard는 기본적으로 DOM에서 pokes 및 prods하는 기능을 가진 객체입니다.

var NameDetailsGuard = { 
    functionThathAddsClass = function() { 
     $('#id_name_details_prefix_title').addClass('kmw-disabled'); 
     $('#id_name_details_first_name').addClass('kmw-disabled'); 
    }, 
    functionThatRemovesClass = function() { 
     $('#id_name_details_prefix_title').removeClass('kmw-disabled'); 
     $('#id_name_details_first_name').removeClass('kmw-disabled'); 
    } 
}; 

그리고 당신처럼 사용이

NameDetailsGuard.functionThatAddsClass(); 

이에 혜택이 개념을 확장 할 경우이 객체 내에서 간단한 DOM 노드 캐싱을하고 그래서 대신에 대한 질의 시작할 수 있다는 것입니다 추가 선택기를 사용하면 언제든지 참조를 유지하고이를 조작 할 수 있습니다.

Answer 3

HTML 마크 업에서 필요한 요소에 클래스를 추가하고 해당 클래스를 선택할 수 있습니다.

{% if user.get_profile.subscription_category == '00' %} 

    $('.category-zero').addClass('kmw-disabled'); 

{% else %} 

    {% if user.get_profile.display_virtual_keyboard %} 

     $('.virtual-keyboard').removeClass('kmw-disabled'); 

    {% else %} 

     $('.virtual-keyboard').addClass('kmw-disabled'); 

    {% endif %} 

{% endif %}