javascript哪种语法更好？

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

$(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语句将执行一次，但可能我错了。

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

我会部分支持第二个选项。 如果仅在这段代码中修改navBar，则第二个选项更为明确。如果在其他代码段中修改了ff导航栏，他们应该调用这段代码。因此，这部分代码应该放在一个函数中，该函数在每次修改navBar时都会被调用。

---

在编码速度过快的情况下，应使用第一个选项。

我认为获取属性以决定是否设置属性的开销不值得。。因此，我将这样写（与您的建议相关的内容）：

---

还有一些需要考虑的问题：

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

根据，语句

$（“#foo”）.toggle（display）相当于：

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

因此，当传递到
toggle（）
中的表达式为true时，您将显示
navBar
。
您似乎是在错误的情况下操作的。请相信
if（navBar.css（“display”，“block”）
测试display属性的值。没有

它设置display属性，返回jQuery对象，然后进行测试


上述：

将显示设置为块
测试jQuery对象是否为false（从来都不是）
永远不要再次将显示设置为阻止（因为您刚刚这样做了，这将是毫无意义的）
上述：

将显示设置为块
测试jQuery对象是否为true（始终为true）
将显示设置为“无”
因此它总是将显示设置为“无”，使得if语句毫无意义


带有
if
语句的版本客观上更糟糕，因为
if
语句毫无意义，从来没有真正测试过任何东西

尽管这两种方法都很糟糕，因为这可以通过CSS媒体查询实现，这将更加有效。
请询问您关于第二种方法的问题，我认为这是首选方法。您甚至可以尝试以下操作：
navBar.css（（$（window.innerWidth（）>767）？“block”：“none”）。只是第二种方法的简写。为此，您应该尝试css（媒体查询）<代码>如果（！navBar.css（“display”，“block”）{
不做您认为它做的事情，并且毫无意义。
if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}

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

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