[SOLUCIONADO] Optimización de código

[El_Astur]

Buenas,

estoy haciendo unos ejercicios y tengo una duda, tengo éste código:

Código:

var changes = function() {
  for (var i = 0 ; i < document.getElementsByTagName("span").length; i ++) {
    document.getElementsByTagName("span")[i].style.backgroundColor = "#666";
    document.getElementsByTagName("span")[i].style.fontSize = "20px";
    document.getElementsByTagName("span")[i].style.border = "1px solid #000";
  }
}

Quisiera saber si el siguiente código que he realizado sirve como optimización de ese anterior:

Código:

function changes(span) {
	var elements = document.getElementsByTagName(span);
	elements.style.backgroundColor = "#666";
	elements.style.fontSize = "20px";
	elements.style.border = "1px solid #000";
};

Agradecería alguna ayuda,
un saludo!!!

[xfxstudios]

si te funciona, pues si o tal vez no, es la misma cantidad de lineas de codigo y van a hacer lo mismo en realidad, ve a la consola y verifica los tiempos de ejecución del codigo y mide la diferencia, cosa que no veo

[eContento]

El problema es que no te va a funcionar por dos cosas:

• getElementsByTagName espera un string "span" no span
• y getElementsByTagName devuelve un nodeList (elements es un nodeList), que no tiene propiedad style.

La mejor forma de optimizar ese código de forma rápida es:

Código:

var changes = function() {
  for (var i = 0, elements = document.getElementsByTagName("span"), len = document.getElementsByTagName("span").length; i < len; i++) {
    elements[i].style.backgroundColor = "#666";
    elements[i].style.fontSize = "20px";
    elements[i].style.border = "1px solid #000";
  }
}

De esta forma i, elements y len se inicializan en un único bloque var, en lugar de usar tres bloques var. Esto es más rápido.

Se define len fuera a modo constante en lugar de evaluar document.getElementsByTagName("span").length en cada vuelta del bucle.

[El_Astur]

Muchas gracias eContento, la verdad que no se me había ocurrido plantear así la optimización....

[eContento]

De nada, hombre.

La verdad es que hay una manera de hacer esa función más genérica y útil y es que pueda recibir un elemento padre, y un selector CSS. De esta forma puedes aplicarlo al document o a un elemento concreto, y pasarle "span" "div" o cosas del estilo "p > a".

La magia está en cambiar getElementsByTagName por querySelectorAll

Y quedaría así:

Código:

var changes = function(node,selector) {
  for (var i = 0, elements = node.querySelectorAll(selector), len = node.querySelectorAll(selector).length; i < len; i++) {
    elements[i].style.backgroundColor = "#666";
    elements[i].style.fontSize = "20px";
    elements[i].style.border = "1px solid #000";
  }
}

En tu caso, la llamarías con changes(document,"span");

Pero podrías llamarla con changes(divObj,"p.highlight > a.name") y te funcionaría.

Ya lo suyo sería que recibiera un tercer parámetro donde le pusieras pasar un objeto en notación JSON con los estilos que quieras aplicar.



Un saludo

[marlanga]

Código Javascript:

window.$ = document.querySelectorAll.bind(document);
console.log($('body'));
 

Y con esto ya tienes medio jQuery hecho