jQuery优化答案

【问题标题】：JQuery optimizationjQuery优化
【发布时间】：2012-06-23 00:51:24
【问题描述】：

这样做有什么区别：

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if ($("#hoverContainer").is(":visible") == true) { 
            $("#hoverContainer").slideUp('slow');
        } else {                
            $("#hoverContainer").slideDown('slow');
        }
    }

});

或者这个：

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if (theHoverContainer.is(":visible") == true) { 
            theHoverContainer.slideUp('slow');
        } else {                
            theHoverContainer.slideDown('slow');
        }
    }

});

【问题讨论】：

如前所述，第二个更好，另外建议你在 if 条件中使用=== 而不是==。
可能重复：stackoverflow.com/questions/10433014/what-is-the-cost-of-this
你在分裂头发。我同意，第二种方式更好，但第一种方式更清晰。选择一种方式并在整个程序中坚持使用该格式。

标签： jquery

【解决方案1】：

您的第二种方法效率更高，因为它只运行一次选择器操作$("#hoverContainer") 并反复使用相同的 jQuery 对象，而不是运行相同的选择器操作三次并每次构造三个新的 jQuery 对象。

为了紧凑和高效，您可以这样做：

$(".topHorzNavLink").click(function() {
    if ($(this).attr('linkItem') == "link2") {
        $("#hoverContainer").slideToggle('slow');
    }
});

或者，如果linkItem 属性不是动态分配/更改的，您可以将其烘焙到选择器中，如下所示：

$(".topHorzNavLink[linkItem='link2']").click(function() {
    $("#hoverContainer").slideToggle('slow');
});

【讨论】：

【解决方案2】：

你也可以使用.slideToggle()

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

            theHoverContainer.slideToggle('slow');
    }

});

【讨论】：

【解决方案3】：

它们的速度差不多。 jQuery 已经通过查找“#”并对该 ID 执行 document.getElementById 来优化 ID 选择器。除非您将此功能运行 1000 次，否则您不会看到显着的速度提升。

我会采用您最满意的任何方法。第一种方法更清楚您选择的内容。第二种方式只定义了一次选择器，因此以后更容易修改。

【讨论】：