缓存的最佳实践.避免冗余缓存

Best practice with caching. Avoid redundant caching?

本文关键字：缓存 冗余 最佳      更新时间：2023-09-26

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

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

与

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";
  }
}

然后，由于类型安全，我将不得不缓存对象，这让我回到了一致性问题。。。

在这种情况下，什么才是最佳实践？

在这种情况下，"最佳实践"是消除对数组/对象的读取（访问）操作
在您的案例中，两种变体都有4个读取操作
-要避免多次读取/访问操作，应将关键元素（引用）保存到局部变量中
-要避免多个if else语句，请改用switch运算符（它应该更快）
还应考虑代码的可读性和码的简单性如果您需要"较少的行"-我建议您最后一个示例使用以下简单且可扩展的解决方案：

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];
}

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

这里的问题不是性能，而是可读性。执行作业通常是一种很好的做法，可以让您或其他人更容易地阅读代码，避免将来出错。

我个人会使用快捷方式，即使该变量只使用一次，比如：

function fooBar(target) {
    var element = target.children[0].children[1];
    element.style.color = "red";
}

如果您知道将要存储的内容，那么为变量指定一个有意义的名称也可能有帮助。例如：bodyElement、dropdownElement或bodyEl、dropdownEl等快捷键。

相关文章：