哪个是 jQuery 条件语句的最佳语法？答案

【问题标题】：Which is the best syntax to use for jQuery conditional statements?哪个是 jQuery 条件语句的最佳语法？
【发布时间】：2013-09-10 05:06:12
【问题描述】：

我来自 Perl 编码员背景，所以出于习惯，我总是使用大括号将条件语句返回 true 时所采取的操作括起来。例如，使用 jQuery，因为这是我需要解释差异的地方，所以这两个语句都是等效的并且具有有效的语法。

if ($('#user_agreement').is(':checked')) { $('#thanks_message').show(); }  

if ($('#user_agreement').is(':checked')) $('#thanks_message').show();

我的旧习惯是否出卖了我，而我只是在编写不必要的额外代码而没有任何优势？还是一种方法更有效，或者被认为是良好编码实践的标准？我真的很想了解这两种不同的语法方法之间的任何区别，尤其是当它们都可以正常工作时。

【问题讨论】：

第一种情况。这是因为在未来的重构中，它可以防止可能出现的丢失括号的错误
这不是关于 jQuery 语法的问题，更多的是关于 javascript 和语句的问题。 jsLint 建议使用括号，jsHint 并没有强迫他们更好地与你的同事交谈。和
对于这个问题，无论您是否使用 jQuery，都没有区别。无论哪种方式，它都是 JavaScript 代码，并且您对代码样式所做的任何选择都与 jQuery 或任何其他 JavaScript 代码相同。
我不是在谈论你是否应该使用 jQuery。你的问题不是关于是否应该使用 jQuery——你问的是代码格式。我的观点是关于代码格式，你是否使用jQuery 没有区别。 jQuery 没有与 JavaScript 不同的单独编写代码的方式，因为 jQuery 和使用它的代码只是 JavaScript。无论您在格式化 JavaScript 代码时所做的任何选择，无论是否涉及 jQuery，都应该是相同的。
不要被营销口号误导。 jQuery 不会改变或引入任何新的语法。与 JavaScript 代码相比，没有任何代码格式问题适用于“jQuery 代码”。接受字符串并返回对象的函数并不新鲜。链接并不新鲜。没有任何语法是新的，它只是一堆函数和对象，就像任何其他 JavaScript 库一样。因此，代码格式问题实际上是相同的，除非您出于某种原因决定要对“jQuery 代码”进行不同于其他 JavaScript 代码的格式。但是你为什么要这样做呢？

标签： jquery syntax conditional

【解决方案1】：

我很抱歉，但这与 jQuery 无关。这是纯粹的 Javascript，贯穿始终。但无论如何，这是你的答案：

他们做同样的事情。

但是。

第二个选项，没有大括号，只能用于一个代码声明。一旦第一个分号被击中，其余的代码在if 语句之外。
第二个选项甚至不被人讨厌，但它确实应该。它可以节省开发人员查看他们的时间的时间代码只是意识到他们不小心包含了一个分号在if 声明之后。（即他们做了一些不幸的事情，比如：

if ( $("#user_agreement").is(':checked')); $("#thanks_message").show();

第一个选项允许您在条件语句中添加更多代码行，而无需费力地添加更多花括号。
花括号只是让你的代码更清晰，尤其是在下一个项目符号中 ->
最后，嵌套这些东西变得非常混乱。例如：

if(var1 == 'string1') 
    console.log("string1");
    if(var2 == 'string2')
        console.log("string2");
else 
    console.log("else");

缩进表示else块与外部if一起使用--但它实际上与内部if一起使用。

【讨论】：

当然，花括号选项具有清晰的优点:)
感谢您抽出宝贵时间具体回答，特别是指出保持任何嵌套易于遵循的重要性（赞），因为较大的项目几乎总是包含大量的嵌套。
我很感激。祝你在未来的编码工作中好运:)

【解决方案2】：

它们确实都是有效的，但我个人建议使用大括号。它们使哪些行是if 的一部分更加清晰。然而，这是一个非常私人的问题。有些人喜欢使用它们，有些人则不喜欢。

放置大括号的好处是你的代码可以变得更清晰（但在这种情况下，我也建议使用换行符。

【讨论】：

我同意你关于使代码清晰的用法，通常我会使用换行符和空格，以便我身后的编码员需要更新代码。去过那里的次数比我能数的还要多。我只使用示例中的单行语句，当只有一个动作要调用时，例如调用另一个函数。

【解决方案3】：

有一个像

这样的语句

if ( $("#user_agreement").is(':checked')) { $("#thanks_message").show(); }

不用放大括号

这样的说法不止一种

  if ( $("#user_agreement").is(':checked')) { 
   $("#thanks_message").show(); 
   $("#thanks_message").show(); 
  $("#thanks_message").show(); 
     $("#thanks_message").show(); 
 }

你应该使用大括号

【讨论】：

【解决方案4】：

必须同意，当纯 js 如此明显和可读时，没有理由使用 jquery 来解决这个问题，但只是为了演示，这里有一个使用 .filter() 的纯 jquery 等价物。有时，长 jquery 链接操作不希望将链断开为纯 js，因此这种技术对于插入条件而不断开链很有用（即使不是该方法的设计目的）。要继续使用链，您需要在之后添加 .end() 以恢复原始选择器。

你的表情......

if ($('#user_agreement').is(':checked')) {
   $('#thanks_message')
      .show();
}

只使用 jquery...

$('#thanks_message')
   .filter(function(){return $('#user_agreement').is(':checked');})
      .show();

工作示例：

http://codepen.io/anon/pen/doJxmW

顺便说一句，我过去创建了一个插件来简化这种操作的语法......

$.fn.iff = function (test) {
   return this.filter(function() {return test;} );
};

允许这种更易读的语法...

$('#thanks_message')
   .iff($('#user_agreement').is(':checked'))
      .show();

如果您要返回查询对象，请务必使用.end() 恢复原始对象

return this
   .iff(someTest)
      .show()
      .end();

【讨论】：