Guía de estilo de JavaScript

Siempre utilice las mismas convenciones de código para todos sus proyectos de JavaScript.

Convenciones de código de JavaScript

Las convenciones de código (Coding conventions) se refieren aDirectrices de estilo de programaciónEstos principios incluyen aproximadamente:

  • Reglas para el nombre y declaración de variables y funciones
  • Reglas para el uso de espacios en blanco, sangría y comentarios
  • Hábitos y principios de programación

Convenciones de códigoAsegurar la calidad:

  • Mejorar la legibilidad del código
  • Mejorar la mantenibilidad del código

Las convenciones de código pueden ser reglas escritas que sigue el equipo, o sus hábitos de codificación personales.

Esta página describe las convenciones de código JavaScript que utiliza CodeW3C.com.

Usted debe continuar leyendo el siguiente capítulo "Prácticas recomendadas" para aprender cómo evitar trampas de codificación.

Nombres de variables

En CodeW3C.com, usamos mayúsculas en camel case para los nombres de identificadores (variables y funciones)Mayúsculas en camel case.

Todos los nombres conLetrasInicio.

En la parte inferior de esta página, discutiremos más a fondo las reglas de nombramiento.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Espacios alrededor de los operadores

Siempre añada un espacio alrededor de los operadores ( = + - * / ) y después de las comas:

Ejemplo

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

Sangría de código

Siempre use 4 espacios para sangrar bloques de código:

Función

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

No use tabuladores para sangría. Los editores interpretan los tabuladores de manera diferente.

Reglas de instrucciones

Reglas generales de instrucciones simples:

Siempre finalice una sola instrucción con un punto y coma:

Ejemplo

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Reglas generales para frases complejas (compound):

  • Escriba el abre paréntesis en el final de la primera línea
  • Use un espacio antes del abre paréntesis
  • Escriba el cierre de la llave en una nueva línea, sin espacios previos
  • No finalice frases complejas con un punto y coma

Función:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Ciclo:

for (i = 0; i < 5; i++) {
    x += i;
}

Condiciones:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

Reglas del objeto

Reglas generales para la definición de objetos:

  • Coloque el abre paréntesis y el nombre del objeto en la misma línea
  • Use un dos puntos seguido de un espacio entre cada propiedad y su valor
  • No escriba una coma después del último par de valor de propiedad
  • Escriba el cierre de la llave en una nueva línea, sin espacios previos
  • Siempre finalice la definición del objeto con un punto y coma

Ejemplo

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Se puede comprimir un objeto corto en una sola línea, utilizando solo espacios entre las propiedades, como así:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Longitud de línea menor de 80

Para mejorar la legibilidad, evite que la longitud de cada línea supere los 80 caracteres.

Si la longitud de una sentencia JavaScript excede una línea, el mejor lugar para hacer una nueva línea es después de un operador o coma.

Ejemplo

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Pruebe personalmente

Convención de nombres

Siempre utilice la misma convención de nombres para todo su código. Por ejemplo:

  • Los nombres de variables y funciones deben comenzar conMayúsculas y minúsculas en camelCasepara escribir
  • Las variables globales se usanMayúsculas(No lo hacemos, pero es bastante común)
  • Los constantes (como PI) se usanMayúsculas

¿Deberíamos usar en los nombres de variables?Guiones、Mayúsculas y minúsculas en camelCaseoBarras bajas¿no?

Este es un problema que los programadores discuten a menudo. La respuesta depende de quién lo responde:

Guiones en HTML y CSS:

Las propiedades de HTML5 pueden comenzar con data- (data-quantity, data-price).

CSS utiliza guiones en los nombres de propiedades (font-size).

Los guiones pueden ser mal interpretados como operadores de sustracción. No se permite el uso de guiones en los nombres de JavaScript.

Barras bajas:

Muchos programadores prefieren usar barras bajas (date_of_birth), especialmente en bases de datos SQL.

Las barras bajas se utilizan a menudo en las referencias de PHP.

Notación PascalCase:

Los programadores de C a menudo utilizan la notación PascalCase.

Mayúsculas y minúsculas en camelCase:

JavaScript en sí, jQuery y otras bibliotecas JavaScript utilizan mayúsculas y minúsculas en camelCase.

No comience los nombres de JavaScript con el símbolo $. Esto puede causar conflictos en los nombres de JavaScript.

Cargar JavaScript en HTML

Cargar scripts externos utilizando una sintaxis simple (el atributo type no es necesario):

<script src="myscript.js"></script>

Acceder a elementos HTML

Las consecuencias de usar un estilo HTML "desordenado", tal vez sean errores de JavaScript.

Estas dos sentencias JavaScript producirán resultados diferentes:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Si es posible, utilice las convenciones de nombres en HTML idénticas (como en JavaScript).

Acceda a la guía de estilo HTML.

Extensiones de archivo

Los archivos HTML deben usar .html Extensiones (en lugar de .htm)

Los archivos CSS deben usar .css Extensiones.

Los archivos JavaScript deben usar .js Extensiones.

Use nombres de archivo en minúsculas

La mayoría de los servidores web (Apache, Unix) son sensibles a la capitalización de los nombres de archivo:

london.jpg no se puede acceder como London.jpg.

Otros servidores web (Microsoft IIS) son insensibles a mayúsculas y minúsculas:

london.jpg puede accederse como London.jpg o london.jpg.

Si mezcla mayúsculas y minúsculas, debe mantenerlas estrictamente consecutivas y consistentes.

Si traslada el sitio de un servidor insensible a mayúsculas y minúsculas a un servidor sensible a mayúsculas y minúsculas, incluso estos errores pequeños pueden dañar su sitio web.

Para evitar estos problemas, siempre utilice nombres de archivo en minúsculas (si es posible).

Rendimiento

Las computadoras no utilizan convenciones de código. La mayoría de las reglas tienen un impacto muy pequeño en la ejecución del programa.

El sangrado y los espacios adicionales no son importantes para los scripts pequeños.

Para los scripts en desarrollo, se debe dar prioridad a la legibilidad. Los scripts de producción más grandes deben reducirse.