Conociendo Javascript VII: Buenas prácticas = Orden y Limpieza

Existen muchas listas sobre buenas prácticas en Javascript, igual que existen listas similares dedicadas a otros lenguajes o incluso dedicadas al ejercicio de la programación (independientemente del lenguaje usado). No es mi intención repetir lo que otros ya han dicho, sobretodo porque resulta aburrido y no sirve de nada. Más aún, siempre es posible encontrar la bondad de alguna de esas prácticas discutible, o al menos no tan significativa como se proclama.

Sin embargo, creo que sí puede ser una buena idea ver con detalle cómo aplicar alguna de esas prácticas que cualquiera acepta como buenas. Personalmente las reduciría a una única idea: orden y limpieza. Sinceramente me da igual (NOTA) si usáis tabuladores, 3 espacios, 4 espacios, 8 espacios, tabstops elásticos o lo que más os guste. No voy a hablar de eso, porque discutiríamos eternamente sin llegar a nada. Hay asuntos más importantes.

Cada cosa en su sitio

Los servos en la caja de los servos, los lásers en la caja de lásers. Es lógico. A estas alturas, podría parecer innecesario, pero lo diré porque aún se ven casos: No mezcles el HTML con el Javascript. Igual que no metes declaraciones de estilo en línea en los elementos HTML, tampoco debes hacerlo con la lógica en Javascript. De hecho son tres conceptos claramente separados y así debemos mantenerlos. Por un lado HTML es el contenido y la estructura. Por otro CSS es la estructura visual y la presentación. Javascript es el comportamiento y la lógica.

¿Cómo hacer entonces para insertar un manejador de evento asociado a un elemento si no lo metes en el onclick="..." del tag? Sencillo, asignas ese manejador desde Javascript. La forma más ordenada es tener una inicialización al cargar la página que busque los elementos activos y les asigne los manejadores de eventos que sean oportunos. Para eso puedes utilizar la función addEventListener o en el caso de IExplore attachEvent (o leer un poco más abajo).

Cada cosa en su sitio! Lo digo en serio!

Sí, hemos separado el Javascript del HTML. Bien. Pero y esto?

var elError = document.getElementById('elemento');
elError.style.border='2px solid #c00';
elError.style.padding='5px';
elError.style.width='20em';

Hay CSS en tu Javascript?! Así que cuando quieras cambiar algo que atañe únicamente al aspecto visual de un elemento, en lugar de ir a la hoja de estilos vas a ir al archivo de Javascript? Tsk! Cada cosa en su sitio. Igual que no mezclamos HTML con Javascript, la forma adecuada de hacer esto, es asignar al elemento un estilo determinado, definido por una clase, que estará especificado en la hoja de estilos.

elError.className = 'error';

(O puedes leer un poco más abajo)

Los navegadores... en su sitio también.

Aah, los navegadores... gran invento, eh? Si no fuera porque cada uno tiene sus pequeños detalles diferentes al resto. Bien, pero no podemos dejar que esto nos afecte, que afecte a nuestro código. Simplemente no podemos tener el código lleno de if (isIE) ... y demás. Por esto es importante poner a los navegadores en su sitio. Todo aquello que veamos que tiene diferentes implementaciones según el navegador, abstraerlo. No podemos permitirnos tener el código lleno de...

if (isIE) obj.attachEvent(...)
else obj.addEventListener(...)

Primero, ni siquiera debemos preguntar en qué navegador estamos, sino de qué funcionalidades disponemos:

if (obj.attachEvent) obj.attachEvent(...)
else if (obj.addEventListener) obj.addEventListener(...);

Pero tampoco podemos dejar eso por todas partes de nuestro código. Encapsula todo lo que deba ser aislado del entorno en el que te encuentres. La solución, evidentemente, está en hacernos una función que nos abstraiga de estas diferencias. Por ejemplo:

function addEvent(obj, evType, fn){ 
    if (obj.addEventListener){ 
        obj.addEventListener(evType, fn, false); 
        return true; 
    } else if (obj.attachEvent){ 
        var r = obj.attachEvent("on"+evType, fn); 
        return r; 
    } else { 
        return false; 
    } 
}

(O mejor aún seguir leyendo un poco más.)

Tu código en su sitio. El de los demás, también.

Acertijo: ¿Qué es negro, cerrado, con forma de caja y no sabemos lo que hay dentro? Qué? Una caja negra? Hmmm... voy a repetir la pregunta: ¿Qué está probado, nos da mucha funcionalidad y nos soluciona problemas básicos que no forman parte del problema de nuestra aplicación? Exacto! Una librería!

Ya sé que el objetivo de toda esta serie es conocer mejor el lenguaje Javascript y que, en cierto modo, las librerías sí que nos oscurecen lo que ocurre por debajo. Pero por otro lado, si las usamos continuamente en otros entornos, ¿por qué no aquí? Las librerías nos dan mucha funcionalidad básica, además de aislarnos de esas pequeñas diferencias entre navegadores.

Conocer Javascript sigue siendo importante. Es imprescindible para entender, por ejemplo, por qué determinada librería funciona como funciona o hace lo que hace. No sólo eso, las librerías complementan nuestro código, pero no lo sustituyen. Pero seamos prácticos. Así que busca una librería que se adapte a tu estilo, que puedas comprender con facilidad y aprovéchala al máximo.

Con todo ordenado, es más fácil limpiar.

Mantener el código limpio, para mi, significa dos cosas: Que todo está ordenado y que todo es uniforme. Teniendo cada cosa en su sitio, es mucho más fácil aplicar cierta uniformidad. La uniformidad consiste en elegir un estilo y hacerlo estándar para todo el proyecto. De nuevo no me importa el estilo que elijas. Pero una vez que elijas uno, síguelo siempre.

Hay, por supuesto, otras muchas buenas prácticas recomendables. Pero en general son las mismas que en cualquier otro lenguaje (evita las variables globales, usa nombres significativos, modulariza, facilita la internacionalización separando, blabla).

Fin de la serie?

Con este artículo doy por finalizada esta serie de artículos sobre Javascript. Al menos por ahora. Porque no quiere decir que la serie esté cerrada. Si surgen nuevos temas interesantes (acepto sugerencias interesantes), seguiré escribiendo, como es lógico. Pero sí que con esto queda de algún modo completa una visión de los temas que podríamos considerar básicos del propio lenguaje.

Gracias por leer :)

(NOTA) O más bien lo que no me interesa es tener que discutirlo. Yo uso 4 espacios. No te voy a convencer de que lo hagas así y tú a mi no me vas a convencer de que lo haga de otro modo.