-5

以下は、簡単なアニメーションを作成するために私が書いたjQueryコードです。しかし、私はそれにとても慣れていないので、それを凝縮してチュートリアルに困惑する方法がわかりません！

<!-- Login Form Div Animation -->
<script type="text/javascript">
$(document).ready(function() {
    $('#button-active').hide();
    if ($("#LoginButton").hasClass("inactive")) {
            $("#TopLoginForm").hide();
    } else {
            $("#TopLoginForm").show();
    }
    $("#LoginButton").click( function() {
        if ($("#LoginButton").hasClass("inactive")) {
            $("#LoginButton").animate({ 
                marginTop: "-40px"
                }, 500 );
            $("#button-inactive").animate({ 
                opacity: "0"
                }, 500 );
            $('#button-inactive').remove();
            $('#button-active').hide();
            $('#button-active').delay(30).fadeIn(1000);
            $('#LoginWelcome').delay(0).fadeOut(1000);
            $('#TopLoginForm').delay(800).fadeIn(1000);
            $("#LoginButton").addClass("button");
            $("#LoginButton.button").click( function() {
                document.forms["LoginForm"].submit();
            });
         }
    }); 
});
</script>
<!-- End Login Form Div Animation -->

ライブコードは、ページ上部のwww.trainingthemlive.co.uk/tempで確認できます。

4

4 に答える 4

1

jQueryの最適化に関する重要な点の1つは、jQuery関数が実際に関数jQuery()としてエイリアスされることが多いことを知っていることです。$()

つまり、usingは、IDが#some_idのHTML要素を検索$('#some_id')する関数を実際に呼び出しているということです。DOMで何かを探すということは、ツリーをトラバースし、ノードのプロパティをチェック/比較することを意味するため、これはパフォーマンスの面でコストがかかります。

（jQueryを使用して）DOMからHTML要素をフェッチし、参照を変数に保存する必要があります。そして、スクリプトの後半で、同じ変数を使用してそのHTML要素を参照し、同じ要素を再度探してDOMをトラバースしないようにします。

（@meloncholyによって提案された） jQueryのmethod chainingアプローチを使用することにより、変数を定義するのと同じ利点に加えて、よりコンパクトな構文を得ることができます。これは、後で参照する必要のないオブジェクトを操作する場合に便利です。そのため、必要なすべての操作を積み重ねるだけです。

例は次のとおりです。

var some_object = $('#some_id');
some_object.hide();
if (some_object.hasClass('some_class')) {
    ...

このサイズのスクリプトのパフォーマンスが大幅に向上するとは言えません。数百行のjQueryコードがすべてjQuery()関数を悪用し、ツリーに数百のHTML要素があり、次に示したようにjQueryコードをリファクタリングした場合、スピードアップが得られます。

于 2012-06-23T22:23:47.520 に答える
0

私ができる最善のこと。繰り返し機能がたくさんありました

$(document).ready(function() {
    //Start hidden
    $('#button-active').hide();
    $("#TopLoginForm").hide();

    // clicking "login"
    $("#LoginButton").click( function() {
    if ($("#LoginButton").hasClass("inactive")) {
        $("#LoginButton").animate({ 
            marginTop: "-40px"
            }, 500 );
        $('#LoginWelcome').fadeOut(1000);
        $('#button-active').fadeIn(1000);
        $('#TopLoginForm').fadeIn(1000);
        $("#LoginButton").addClass("button");
        $("#LoginButton.button").click( function() {
            document.forms["LoginForm"].submit();
        });
    }
    }); 
});
于 2012-06-23T22:20:02.747 に答える
0

結果が変更されていないことがわかっている場合は、同じクエリを2回実行しないようにすることができます。jQuery呼び出しの結果をチェーンまたはキャッシュします！それ以外の：

$('#button-active').hide();
$('#button-active').delay(30).fadeIn(1000);

jQueryオブジェクトの連鎖性を使用できます。実際、あなたはすでに2行目でそれを行っています-なぜ余分なステップを踏まないのですか？

$('#button-active').hide().delay(30).fadeIn(1000);

読みやすさのために：

$('#button-active')
    .hide()
    .delay(30)
    .fadeIn(1000);

しかし、それがすべての答えではありません。1つのオブジェクトまたはコレクションに対して大量の処理を順番に実行する必要がある場合、連鎖は簡潔で優れています。button-activeただし、実行中のいくつかの異なるポイントで、などの1つのオブジェクトにアクセスする必要がある場合は、クエリを変数として格納する必要があります。

var $activeButton = $('#button-active'); // a common convention is to use the $ prefix on variables storing jQuery objects, but this is arguable & optional

一緒に、他のいくつかの効率のトリックと一緒に：

;$(document).ready(function() {
    var   inactiveClass     = "inactive"
        , buttonClass       = "button"
        , fadeDuration      = 1000
        , animateDuration   = 500
        , shortDelay        = 30
        , longDelay         = 800

        , loginInactiveButtonAnimateTarget = {
            marginTop: -40
        }
        , inactiveButtonAnimateTarget = {
            opacity: 0
        }

        , loginButtonClickHandler = function() {
            document.forms["LoginForm"].submit() // not modifying this, but if this is the "TopLoginForm" then you could do this simpler
        }

        , $activeButton     = $('#button-active').hide() /* the .hide() method chains, so it returns the button-active object */
        , $loginButton      = $('#LoginButton')
        , $topLoginForm     = $('#TopLoginForm')
        , $loginWelcome     = $('#LoginWelcome')
        , $inactiveButton   = $('#button-inactive')

    if ($loginButton.hasClass(inactiveClass)) {
        $topLoginForm.hide()
    } else {
        $topLoginForm.show()
    }
    $loginButton.click(function() {
        if ($loginButton.hasClass(inactiveClass)) {
            $loginButton.animate(loginnactiveButtonAnimateTarget, animateDuration)
            $inactiveButton.animate(inactiveButtonAnimateTarget, animateDuration).remove()
            $activeButton.hide().delay(shortDelay).fadeIn(fadeDuration)
            $loginWelcome.delay(0).fadeOut(fadeDuration)
            $loginForm.delay(longDelay).fadeIn(fadeDuration)
            $loginButton.addClass(buttonClass).click(loginButtonClickHandler)
        }
    })
});
于 2012-06-23T22:43:52.417 に答える
0

これがそれを単純化する私の見解です：

<script type="text/javascript">
$(document).ready(function() {
    var loginButton = $("#LoginButton");
    var topLoginForm = $("#TopLoginForm").toggle(!loginButton.hasClass("inactive"));
    loginButton.click( function() {
        var this$ = $(this);
        if (this$.hasClass("inactive")) {
            this$.animate({marginTop: "-40px"}, 500 );
            $("#button-inactive").animate({opacity: "0"}, 500, function() {$(this).remove();} );
            $('#button-active').hide().delay(30).fadeIn(1000);
            $('#LoginWelcome').fadeOut(1000);
            topLoginForm.delay(800).fadeIn(1000);
            loginButton.addClass("button").click( function() {
                document.forms["LoginForm"].submit();
            });
         }
    }); 
});
</script>
<!-- End Login Form Div Animation -->

それを単純化するために使用される技術：

  • 同じjQueryオブジェクトで複数のコマンドをチェーンする
  • if / elseの代わりにtoggle（boolean）を使用する
  • jQueryオブジェクトを複数回使用されるローカル変数に保存します
  • アニメーションで完了機能を使用して、アニメーションが終了するまで削除されないようにします
  • .delay(0)何もしないので削除します
  • this現在のセレクターを再実行するのではなく、イベントハンドラーで使用します
于 2012-06-24T00:13:26.527 に答える