-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 优化的一件大事是知道 jQuery 函数jQuery()通常别名为$()确实是一个函数。

这意味着 using$('#some_id')实际上是调用一个函数来查找ID 为 #some_id 的 HTML 元素。这在性能方面代价高昂，因为在 DOM 中查找某些内容意味着遍历树并检查/比较节点的属性。

您应该从 DOM（使用 jQuery）获取 HTML 元素并将引用保存到变量中。稍后在脚本中，您将使用相同的变量引用该 HTML 元素，以免再次遍历 DOM寻找相同的元素。

通过使用 jQuery 的method chaining方法（如 @meloncholy 所建议的那样），您将获得与定义变量相同的好处以及更紧凑的语法。这对于操作以后不需要引用的对象很有用，因此您只需将需要对其进行的所有操作叠加起来。

一个例子是：

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

如果您知道结果没有改变，您可以做的最重要的事情是避免两次运行相同的查询。链接或缓存 jQuery 调用的结果！代替：

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

您可以使用 jQuery 对象的可链接性。事实上，您已经在第二行中进行了操作——为什么不采取额外的步骤呢？

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

为了可读性：

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

但这不是全部答案。如果您需要按顺序对一个对象或集合执行一堆操作，则链接非常简洁。但是，如果您需要button-active在执行期间的多个不同点访问一个对象，例如 ，您应该将查询存储为一个变量。

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
  • 将任何 jQuery 对象保存到多次使用的局部变量中
  • 在动画上使用完成功能，因此在动画完成之前不会将其删除
  • 删除.delay(0)，因为它不执行任何操作
  • 在事件处理程序中使用this而不是重新运行当前选择器
于 2012-06-24T00:13:26.527 回答