Los últimos tutoriales de desarrollo web
 

JavaScript Guía de estilo y convenciones de codificación

❮ Anterior Siguiente Capítulo ❯

Utilice siempre las mismas convenciones de codificación para todos sus proyectos de JavaScript.

Las convenciones de codificación de JavaScript

Las convenciones de codificación son las guías de estilo para la programación. Por lo general se refieren a:

  • reglas de denominación y de declaración de variables y funciones.
  • Reglas para el uso de espacios en blanco, la sangría, y comentarios.
  • Programación de las prácticas y los principios

Las convenciones de codificación segura de calidad:

  • Mejora la legibilidad del código
  • Hacer más fácil el mantenimiento del código

Las convenciones de codificación se pueden documentar las reglas para los equipos a seguir, o simplemente ser su práctica de codificación individual.

Esta página describe las convenciones generales de código JavaScript que utiliza w3ii.
También debe leer el siguiente capítulo "Mejores Prácticas", y aprender cómo evitar los errores de codificación.

Los nombres de variables

En w3ii utilizamos camelCase de nombres de identificadores (variables y funciones).

Todos los nombres comienzan con una letra.

En la parte inferior de esta página, se encuentra una discusión más amplia sobre las reglas de nomenclatura.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Espacios alrededor de los operadores

Siempre ponga espacios alrededor de los operadores ( = + - * / ) , y después de comas:

Ejemplos:

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

código sangría

Siempre use 4 espacios para el sangrado de bloques de código:

funciones:

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

No utilice fichas (tabuladores) para el sangrado. Diferentes editores interpretan pestañas de manera diferente.

Reglas de los estados

Reglas generales para declaraciones simples:

  • Siempre termine una declaración simple con un punto y coma.

Ejemplos:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Las reglas generales para instrucciones complejas (compuestos):

  • Coloque el soporte de abertura en el extremo de la primera línea.
  • Utilice un espacio antes del corchete de apertura.
  • Coloque el soporte de cierre en una nueva línea, sin espacios iniciales.
  • No finalice un comunicado complejo con un punto y coma.

funciones:

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

bucles:

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

condicionales:

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

Reglas de objetos

Reglas generales para las definiciones de objeto:

  • Coloque el soporte de apertura en la misma línea que el nombre del objeto.
  • Utilice dos puntos más un espacio entre cada propiedad y su valor.
  • Utilice comillas alrededor de los valores de cadena, no en torno a valores numéricos.
  • No añadir una coma después de la última pareja propiedad-valor.
  • Coloque el soporte de cierre en una nueva línea, sin espacios iniciales.
  • Siempre termine una definición de objeto con un punto y coma.

Ejemplo

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

objetos cortos se pueden escribir comprimidos, en una línea, usando solamente los espacios entre las propiedades, como este:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Longitud de la línea <80

Para facilitar la lectura, evite líneas de más de 80 caracteres.

Si una instrucción JavaScript no cabe en una línea, el mejor lugar para romperlo, es después de un operador o una coma.

Ejemplo

document.getElementById("demo").innerHTML =
    "Hello Dolly.";
Inténtalo tú mismo "

Convenciones de nombres

Utilice siempre la misma convención de nomenclatura para todo el código. Por ejemplo:

  • Nombres de variables y funciones escritas como camelCase
  • Las variables globales escritos en mayúsculas (no lo hacemos, pero es bastante común)
  • Constantes (como PI) escritas en mayúsculas

En caso de utilizar HYP-gallinas, camelCase, o under_scores en los nombres de variables?

Esta es una pregunta programadores discuten a menudo. La respuesta depende de a quién le pregunte:

Guiones en HTML y CSS:

HTML5 atributos pueden comenzar con de datos (data-cantidad, los datos de precios).

CSS utiliza guiones en propiedad-nombres (font-size).

Los guiones pueden ser confundido como intentos de sustracción. Los guiones no están permitidos en los nombres de JavaScript.

subraya:

Muchos programadores prefieren utilizar guiones bajos (Fecha_Nacimiento), especialmente en las bases de datos SQL.

Los guiones se utilizan a menudo en la documentación de PHP.

PascalCase:

PascalCase es a menudo preferido por los programadores C.

el caso de Carmel:

camelCase se utiliza por sí mismo JavaScript, por jQuery, y otras bibliotecas de JavaScript.

No empiece a nombres con un signo $. Se le pone en conflicto con muchos nombres de bibliotecas de JavaScript.

Cargando JavaScript en HTML

Utilice la sintaxis sencilla para cargar scripts externos (el atributo de tipo no es necesario):

<script src="myscript.js">

Acceso a elementos HTML

Una consecuencia de la utilización de estilos HTML "desordenados", podría dar lugar a errores de JavaScript.

Estas dos sentencias JavaScript producirán diferentes resultados:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Si es posible, utilice la misma convención de nombres (como JavaScript) en HTML.

Visita la Guía de Estilo HTML .

Extensiones de archivo

Los archivos HTML deben tener una extensión .html (no .htm).

Archivos CSS deben tener una extensión .css.

Archivos JavaScript deben tener una extensión .js.

Utilice minúsculas nombres de archivo

La mayoría de los servidores web (Apache, Unix) son sensibles acerca de los nombres de archivo:

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

Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas:

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

Si se utiliza una mezcla de letras mayúsculas y minúsculas, usted tiene que ser muy consistente.

Si se mueve de un caso insensible, a un servidor de mayúsculas y minúsculas, incluso los pequeños errores pueden romper su sitio web.

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

Actuación

Las convenciones de codificación no son utilizados por los ordenadores. La mayoría de las reglas tienen poco impacto en la ejecución de los programas.

La sangría y espacios adicionales no son significativas en pequeños scripts.

Para el código en el desarrollo, la legibilidad se debe preferir. guiones de producción más grandes deben ser miniaturizada.


❮ Anterior Siguiente Capítulo ❯