Question

好的，这个问题可能看起来有些基本，但我想知道是否应该在这些函数中缓存变量：

function fooBar(target) {
  var elem = target.children[0].children[1];

  if(n == 1) {
    elem.style.color = "red";
  }
  else {
    elem.style.color = "blue";
  }
}

VS

function fooBar(target) {   
  if(n == 1) {
    target.children[0].children[1].style.color = "red";
  }
  else {
    target.children[0].children[1].style.color = "blue";
  }
}

那里没有真正的性能提升吗？我认为除了类型安全之外，后者更好，因为我需要更少的线路。在这些案例中究竟被认为是最佳做法？我是否应该在不需要的情况下缓存对象？

除非我的if语句包含在内：

if(elem.className == "something")

我个人不会打扰缓存。

另一方面，我的大脑与编码风格/一致性存在冲突。

假设我有这样的事情：

function fooBar(target) {   
  if(n == 1) {
    target.children[0].children[1].style.color = "red";
  }
  if else (n == 2) {
    target.children[0].children[1].style.color = "blue";
  }
  if else (n == 3) {
    target.children[0].children[1].style.color = "yellow";
  }
  else {
    target.children[0].children[1].style.color = "green";
  }
}

然后由于类型安全，我必须缓存对象，这让我回到了一致性的问题......

Answer 1

这实际上取决于您工作场所的做法。或者，如果是你的私人项目，你喜欢什么我个人不喜欢重复自己，尤其是使用长行代码，所以我会采用第一种方法第一种方法还为您提供了更改一行代码的好处，如果在将来某个时候您需要更改不同的变量。在第二种方法中，一个糟糕的开发人员可能会改变一行并离开另一行（尽管提供了一套很好的测试，这应该不重要，因为你期望测试失败）。我会说：如果你在多个地方访问相同的深层嵌套变量，通过将深度嵌套的变量分配给具有良好描述性名称的局部变量，使您的生活更轻松并保护自己免受愚蠢的错误。在一天结束时elementColor优于target.children[0].children[1].style.color。

Answer 2

在这类案件中，究竟最佳做法是什么？

“此类”情况下的“最佳实践”是消除数组/对象上的读取（访问）操作。
在您的情况下，对两个变体都有4次读取操作。
- 为避免多次读取/访问操作，您应将关键元素（引用）保存到局部变量中 - 以避免多个{{1 }语句 - 改为使用if else运算符（它应该更快）
您还应该考虑代码可读性和代码简单性。
但是如果你需要“少线” - 我会为你的上一个例子建议以下简单和可扩展的解决方案：

switch

Answer 3

这里的问题不是性能，而是可读性。执行分配可以让您或其他人更轻松地阅读代码并避免将来犯错。通常是一种很好的做法。

即使该变量仅使用一次，我个人也会使用快捷方式，如下所示：

function fooBar(target) {
  var styles = ["green", "red", "blue", "yellow"];  // of course, if "n" increases consecutively (can be also transformed into object)  
  target.children[0].children[1].style.color = styles[n] || styles[0];
}

如果您知道将在那里存储什么，也可以帮助给变量有意义的名称。例如：function fooBar(target) { var element = target.children[0].children[1]; element.style.color = "red"; }，bodyElement或dropdownElement，bodyEl等快捷方式。

缓存的最佳实践。避免多余的缓存？

3 个答案: