JavaScript Estándares de código

Todos los proyectos de JavaScript usan el mismo estándar.

JavaScript Estándares de código

Los estándares de código generalmente incluyen los siguientes aspectos:

  • Reglas de nomenclatura para variables y funciones
  • Reglas para el uso de espacios, sangría y comentarios.
  • Otras especificaciones comunes...

El código estandarizado es más fácil de leer y mantener.

Los estándares de código generalmente se definen antes del desarrollo y se pueden acordar con los miembros de tu equipo.

Nombres de variables

Se recomienda usar el método camelCase para nombrar variables (camelCase):

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

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Espacios y operadores

Normalmente, los operadores ( = + - * / ) necesitan espacios antes y después:

Ejemplo:

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

Indentación de código

Normalmente se usan 4 espacios para indentar los bloques de código:

Función:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}
Note No se recomienda usar la tecla TAB para indentar, porque la interpretación de la tecla TAB difiere entre editores.

Reglas de sentencias

Reglas generales para sentencias simples:

  • Una sentencia generalmente termina con un punto y coma.

Ejemplo:

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

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

Reglas generales para sentencias complejas:

  • Coloca la llave de apertura al final de la primera línea.
  • Añade un espacio antes de la llave de apertura.
  • Coloca la llave de cierre en una línea separada.
  • Termina una sentencia compleja con punto y coma.

Función:

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

Bucle:

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

Sentencia condicional:

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

Reglas de objetos

Reglas para la definición de objetos:

  • Coloca la llave de apertura en la misma línea que el nombre de la clase.
  • Debe haber un espacio entre los dos puntos y el valor de la propiedad.
  • Las cadenas usan comillas dobles, los números no las necesitan.
  • No añadas una coma después del último valor de propiedad.
  • Coloca la llave de cierre en una línea separada y termina con punto y coma.

Ejemplo:

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

El código de objetos cortos se puede escribir en una sola línea:

Ejemplo:

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

Menos de 80 caracteres por línea de código

Para facilitar la lectura, se recomienda que cada línea tenga menos de 80 caracteres.

Si una sentencia de JavaScript supera los 80 caracteres, se recomienda saltar de línea después de un operador o una coma.

Ejemplo:

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

Pruébalo »

Reglas de nomenclatura

Generalmente, las reglas de nomenclatura de muchos lenguajes de programación son similares, por ejemplo:

  • Las variables y funciones usan la nomenclatura lowerCamelCase, es decir, la primera letra de cada palabra, excepto la primera, está en mayúscula (lowerCamelCase）
  • Las variables globales están en MAYÚSCULAS (UPPERCASE )
  • Las constantes (como PI) están en MAYÚSCULAS (UPPERCASE )

¿Usas estas reglas para nombrar variables?hyp-hens, camelCase, ounder_scores ?

El carácter de guion (-) en HTML y CSS:

Los atributos HTML5 pueden tener el prefijo data- (por ejemplo: data-quantity, data-price).

CSS usa - para conectar nombres de propiedades (font-size).

Note - Generalmente se considera una resta en JavaScript, por lo que no se permite su uso.

Guion bajo:

A muchos programadores les gusta usar el guion bajo (como: date_of_birth), especialmente en bases de datos SQL.

El lenguaje PHP normalmente usa guion bajo.

Notación Pascal (PascalCase):

La notación Pascal (PascalCase) es más común en el lenguaje C.

Notación camelCase:

En JavaScript, generalmente se recomienda usar camelCase; jQuery y otras bibliotecas de JavaScript usan camelCase.

Note No uses $ como símbolo inicial en nombres de variables, ya que entrará en conflicto con muchas bibliotecas de JavaScript.

Cargar archivos JavaScript externos en HTML

Carga los archivos JavaScript con un formato limpio (el atributo type no es obligatorio):

<script src="myscript.js">

Usar JavaScript para acceder a elementos HTML

Un formato HTML deficiente puede causar errores de ejecución de JavaScript.

Las siguientes dos sentencias de JavaScript producen resultados diferentes:

Ejemplo

var obj = getElementById("Demo")

var obj = getElementById("demo")

Pruébalo »

Intenta usar las mismas reglas de nomenclatura para HTML y JavaScript.

Acceder a los estándares de código HTML(5)。

Extensión de archivos

La extensión de los archivos HTML puede ser.html(o.htm).

La extensión de los archivos CSS es.css 。

La extensión de los archivos JavaScript es.js 。

Usar nombres de archivo en minúsculas

La mayoría de los servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas: london.jpg no se puede acceder mediante London.jpg.

Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: london.jpg se puede acceder mediante London.jpg o london.jpg.

Debes mantener un estilo consistente; recomendamos usar nombres de archivo en minúsculas de forma uniforme.

Otras extensiones