好的,这个问题可能看起来有点基础,但我想知道我是否应该在以下函数中缓存变量:
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
等快捷键。