재사용 가능한 Jquery 함수 문제

Question

몇 번 반복해서 코드를 최적화하려고합니다. 내가 스크립트에 문제가 발생하고있는 곳입니다 - $ 값 :

function show($div, $change, $value){ 
    var $container = "#" + $div; 
    var $class = $div + "-" + "hidden"; 

    //alert($class + $container + $change + $value); 

    $($container).addClass($class); 
    $($container).animate({ 
     $change: $value 
    }, 1000, function(){ 
      $($container).removeClass($class); 
     } 
    ); 
} 

show('header', 'top', '0'); 
show('nav', 'left', '0'); 
show('wrapper', 'opacity', '0'); 

이 분야 : $ 변화가 여기에

는 코드입니다. 내가 할 수 있을까? 그들이 문자열로 들어가야합니까?

Answer 1

function show($div, $change, $value){ 
    var $container = "#" + $div; 
    var $class = $div + "-" + "hidden"; 

    //alert($class + $container + $change + $value); 

    $($container).addClass($class); 

    var animation = {}; // create another object 
    animation[$change] = $value; // and set its property 

    $($container).animate(animation, 1000, function(){ 
      $($container).removeClass($class); 
     } 
    ); 
} 

Answer 2

저는 리터럴에 변수 이름을 동적으로 설정하려고한다고 생각합니다. 자바 스크립트에서, 당신은 너무 objectname["variablename"] = value

같이이 작업을 수행 할 수 있습니다 당신이 여기에서 할 수있는 두 가지 사실이 있습니다

1. 문자 적 ​​당신은 애니메이션 (의 첫 번째 인수로 전달되는)는
을 뽑아 될 수있다
2. $ container의 jQuery 평가는 추출하고, 한 번만 수행하고, 재사용하여 작업 속도를 높일 수 있습니다.

일부는 조기 최적화의 예라고 할 수 있지만 어쨌든 코드가 더 읽기 쉽다고 생각합니다.

function show($div, $change, $value){ 

    var $container = "#" + $div; 
    var $class = $div + "-" + "hidden"; 

    //alert($class + $container + $change + $value); 

    var animation = {}; //declare a literal 
    animation[$change] = $value; //create a name-value pair based on args 

    var jqContainer = $($container); //extract multiple jQuery evaluations 
    jqContainer.addClass($class); 
    jqContainer.animate(animation, 1000, function(){ 
      jqContainer.removeClass($class); 
     } 
    ); 
}