Como programar mejor en JS (TIP 006) (Jquery Error 1)

Los que hablan conmigo no tardaran mucho en notar que estoy en contra de jquery, por que conducen a practicas que llevan a complicar el codigo o hacerlo mas lento. Jquery es excelente para aprender, hacer algo rapido, y como apoyo, pero en general si puedes hacer lo mismo sin usarlo yo te lo recomiendo:

Error: (No guardar la referencia de un elemento a modificar)

Código :

function reportarSpam()
{
   $(this).hide();
   $("#reportar_spam").find('span').html('¿Está seguro?');
   $("#reportar_spam").find('*').show();
   $("#reportar_spam").animate({width: 'show'});
   $("#reportar_spam").css('display','inline');
   return false;
}

Como pueden ver se busca el elemento con el id reportar_spam es llamada multiples veces. El problema con esto es que cada vez que esto ocurre el algoritmo para encontrar ese elemente es llamado, este problema puede agravarse cuando esto ocurre en un loop con 100's de elementos, donde entonces ya sera considerable el tiempo que usa tu codigo en buscar ese elemento una y otra vez. Esto es facil de corregur simplemente hacemos la busqueda y guardamos el valor en una variable asi:

Código :

function reportarSpam()
{
   $(this).hide();
        var reportar_spam = $("#reportar_spam");
   reportar_spam.find('span').html('¿Está seguro?');
   reportar_spam.find('*').show();
   reportar_spam.animate({width: 'show'});
   reportar_spam.css('display','inline');
   return false;
}

Listo con esto nuestro codigo corre mas rapido y si cambia el id, solo cambiaremos en esta funcion la segunda linea de codigo en vez de todas ahorrandonos tiempo

Nota: Este codigo es parte de esta pagina, me imagino que reportar spam es un boton o algo asi.

Código Javascript :

Hehehehe ese código está raro, en fin.

Refactorizando es que no necesitas guardar en una variable un dato que solo vas a ocupar una vez.

el metodo mas reducido en consumo de recursos sería:

Código Javascript :

function reportarSpam()
{
    $(this).hide();
    $("#reportar_spam")
        .find('span')
          .html('¿Está seguro?')
          .end()
        .find('*')
          .show()
        .end()
        .animate({width: 'show'})
        .css('display','inline');
    return false;
}

Si de acuerdo asi correria mas rapido, eso es gracias al chaining que se puede hacer en jquery, aunque no lo recomiendo mucho, por que alguien que inicia se puede perder, me gusta como le diste formato para evitar terminar en una linea gigante de codigo que puede ser una pesadilla para debugear. La verdad me encanta el chaining de jquery creo que es de las cosas que mas me hacen decir wow en esta libreria. Y si esta raro el codigo, de hecho lo tome del fuente de este sitio, ya sabes a veces uno puede evitar querer ver el codigo fuente de los sitios, haber que cosas encuentra uno.