Question

在几年没有编码之后，我开始学习HTML / CSS / JS，以前是一些简单的C ++ / Python / Pascal。

在其中一个教程中，有一个非常简单的游戏要做，将用户输入与生成的随机数进行比较，如果两者都匹配则显示消息。

问题是网络开发的一般做法是什么：

<p>How many fingers am i holding up?</p>
<input id=userInput type=text>
<input id=guessButton type="button" value=Guess!>

<script type="text/javascript">

    document.getElementById("guessButton").onclick=function(){

        if (document.getElementById("userInput").value == Math.floor(Math.random()*5)+1)    

        alert ("You've won");
    }
</script>

vs

  <script type="text/javascript">

    document.getElementById("guessButton").onclick=function(){

    var numberGuessed=document.getElementById("userInput").value;
    var randomNumber=(Math.random()*5);
    randomNumber=Math.floor(randomNumber)+1; 

        if (numberGuessed==randomNumber)            
        alert ("You've won");
    }
</script>

我知道这个例子非常简单，但是当谈到更复杂的逻辑或嵌套函数时，最好是逐步清晰还是避免产生不必要的变量？

Answer 1

哪个更快？

这个问题的答案是它并不重要。如果它非常必要，为了获得最佳速度（从互联网下载和运行），如果您只使用一次值，那么您将不需要任何变量。如果您不止一次使用这些值，您可能希望在变量中定义它们。下载时，数据越少越好。如果您只使用一次，将其定义为变量技术上需要下载更多数据（即额外的var，可能是额外的分号），但它＆＃如此微不足道，大部分时间都不应该考虑到这一点。你的Javascript执行时间不到1/10毫秒，所以这在大多数时候都不应该成为一个问题。

哪个首选？

这更像是一个基于意见的问题，因此，Stack Overflow上并不完全允许，但我认为我可以肯定地说，大多数开发人员会说重要的是可读性。如果这意味着定义变量，那么就这样吧。如果代码无法轻松阅读，那么即使对于您自己来说，扩展和修改代码也非常困难。在团队中工作时，可读性尤为重要。但最终，你应该做你喜欢的事情。

Answer 2

就速度而言，正如人们所说，差异可以忽略不计。至于最佳实践，在我看来，第二个是明显更好的。

如果其他人正在使用您的代码，正确的变量命名会删除＆＃34;他们试图做什么？＆＃34;从另一个开发人员（或您几个月内）必须解决的问题列表中。富有表现力的变量名称使得，如果我试图调试一个函数，我可以将精力集中在出现问题＆＃34;＆＃34;出错＆＃34;而不是什么＆＃34;＆＃34;＃ 34;继续＆＃34;。

在您的第二个代码示例中，我们甚至不知道您的变量是如何声明的，我可以立即了解您尝试做什么，无论它是按预期工作还是不。然后我可以在条件之前放置一个调试器，并根据你命名的变量检查你声明的变量的所有值是否有意义。例如，如果一个字符串为null，NaN或undefined，我可以很快缩小可能出错的范围。

然而，第二个例子迫使我在分析你正在做什么之前评估你做了什么。

它与编写注释的理念类似，实际上，理解与调试所花费的时间比例越小，代码的可维护性就越高。

Answer 3

这是您可能获得大量答案的风格问题之一。我更喜欢内联版，除非我将不止一次使用这些值。性能上可能存在微小差异，因为您必须在本地命名空间中添加名称然后（最终）gc它们，但我怀疑在任何合理的用例中都可以衡量这种差异。

Answer 4

是的，您可以将计算分解为中间变量，这不仅具有可读性的优势，而且还具有可调试性的优势，因为它允许您在计算某些内容的每一行上设置断点，并检查其值。变量

但是，您也可以预先计算变量。在您的情况下，DOM元素永远不会改变，因此可以在事件处理程序之外预先计算：

const userInputElement = document.getElementById("userInput");

document.getElementById("guessButton").onclick=function() {
  var numberGuessed = userInputElement.value;
  var randomNumber=(Math.random()*5);
  randomNumber=Math.floor(randomNumber)+1; 

  if (numberGuessed==randomNumber)            
    alert ("You've won");
};

在加载DOM之前，不需要执行

userInputElement。因此，这个JS应该在body的末尾，或者包含在DOMContentLoaded之类的事件处理程序中。

将随机数的计算分解为两个步骤可能会过分。大多数程序员都会用一行写出来：

var randomNumber = Math.floor(Math.random() * 5) + 1;

在这种情况下，另一种选择是将其写为一个单独的函数。这有几个优点。首先，您可以在代码中的其他位置重用该功能。其次，您可以更容易地单独测试它。第三，简化了使用它的代码。

function getRandomNumber(n) {
  return Math.floor(Math.random() * n) + 1;
}

现在您可以将事件处理程序简化为

document.getElementById("guessButton").onclick=function() {
  var numberGuessed = userInputElement.value;
  var randomNumber = getRandomNumber(5);

  if (numberGuessed == randomNumber)            
    alert ("You've won");
};

但是，既然您已预先计算了DOM元素，并将随机数计算移动到函数中，则不需要在事件处理程序中逐个计算变量，并且可以将其简化为：

document.getElementById("guessButton").onclick = function() {
  if (userInputElement.value == getRandomNumber(5))
    alert ("You've won");
};

现在你有一个非常简单易读的事件处理程序，任何人都可以查看并轻松查看正在发生的事情。您还有一个单独的，可重复使用的随机数生成器。

虽然与您的问题没有直接关系，但我强烈建议您正确缩进代码，并遵守使用空格等内容的样式指南。

还建议使用addEventListener而不是分配元素的onlick属性：

document.getElementById("guessButton").addEventListener('click', function() {
  if (userInputElement.value == getRandomNumber(5))
    alert ("You've won");
});

什么时候使用变量？

4 个答案:

哪个更快？

哪个首选？