JavaScript. Manual de estilo: reglas, convenciones. Cómo crear objetos, arrays. Ejemplos, ejercicio (CU01191E)

Declarar siempre las variables usando var. No hacerlo dificulta interpretar en qué ámbito se encuentra la variable y puede ocasionar que una variable esté en ámbito global indebidamente.

var nodosDiv;

Usa siempre puntos y coma para delimitar el final de una instrucción o línea. Cuando una función funciona como una expresión, debe delimitarse con punto y coma final. En cambio, en las declaraciones de funciones no se usa punto y coma final (ver ejemplo)

var mivar1 = function() {

return true;

}; // Aquí incluir punto y coma final

function miFuncion1() {

return true;

} // Aquí no incluimos punto y coma final

No declarar funciones dentro de bloques (condicionales, bucles…). Si se requiere crear funciones dentro de bloques, usarlas como expresiones que se asignan a una variable.

if (x) {

function miFuncion1() {…} // ¡incorrecto!

}

if (x) {

var mivar1 = function() {…}; // ¡correcto!

}

Hay que tener cuidado a la hora de crear closures porque pueden generar referencias circulares que impliquen desbordamiento de memoria.

No utilizar:

function miFuncion1(element, a, b) {

element.onclick = function() { /* código que usa a y b, crea el closure que mantiene una referencia a element a pesar de no usarlo, mientras que element mantiene una referencia al closure, circularidad */ };

}

Para resolver esta situación se usa:

function miFuncion1(element, a, b) {

element.onclick = miFun2(a, b);

}

function miFun2(a, b) {

return function() { /* código que usa a y b */ };

}

No usar with

Evitar el uso de esta sentencia

Limitar el uso de this

this puede tener distintos significados según el contexto. Usarlo sólo cuando sea realmente necesario.

No usar for-in para recorrer arrays.

Para recorrer arrays debe usarse un bucle for tradicional.

Crear arrays usando sintaxis de literal en lugar de new Array

Recomendado: var a = [x1, x2, x3];

No usar: var a = new Array(x1, x2, x3);

Crear objetos usando sintaxis de literal en lugar de new Object

Recomendado: var a = { };

No usar: var a = new Object ();

Crea el javascript en archivos js independientes en lugar de embeberlo en ficheros html

Esto hará reusable el código y hará más pesada la carga de los archivos html.

Usa === y !== en condicionales para realizar comparaciones preferentemente sobre == y !=

if ( a === b) { … }

Evita el uso de eval

Busca alternativas y evita usar la función eval

Incluye código previendo una llamada a una función en la que falten parámetros

function myFunction(x, y) {

if (y === undefined) { y = 0; }

}

Esto se escribe más fácil y cómodo así:

function myFunction(x, y) {

y = y || 0;

}

Reduce el acceso al DOM.

Si tienes que acceder varias veces a un elemento del DOM, no uses el acceso tipo getElementById repetidas veces. Usalo una sola vez y almacena el resultado en una variable. De esta manera mejoras el rendimiento.

Usar la sintaxis camelCase para declarar nombres de variables y funciones (primera letra minúscula e intercalar mayúsculas).

nombreDeFuncionAsi, nombreDeVariableAsi, nombreDeMetodoAsi,

Crear los nombres de funciones y variables usando sólo 26 letras (a hasta z, sin la ñ), diez números (0 al 9) y el guión bajo _. Evitar uso de la ñ o signos como $, %, &, etc. Tampoco uses el guión medio.

var anyo = 2089;

Si una variable no va a cambiar de valor nunca se declara con todas sus letras en mayúsculas.

var NUMERODEAVOGADRO;

Los nombres de ficheros se escriben completamente en minúsculas. En el caso de ficheros html, se usa la extensión html en lugar de htm.

nombredeficherotodominusculas.js

otroNombre.html

Incluye las llaves en la misma línea de aquello que abren (no pongas las llaves por ejemplo debajo de una condición de un if, sino al lado)

if (condicion) {

// ...

} else {

// ...

}

Usa siempre indentado para aquello que está dentro de un bloque. Por ejemplo, el código dentro de un bucle for estará desplazado hacia la derecha. Usa siempre el mismo indentado.

for (var i=0; i<10; i++) {

//aquí codigo

}

Las líneas no se deben alargar tanto como para no ser visibles. Se usa la referencia de 80 caracteres. La línea no debe tener más de 80 caracteres. Si se excede esta longitud, la línea deberá dividirse.

esto.aquello.alli.hacer = function(

unArgumentoParaLaFuncionDeNombre1,

unArgumentoParaLaFuncionDeNombre2,

unArgumentoParaLaFuncionDeNombre3,

unArgumentoParaLaFuncionDeNombre4) {

// código

};

Usa comillas simples en lugar de comillas dobles

var nombre = 'carlos';

Separa las sentencias en distintas líneas. No escribas una detrás de otra separadas por ;

var x=1; var y=2; // No

var x=1;

var x=2;

Usa espacios separadores: esto hace más fácil de leer el código

while(x<3&&y<5&&z==10){llamarA();} //No

while ( x < 3 && y < 5 && z == 10 ) {

llamarA();

} //Sí

El código debe estar correctamente comentado. Los bloques /* … */ se usarán para documentación formal (explicación de funciones, parámetros que intervienen, etc. y los comentarios en línea // para aclaraciones puntuales.

Para documentar proyectos extensos se recomienda seguir unas normas de comentarios y usar herramientas específicas que crean la documentación de forma automática, como JSDoc.

Respetar el estilo del código en edición

Si nos encargan realizar unos cambios en un código que tiene un estilo, respetar el estilo de dicho código aunque no coincida con el que nosotros usemos habitualmente. Es importante que dentro de un código se mantenga siempre el mismo criterio.