0

繰り返しを見た後、コードを最適化しようとしています。

コードは次のとおりです。

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');

この領域: $change: $value - スクリプトで問題が発生している場所です。私はこれを行うことができますか？それらは文字列として入ってくるべきですか？

4

2 に答える 2

2 
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);
        } 
    );
}
于 2012-08-17T01:56:41.143 に答える
1

変数名をリテラルで動的に設定しようとしていると思います。JavaScriptでは、これを次のように行うことができますobjectname["variablename"] = value

ここで実際にできることは 2 つあります。

  1. animate() の第一引数に渡すリテラルは引き出せる
  2. $container の jQuery 評価は、取り出して一度実行し、再利用して速度を上げることができます。

2 を時期尚早の最適化の例と呼ぶ人もいるかもしれませんが、とにかくコードが読みやすくなると思います。

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);
        } 
    );
}
于 2012-08-17T02:07:49.693 に答える