Cuando trabajamos exhaustivamente con JQuery es muy importante no estar haciendo consultas al árbol del documento HTML constantemente para trabajar con los mismos elementos, ya que cada consulta tiene un coste y desciende el rendimiento. Pensad que el operador $ es una función, y que cuando ponéis un string realiza un parseo para determinar si se trata de una consulta de ids, elementos de una misma clase css, elementos con el mismo tag, etc.
En el siguiente ejemplo, tenemos un campo input con id "username" y un botón con id "bt_validate", y vamos a añadir una serie de funcionalidades.
Al principio mostraremos sobre el campo username un mensaje, y cuando cliquemos sobre el camp, se borrará su contenido, el botón validará si el contenido del campo username tiene más de 6 letras.
<html>
<head>
<title>JQuery cache de variables</title>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
</head>
<body>
<input id="username" type="text"/>
<input id="bt_validate" type="button" value="Validar"></input>
<script languaje="JavaScript">
var input_username, button;
function init(){
input_username = $("#username");
button = $("#bt_validate");
input_username.val("Introduce tu username");
input_username.click(function(){
input_username.val("");
});
button.click(function() {
if(input_username.val().length > 6)
alert("username válido!");
else alert("Faltan carácteres");
});
}
window.onload = init;
</script>
</body>
</html>Como podéis ver, es necesario acceder varias veces al elemento input, para modificar su valor, para consultar su valor o para añadir un evento click. En todos estos casos tendría que llamar a la función de jquery $("#username") para obtener el input y así trabajar con él.
En vez de eso creamos la variable input_username y cacheamos el objeto de jquery asignándolo a esta variable, gracias a esto evitamos tener que ejecutar la función de jquery que retorna el elemento, cosa que mejora el rendimiento.
De igual forma se ha realizado lo mismo con el botón, usando la variable "button".
En programas pequeños puede que no notéis mejoría, pero cuando tenéis que procesar mucha información, esto puede ser un factor clave para mejorar tiempos de ejecución.
Un saludo a todos!
No hay comentarios:
Publicar un comentario