Question

我有这个代码，我想知道以下哪一个更好第一个

$(window).resize(function () {
    mnHeight = $('.main-nav').height(),
    navBar = $('.navBar');
    if ($(window).innerWidth() > 767) {
        if (!navBar.css("display", "block")) {
            navBar.css("display", "block");
        }
    } else {
        if (navBar.css("display", "block")) {
            navBar.css("display", "none");

        }
    }
});

或者这个

$(window).resize(function () {
    mnHeight = $('.main-nav').height(),
    navBar = $('.navBar');
    if ($(window).innerWidth() > 767) {
            navBar.css("display", "block");
    } else {
            navBar.css("display", "none");
    }
});

为什么？在我看来，第一个代码更好，因为if语句将执行一次，但也许我错了。

Answer 1

您似乎在错误地认为if (navBar.css("display", "block"))测试显示属性的值。它没有。

它设置display属性，返回一个jQuery对象，然后测试它。

if (!navBar.css("display", "block")) {
    navBar.css("display", "block");
}

以上：

将显示设置为阻止
测试jQuery对象是否为false（它永远不会是）
永远不要再将显示屏设置为阻止（因为您刚刚完成此操作，这将毫无意义）

if (navBar.css("display", "block")) {
    navBar.css("display", "none");
}

以上：

将显示设置为阻止
测试jQuery对象是否为true（总是如此）
将显示设置为无

因此它始终将显示设置为none，使if语句无意义。

带有if语句的版本客观上更糟糕，因为if语句毫无意义，从未真正测试任何内容。

这两种方法都很糟糕，因为这可以通过CSS媒体查询实现，效率会更高。

Answer 2

第二个与DOM交互较少，如果属性值没有变化，对浏览器没有工作影响（没有计算或重新绘制等）。因此，第一个例子中的检查只是额外不需要的工作。

Answer 3

我会部分地选择第二种选择。如果仅在这段代码中修改了navBar，则第二个选项更加清晰。 AND ff navBar在其他代码段中被修改，他们应该调用这段确切的代码。因此，这部分代码应该是每次要修改navBar时调用的函数。在编码速度过快的情况下，应使用第一个选项。

Answer 4

我认为获取属性以确定是否应该设置它的开销是不值得的开销..所以我会这样写（与你的秒建议有关）：

var WINDOW_WIDTH_THRESHOLD = 767; /* should be const in es6 */
var $window = $(window);
var $mainNav = $('.main-nav');

function onResize() {
    var minHeight = $mainNav.height();
    var innerWidthAboveThreshold = $window.innerWidth() > WINDOW_WIDTH_THRESHOLD;
    var display = innerWidthAboveThreshold ? "block" : "none";

    navBar.css("display", display);
}

$window.resize(onResize);

Answer 5

需要考虑的其他事项：

$(window).resize(function () {
    mnHeight = $('.main-nav').height();
    navBar.toggle($(window).innerWidth() > 767);
});

根据http://api.jquery.com/toggle/，声明$( "#foo" ).toggle( display );等同于：

if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}

所以当传递给navBar的表达式为真时显示toggle()。

javascript哪种语法更好？

5 个答案: