[jQuery] Abusos

Recientemente me he estado fijando en algunas prácitcas que se van extendiendo entre usuarios de jQuery. Veamos algunas que no son del todo recomendables y cómo y por qué evitarlas.

La Hermandad de each Para Todo

El abuso de each() es una de las prácticas más implantadas. Probablemente por una confusión al entender la recomendación de usar each() en lugar de usar bucles, se termina usando para ocasiones en las que sólo tienes 1 elemento y sólo puedes tener 1 elemento.

<select id="nombre">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
</select>
<script type="text/javascript">
    $(function() {
        $("#nombre").each(function(){
            $(this).change(function(){
                $("#nombre option:selected").each(function(){
                    alert($(this).val());
                    // whatever ...
                });
            });
        });
    });
</script>

El primer each() claramente sobra. ¿Por qué? Porque $("#nombre") sólo debe devolver 1 objeto, porque el id debe ser único en toda la página. Así que realmente esto no es un bucle y por tanto no debemos utilizar .each() porque añade una gestión y un trabajo innecesarios.

Pero el segundo también sobra. Estamos seleccionando todos los valores seleccionados del combo con $("#nombre option:selected") y en teoría podríamos tener varios, si el combo fuera multiselección. Pero en este caso no lo es, de modo que el selector únicamente va a devolver 0 ó 1 elementos seleccionados, nunca más de 1. Tampoco es necesario utilizar .each() y el trabajo que añade no compensa la comprobación de que hayamos seleccionado una opción (que en realidad deberíamos hacer de todas formas).

Sin tanto each el código queda:

<select id="nombre">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
</select>
<script type="text/javascript">
    $(function() {
        $("#nombre").change(function(){
            alert($("#nombre option:selected").val());
        });
    });
</script>

Los Adoradores de los Selectores Complejos

Otra fuente de abuso habitual son los selectores. No tan extendido pero se ve bastante el uso de selectores innecesariamente complicados. En el ejemplo anterior he colado uno bastante habitual. Llamar a .val() sobre un objeto <select> ya nos devuelve el valor del <option> seleccionado. Así que no es necesario el selector "#nombre option:selected", sino que basta hacer

            alert($("#nombre").val());

Más allá de este caso concreto o de otro que se ve de vez en cuando $("tag#id"), existen bastantes artículos por la red sobre la optimización de selectores en general. Me limitaré a recomendar que uses siempre que puedas un #id (y si tu elemento no tiene id, pónselo) y que, siempre que tengas un selector medianamente complejo, pruebes (y midas) las diferentes formas de obtener el objeto que buscas. Hay formas claramente peores, pero no hay una única forma que sea la mejor para cualquier caso.

Los Acólitos de Hagamos Todo con jQuery

Esto es aplicable no sólo a jQuery sino a cualquier librería o a cualquier cosa que hagas con Javascript o, en general, a cualquier cosa que hagas en tu vida: Para cada tarea usa la herramienta que mejor sirva.

Es fácil dejarse llevar por la emoción y olvidar que tenemos HTML, tenemos Javascript y tenemos CSS. En concreto se ve mucho la sustitución de CSS por propiedades insertadas desde Javascript. jQuery proporciona .css(), que nos permite fácilmente modificar el aspecto de un elemento. Y esto es muy práctico y en ocasiones muy útil, nadie lo duda. Pero hay que saber poner límites.

$("#elemento").css({background-color: '#FF9900'});

Podemos resaltar en un momento dado un elemento y hacerlo así. En general no tiene nada de malo. Aunque quizá necesitemos también ponerle un borde.

$("#elemento").css({background-color: '#FF9900'; border: '1px solid #99FF00'});

Y cambiar el texto de color, claro, y ponerlo en negrita.

$("#elemento").css({background-color: '#FF9900'; border: '1px solid #99FF00', color: '#FFFFFF', font-weight: 'bold'});

Esto es algo que se ve por ahí. Y aparentemente no es demasiado malo. Pero cuando tengamos esto en unas cuantas funciones repetido y tengamos que cambiarlo, cambiaremos también de opinión. Es la regla ya sabida por todos: Cada cosa en su sitio. La solución es, claro está, definir un estilo con CSS.

.resaltado {
    background-color: '#FF9900';
    border: '1px solid #99FF00';
    color: '#FFFFFF';
    font-weight: 'bold';
}

Y luego usar .addClass():

$("#elemento").addClass("resaltado");

Mucho más sencillo de modificar en el futuro. Y esto mismo se aplica a construir HTML con jQuery o a otras situaciones similares.

La Secta de Yo Hago Todo

Si hay algo interesante de jQuery... Bueno, hay muchas cosas interesantes de jQuery, pero una de ellas, sin duda, son los plugins. Los plugins que ya existen, que ya han hecho otras personas. Cientos de ellos. Por supuesto su calidad es muy diversa, pero en muchos casos son excelentes.

Y desde luego tienen detrás un trabajo ya hecho de un buen número de horas. Así que la próxima vez que pienses que necesitas hacer un plugin que hace tal y cual... primero busca si no existe ya uno. Y a lo mejor no hace exactamente lo que quieres, pero no por eso tienes que hacerte tú uno desde cero. Mira a ver si es configurable. O extensible. O si no, mira si tiene una licencia que te permita hacer lo que necesitas a partir de él.

Por supuesto que si no encuentras lo que necesitas, hazlo. Pero si puedes evitar duplicar el esfuerzo... más aún, si puedes aplicar ese esfuerzo a mejorar un plugin ya existente, nos beneficiamos todos.

Los Seguidores de Pensar Lo Que Haces

La conclusión básica de todo esto es: Si lo puedes hacer más sencillo, hazlo más sencillo. Y si tienes dudas sobre cómo hacer algo, lo mejor que puedes hacer no es buscar un tutorial, copiarlo y pasar a otra cosa. Lo mejor es comprender por qué se hacen las cosas y cuál es la mejor manera de hacerlas. No leas sólo tutoriales, lee el propio código.