Ok, esta pregunta puede parecer un poco básica, pero me pregunto si debería almacenar en caché las variables en funciones como estas:

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

No hay una ganancia real de rendimiento, ¿verdad? Supongo que, aparte de la seguridad de tipo, este último es mejor ya que necesito menos líneas. ¿Qué se considera exactamente la mejor práctica en casos como estos? ¿Debo seguir almacenando el objeto en caché aunque no sea necesario?

Entonces, a menos que mis declaraciones if incluyan:

if(elem.className == "something")

Yo personalmente no me molestaría en el almacenamiento en caché.

Por otro lado, mi cerebro está en conflicto con el estilo / consistencia de codificación.

Asumiendo que tengo algo como esto:

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

Entonces tendría que almacenar en caché el objeto debido a la seguridad de tipografía, lo que me lleva de nuevo al tema de la coherencia ...

2
Asperger 9 may. 2016 a las 10:52

3 respuestas

La mejor respuesta

¿Qué se considera exactamente la mejor práctica en casos como estos?

La "mejor práctica" en "tales" casos es eliminar las operaciones de lectura (acceso) en la matriz / objeto.
En su caso, tiene 4 operaciones de lectura para ambas dos variantes.
- Para evitar múltiples operaciones de lectura / acceso, debe guardar el elemento crucial (referencia) en una variable local
- Para evitar múltiples {{X0 }} declaraciones: utilice el operador switch en su lugar (debería ir más rápido)
También debe considerar la legibilidad del código y la simplicidad del código .
Pero si necesita "las líneas menos" , sugeriría la siguiente solución simple y escalable para su último ejemplo:

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];
}
2
RomanPerekhrest 9 may. 2016 a las 08:30

Realmente depende de las prácticas en su lugar de trabajo. O si es para tus proyectos privados, en lo que te gusta.
Personalmente no me gusta repetirme, especialmente con largas líneas de código, por lo que elegiría el primer enfoque.
El primer enfoque también le brinda el beneficio de cambiar solo una línea de código, si en algún momento en el futuro necesita cambiar una variable diferente. En el segundo enfoque, un mal desarrollador podría cambiar una línea y dejar la otra (aunque siempre que haya un buen conjunto de pruebas, esto no debería importar, ya que esperaría que las pruebas fallaran).
Yo diría: si está accediendo a la misma variable profundamente anidada en varios lugares, haga su vida más fácil y protéjase contra errores tontos asignando esa variable profundamente anidada a una variable local con un buen nombre descriptivo. Al final del día, elementColor es mejor que target.children[0].children[1].style.color.

2
Daniel Gruszczyk 9 may. 2016 a las 08:04

El problema aquí no es el rendimiento, sino la legibilidad. A menudo es una buena práctica realizar tareas que le permitan a usted u otra persona leer el código más fácilmente y evitar cometer errores en el futuro.

Yo personalmente usaría un acceso directo incluso si esa variable se usa solo una vez, como esta:

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

    element.style.color = "red";
}

También puede ayudar darle un nombre significativo a la variable si sabe lo que se almacenará allí. Por ejemplo: bodyElement, dropdownElement o atajos como bodyEl, dropdownEl y así sucesivamente.

0
Ivan Yarych 9 may. 2016 a las 08:24