哪种语法最适合用于jQuery条件语句？

Question

我来自于Perl程序员的背景，所以出于习惯，我总是使用花括号来包含条件语句返回true时执行的操作。例如，使用jQuery，这是我需要解释区别的地方，这两个语句都是等价的，并且具有有效的语法。

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

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

我的老习惯是否在背叛我？我是否只是写了一些没有任何优势的多余代码？或者有一种方法更有效，或被认为是良好编码实践的标准？我真的很想了解这两种不同语法方法之间的任何差异，尤其是当它们都可以同样有效地工作时。

- Epiphany

---

第一个情况。这是因为在未来的重构中，它可以防止可能出现的括号丢失错误。 - Ragen Dazs

这不是关于jQuery语法的问题，更多的是关于JavaScript和语句的问题。jsLint建议使用括号，但jsHint并没有强制要求，所以最好与你的同事讨论一下。 - Eraden

对于这个问题，无论你是否使用jQuery都没有影响。它仍然是JavaScript代码，而你所做的关于代码风格的任何选择都同样适用于jQuery或任何其他JavaScript代码。 - Michael Geary

我并不是在谈论你是否应该使用jQuery。你的问题并不是关于是否应该使用jQuery - 你在问关于代码格式化的问题。我的观点是，在代码格式化方面，无论你是否使用jQuery都没有区别。jQuery没有一种与JavaScript不同的编写代码的独立方式，因为jQuery和使用它的代码只是JavaScript。无论是否涉及jQuery，你在格式化JavaScript代码时所做的选择都应该是相同的。 - Michael Geary

不要被营销口号所误导。jQuery不会改变或引入任何新的语法。没有适用于“jQuery代码”的代码格式问题，与JavaScript代码相比也没有区别。接受字符串并返回对象的函数并不是新的。链式调用也不是新的。没有语法是新的，它只是像任何其他JavaScript库一样的一堆函数和对象。因此，代码格式问题实际上是相同的，除非您决定出于某种原因想要以不同于其他JavaScript代码的方式格式化“jQuery代码”。但是为什么要这样做呢？ - Michael Geary

Answer 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语句相关。

- mdenton8

---

当然，使用花括号选项的优点之一就是更清晰易懂。 - mdenton8

感谢您花时间详细回答问题，特别是指出保持易于跟踪的嵌套的重要性（赞），因为较大的项目几乎总是包含大量的嵌套。 - Epiphany

我很感激。祝你在未来的编程事业中好运 :) - mdenton8

Answer 2

虽然两种写法都是有效的，但我个人建议使用花括号。它们可以清楚地表明哪些行属于 if。

不过这是一个很个人的问题。有些人喜欢使用它们，而另一些人则不喜欢。

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

- MrP

---

我同意你的观点，使用换行和空格可以使代码更加清晰易懂。通常情况下，我会为了后续需要更新代码的程序员着想而使用换行和空格。我经历过这种情况太多次了，所以深有体会。只有在需要调用另一个函数等只有一个操作时，我才会像示例中一样使用单行语句。 - Epiphany

Answer 3

必须承认，使用纯JS解决这个问题是很明显和易读的，没有理由用jQuery。但仅为演示目的，这里提供了一个纯jQuery等效方案，使用 .filter() 。有时，较长的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(); 

- robisrob

Answer 4

有一个单一的语句，例如

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(); 
 } 

你应该使用大括号

- Boss