D.R.Y.를 적용하는 데 문제가 있습니다. 내 jQuery에

Question

내 코드를 단순화하는 데 도움이 필요합니다. D.R.Y를 적용하려고합니다. 내가 할 수있는 한 최선의 원칙과 나는 문제가있다. 어떤 도움이라도 대단히 감사하겠습니다.

$('document').ready(function(){ 
    'use strict'; 

    var body = $('body'); 

    body.find('#button1').click(function(){ 
     body.find('#item1').add('#item2').fadeOut(); 
     body.find('#item3').fadeIn(); 
     body.find('#button1').removeClass('btn-info').addClass('btn-default'); 
     body.find('#button2').removeClass('btn-default').addClass('btn-info'); 
    }); 

    body.find('#button2').click(function(){ 
     body.find('#item3').fadeOut(); 
     body.find('#item1').add('#item2').fadeIn(); 
     body.find('#button2').removeClass('btn-info').addClass('btn-default'); 
     body.find('#button1').removeClass('btn-default').addClass('btn-info'); 
    }); 
}); 

감사합니다.

Answer 1

, 당신은 또한

function makeInfo(id) { 
    $(id).removeClass('btn-default').addClass('btn-info'); 
} 
function makeDefault(id) { 
    $(id).removeClass('btn-info').addClass('btn-default'); 
} 

$('document').ready(function(){ 
    'use strict'; 

    $('#button1').click(function(){ 
     $('#item1').add('#item2').fadeOut(); 
     $('#item3').fadeIn(); 
     makeInfo('#button2'); 
     makeDefault(this);    
    }); 

    $('#button2').click(function(){ 
     $('#item3').fadeOut(); 
     $('#item1').add('#item2').fadeIn(); 
     makeInfo('#button1'); 
     makeDefault(this);    
    }); 
}); 

Answer 2

은 적용 할 수 DRY의 하나 개의 항목이 클래스 부분임을 나타납니다

//add event bound to the click of a element with class btn-default 
body.on('click', '.btn-default', function() { 
    //remove btn-default from this class and add btn-info 
    $(this).removeClass('btn-default').addClass('btn-info'); 
    //remove btn-info from this class and add btn-default 
    $('.btn-info').removeClass('btn-info').addClass('btn-default'); 
}); 

전체 코드 만들기 :

$('document').ready(function(){ 
    'use strict'; 

    var body = $('body'); 

    //add event bound to the click of a element with class btn-default 
    body.on('click', '.btn-default', function() { 
     //remove btn-default from this class and add btn-info 
     $(this).removeClass('btn-default').addClass('btn-info'); 
     //remove btn-info from this class and add btn-default 
     $('.btn-info').removeClass('btn-info').addClass('btn-default'); 
    }); 

    body.find('#button1').click(function(){ 
     body.find('#item1').add('#item2').fadeOut(); 
     body.find('#item3').fadeIn(); 
    }); 

    body.find('#button2').click(function(){ 
     body.find('#item3').fadeOut(); 
     body.find('#item1').add('#item2').fadeIn(); 
    }); 
}); 

Answer 3

는, 불필요한 반복이 없습니다를하지만 필요가있다 암호. 예를 들어 $('body') 및 .find()에서 다음 태그를 시작할 필요가 없습니다.

body.find('#button1').click(-- can be -- $('#button1').click(

body.find('#item1').add('#item2').fadeOut(); == $('#item1').add('#item2').fadeOut(); 

body.find('#item3').fadeIn(); == $('#item3').fadeIn(); 

등

---

: 그것은

(2) 이러한 변경을위한 필요 없음 -

가

(1) var body = $('body'); 제거 :

대신,이 패턴을 따른다

업데이트 : DOM 검색을 줄이려면 전체 선택기를 캐시하십시오.

$('document').ready(function(){ 
    'use strict'; 
    var $i1 = $('#item1'); 
    var $i3 = $('#item3') 
    var $b1 = $('#button1'); 
    var $b2 = $('#button2'); 

    $b1.click(function(){ 
     $i1.add('#item2').fadeOut(); 
     $i3.fadeIn(); 
     $b1.removeClass('btn-info').addClass('btn-default'); 
     $b2.removeClass('btn-default').addClass('btn-info'); 
    }); 

    $b2.click(function(){ 
     $i3.fadeOut(); 
     $i1.add('#item2').fadeIn(); 
     $b2.removeClass('btn-info').addClass('btn-default'); 
     $b1.removeClass('btn-default').addClass('btn-info'); 
    }); 
}); 

Answer 4

당신은 플래그를 받아 수행하는 하나의 함수 ('toggleElements'를 말한다)를 만들 수있는 모든 조치는 플래그의 값에 따라 다음이 작업을 수행 할 필수 : ​​

body.find('#button1').click(function() { 
    toggleElements(true); 
}); 

Answer 5

난 못해 코드의 문제를 확인하고 변경하면 가독성이 향상되지 않습니다. 항상 이 아닙니다. "할 수있는 모든 작업을 수행하십시오. 단 한 줄의 코드를 반복하지 마십시오." - 최적을 찾고 필요에 맞게 디자인해야합니다.

그러나, 몇 가지 가능한 개선이있다 : 당신의 요소 ID가 고유 경우

1. 이 왜 몸을 사용합니까? 선택기를 사용하기 만하면됩니다.

2. .add 대신 선택기를 사용할 수 있습니다. 같은

뭔가 :

$('document').ready(function(){ 
    'use strict'; 

    $('#button1').click(function(){ 
     $('#item1, #item2').fadeOut(); 
     $('#item3').fadeIn(); 
     $('#button1').removeClass('btn-info').addClass('btn-default'); 
     $('#button2').removeClass('btn-default').addClass('btn-info'); 
    }); 

    $('#button2').click(function(){ 
     $('#item3').fadeOut(); 
     $('#item1,#item2').fadeIn(); 
     $('#button2').removeClass('btn-info').addClass('btn-default'); 
     $('#button1').removeClass('btn-default').addClass('btn-info'); 
    }); 
}); 

또 다른 옵션은 부울 인수와 함께 하나 개의 기능으로이 기능을 결합하거나 CSS 클래스 및 전환을 사용할 수 있습니다. 제가 말했듯이, 제 의견으로는, 4 줄의 코드는 "최적화"되지 않는 것이 좋습니다. 함수가 커지면 최적화하십시오.단지 $ 고유 한 요소에 액세스를 사용하는 것 외에도

Answer 6

, 재사용 및 가독성 개선으로 다음과 같이 당신은 이런 식으로 뭔가를 시도 할 수 있습니다 당신이있는 항목을 정의하는 경우 각 버튼의 data 속성을 사용하여 표시됩니다. 이렇게하면 더 많은 단추 또는 항목을 추가해야 할 때 작업이 덜 필요하고 모든 단추/항목 조합에 사용할 수 있다는 이점이 있습니다.

jsFiddle

HTML :

<input type="button" id="button1" class="btn-info" value="Button 1" data-show="#item1" /> 
<input type="button" id="button2" class="btn-default" value="Button 2" data-show="#item2" /> 
<input type="button" id="button3" class="btn-default" value="Button 3" data-show="#item2, #item3" /> 

<div id="item1" class="itemClass">Item 1</div> 
<div id="item2" class="itemClass">Item 2</div> 
<div id="item3" class="itemClass">Item 3</div> 

JS :

$('body').on('click', '.btn-default', function() { 
    var show = $(this).data('show'); 
    $('.itemClass').not(show).fadeOut(); 
    $(show).fadeIn(); 

    $('.btn-info').addClass('btn-default').removeClass('btn-info'); 
    $(this).addClass('btn-info').removeClass('btn-default'); 
});