Guía de estilo de JavaScript
Utilice siempre las mismas convenciones de codificación para todos sus proyectos de JavaScript.
Convenciones de codificación de JavaScript
Las convenciones de codificación son pautas de estilo para la programación . Normalmente cubren:
- Reglas de nomenclatura y declaración de variables y funciones.
- Reglas para el uso de espacios en blanco, sangría y comentarios.
- Prácticas y principios de programación
Las convenciones de codificación aseguran la calidad :
- Mejora la legibilidad del código.
- Facilite el mantenimiento del código
Las convenciones de codificación pueden ser reglas documentadas para que las sigan los equipos, o simplemente ser su práctica de codificación individual.
Esta página describe las convenciones generales del código JavaScript que utiliza W3Schools.
También debe leer el próximo capítulo "Mejores prácticas" y aprender a evitar errores de codificación.
Nombres de variables
En W3schools usamos camelCase para nombres de identificadores (variables y funciones).
Todos los nombres comienzan con una letra .
En la parte inferior de esta página, encontrará 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 las comas:
Ejemplos:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
sangría de código
Utilice siempre 2 espacios para la sangría de los bloques de código:
Funciones:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
No use tabuladores (tabuladores) para la sangría. Diferentes editores interpretan las pestañas de manera diferente.
Reglas de declaración
Reglas generales para declaraciones simples:
- Siempre termine una declaración simple con un punto y coma.
Ejemplos:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Reglas generales para declaraciones complejas (compuestas):
- Coloque el corchete de apertura al final de la primera línea.
- Utilice un espacio antes del soporte de apertura.
- Coloque el corchete de cierre en una nueva línea, sin espacios iniciales.
- No termine una declaración compleja con un punto y coma.
Funciones:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Bucles:
for (let 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 objetos:
- Coloque el corchete de apertura en la misma línea que el nombre del objeto.
- Use dos puntos más un espacio entre cada propiedad y su valor.
- Use comillas alrededor de valores de cadena, no alrededor de valores numéricos.
- No agregue una coma después del último par propiedad-valor.
- Coloque el corchete de cierre en una nueva línea, sin espacios iniciales.
- Siempre termine una definición de objeto con un punto y coma.
Ejemplo
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Los objetos cortos se pueden escribir comprimidos, en una línea, usando espacios solo entre propiedades, como este:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Longitud de línea < 80
Para facilitar la lectura, evite las líneas de más de 80 caracteres.
Si una declaración de JavaScript no cabe en una línea, el mejor lugar para dividirla es después de un operador o una coma.
Ejemplo
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Convenciones de nombres
Utilice siempre la misma convención de nomenclatura para todo su código. Por ejemplo:
- Nombres de variables y funciones escritos como camelCase
- Variables globales escritas en MAYÚSCULAS (No lo hacemos, pero es bastante común)
- Constantes (como PI) escritas en MAYÚSCULAS
¿Debería usar hyp-hens , camelCase o under_scores en los nombres de las variables?
Esta es una pregunta que los programadores discuten a menudo. La respuesta depende de a quién se le pregunte:
Guiones en HTML y CSS:
Los atributos de HTML5 pueden comenzar con data- (datos-cantidad, datos-precio).
CSS usa guiones en los nombres de propiedades (tamaño de fuente).
Los guiones pueden confundirse con intentos de resta. Los guiones no están permitidos en los nombres de JavaScript.
guiones bajos:
Muchos programadores prefieren usar guiones bajos (fecha_de_nacimiento), especialmente en bases de datos SQL.
Los guiones bajos se utilizan a menudo en la documentación de PHP.
Caso Pascal:
Los programadores de C suelen preferir PascalCase.
el caso de Carmel:
camelCase es utilizado por el propio JavaScript, por jQuery y otras bibliotecas de JavaScript.
No comience los nombres con un signo $. Te pondrá en conflicto con muchos nombres de bibliotecas de JavaScript.
Cargando JavaScript en HTML
Use una sintaxis simple para cargar scripts externos (el atributo de tipo no es necesario):
<script src="myscript.js"></script>
Acceso a elementos HTML
Una consecuencia del uso de estilos HTML "desordenados" podría generar errores de JavaScript.
Estas dos declaraciones de JavaScript producirán resultados diferentes:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Si es posible, use la misma convención de nomenclatura (como JavaScript) en HTML.
Visite la Guía de estilo HTML .
Extensiones de archivo
Los archivos HTML deben tener una extensión .html ( se permite .htm ).
Los archivos CSS deben tener una extensión .css .
Los archivos JavaScript deben tener una extensión .js .
Usar nombres de archivos en minúsculas
La mayoría de los servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivo:
No se puede acceder a london.jpg como London.jpg.
Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas:
Se puede acceder a london.jpg como London.jpg o london.jpg.
Si usa una combinación de mayúsculas y minúsculas, debe ser extremadamente consistente.
Si pasa de un servidor que no distingue entre mayúsculas y minúsculas a un servidor que distingue entre mayúsculas y minúsculas, incluso los errores más pequeños pueden dañar su sitio web.
Para evitar estos problemas, utilice siempre nombres de archivo en minúsculas (si es posible).
Rendimiento
Las convenciones de codificación no son utilizadas por las computadoras. La mayoría de las reglas tienen poco impacto en la ejecución de los programas.
La sangría y los espacios adicionales no son significativos en las escrituras pequeñas.
Para el código en desarrollo, se debe preferir la legibilidad. Los guiones de producción más grandes deben minimizarse.