Hoy publicamos una traducción de la siguiente parte del manual de JavaScript. Aquí hablamos sobre el estilo del código y la estructura léxica de los programas.
→
Parte 1: primer programa, características del lenguaje, estándares→
Parte 2: estilo de código y estructura del programa→
Parte 3: variables, tipos de datos, expresiones, objetos.→
Parte 4: funciones→
Parte 5: matrices y bucles→
Parte 6: excepciones, punto y coma, literales comodín→
Parte 7: modo estricto, esta palabra clave, eventos, módulos, cálculos matemáticos→
Parte 8: Descripción general de las características de ES6→
Parte 9: Descripción general de los estándares ES7, ES8 y ES9
Estilo de programación
Un "estilo de programación" o "estándar de codificación" o "estilo de código" es un conjunto de convenciones que se utilizan en programas de escritura. Gobiernan las características del diseño de código y el procedimiento para usar construcciones ambiguas. En nuestro caso, estamos hablando de programas escritos en JavaScript. Si un programador trabaja en cierto proyecto él mismo, entonces el estilo de código utilizado por él representa su "contrato" consigo mismo. Si estamos hablando de un equipo, estos son acuerdos que son utilizados por todos los miembros del equipo. El código escrito usando un cierto conjunto de reglas hace que la base del código de un proyecto de software sea uniforme, mejora la legibilidad y la comprensión del código.
Hay muchas guías de estilo. Aquí hay 2 de ellos que se usan más comúnmente en el mundo de JavaScript:
Puede elegir cualquiera de ellos o elaborar sus propias reglas. Lo más importante es usar consistentemente las mismas reglas al trabajar en un determinado proyecto. Además, si, por ejemplo, se adhiere a un conjunto de reglas, y en un proyecto existente en el que necesita trabajar, se utilizan sus propias reglas, debe adherirse a las reglas del proyecto.
Puede formatear el código manualmente o puede usar las herramientas de automatización para este proceso. De hecho, formatear el código JS y verificarlo antes del lanzamiento es un gran tema aparte.
Aquí está una de nuestras publicaciones dedicada a las herramientas relevantes y las características de su uso.
El estilo utilizado en esta guía.
El autor de este material, como ejemplo de su propia guía de estilo, cita un conjunto de reglas que intenta seguir al escribir el código. Él dice que el código en los ejemplos se centra en la última versión del estándar, disponible en versiones modernas de navegadores. Esto significa que para ejecutar dicho código en navegadores heredados necesitará usar un transpilador como
Babel . Los transpiladores JS le permiten convertir código escrito usando las nuevas características del lenguaje para que pueda ejecutarse en navegadores que no admitan estas nuevas características. El transpiler puede proporcionar soporte para características de lenguaje que aún no son estándar, es decir, que no se implementan incluso en los navegadores más modernos.
Aquí hay una lista de las reglas en cuestión.
- Alineamiento Para alinear bloques de código, se usan espacios (2 espacios por 1 nivel de alineación), no se usan pestañas.
- Punto y coma No se utiliza un punto y coma.
- Longitud de la línea 80 caracteres (si es posible).
- Comentarios de una línea. Tales comentarios se usan en el código.
- Comentarios de varias líneas. Estos comentarios se utilizan para documentar el código.
- Código no utilizado El código no utilizado no permanece en el programa comentado en caso de que lo necesite más adelante. Dicho código, si aún se necesita, se puede encontrar en el sistema de control de versiones, si se usa, o en algo parecido a las notas de un programador diseñado para almacenar dicho código.
- Reglas de comentarios. No es necesario comentar cosas obvias, agregue comentarios al código que no ayuden a comprender su esencia. Si el código se explica a sí mismo gracias a los nombres de funciones y variables bien elegidos y las descripciones JSDoc de funciones, no debe agregar comentarios adicionales a este código.
- Declaración variable Las variables siempre se declaran explícitamente para evitar la contaminación de un objeto global. La palabra clave
var no se utiliza. Si no se planea cambiar el valor de una variable durante la ejecución del programa, se declara en forma de una constante (las constantes similares a menudo también se llaman "variables") usando la palabra clave const , usándola de manera predeterminada, excepto en los casos en que se planea cambiar el valor de una variable. En tales casos, se usa la palabra clave let . - Constantes Si algunos valores en el programa son constantes, sus nombres se componen de letras mayúsculas. Por ejemplo,
CAPS . Un guión bajo ( _ ) se usa para separar partes de nombres que consisten en varias palabras. - Las funciones Las declaraciones de función usan sintaxis de flecha. Las declaraciones de funciones regulares se aplican solo en casos especiales. En particular, en métodos de objetos o en diseñadores. Esto se hace debido a las características de la
this . Las funciones deben declararse utilizando la palabra clave const y, si es posible, los resultados de su trabajo deben devolverse explícitamente. El uso de funciones anidadas no está prohibido para ocultar algunos mecanismos auxiliares del código principal.
Aquí hay un ejemplo de un par de funciones de flecha simples:
const test = (a, b) => a + b const another = a => a + 2
- Nombrar entidades. Los nombres de funciones, variables y métodos de objetos siempre comienzan con una letra minúscula, los nombres que consisten en varias palabras se escriben usando un estilo camel (nombres como
camelCase ). Solo los nombres de las funciones y clases del constructor comienzan con una letra mayúscula. Si usa un marco que tiene requisitos especiales para nombrar entidades, use las reglas prescritas por él. Los nombres de archivo deben consistir en letras minúsculas, las palabras separadas en los nombres están separadas por guiones ( - ). - Reglas para construir y formatear expresiones.
si . Aquí hay algunas formas de escribir una
if condicional:
if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }
para Para organizar bucles, se utiliza el estándar
for construcción, un ejemplo del cual se proporciona a continuación, o el bucle
for of . Se deben evitar los
.hasOwnProperty() for in , a menos que se usen con la construcción
.hasOwnProperty() . Aquí hay un diagrama de bucle for:
for (initialization; condition; update) { statements }
mientras Aquí hay un ejemplo esquemático de un
while :
while (condition) { statements }
hacer Aquí está la estructura del bucle
do :
do { statements } while (condition);
interruptor . El siguiente es un diagrama de la
switch condicional del
switch :
switch (expression) { case expression: statements default: statements }
intente Aquí hay algunas opciones de diseño para la construcción
try-catch . El primer ejemplo muestra esta construcción sin un bloque
finally , el segundo con dicho bloque.
try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }
- Espacios Los espacios deben usarse con prudencia, es decir, para que contribuyan a mejorar la legibilidad del código. Entonces, los espacios se colocan después de las palabras clave seguidas de un paréntesis de apertura, están rodeados por operadores que se aplican a dos operandos (
+ , - , / , * , && y otros). Los espacios se utilizan dentro del ciclo for , después de cada punto y coma, para separar partes del encabezado del ciclo entre sí. El espacio se coloca después de la coma. - Líneas vacías Las líneas vacías marcan bloques de código que contienen operaciones conectadas lógicamente entre sí.
- Comillas Cuando se trabaja con cadenas, se usan comillas simples (
' ), en lugar de comillas dobles ( " ). Las comillas dobles generalmente se encuentran en los atributos HTML, por lo que usar comillas simples ayuda a evitar problemas al trabajar con cadenas HTML. Si necesita realizar algunas operaciones con cadenas, implica , por ejemplo, su concatenación, se deben usar literales de plantilla, que se dibujan usando comillas invertidas ( ` ).
La estructura léxica del código JavaScript.
Hablemos de los bloques de construcción del código JavaScript. En particular, sobre el uso de la codificación Unicode, sobre puntos y comas, espacios, sobre la sensibilidad del lenguaje a mayúsculas y minúsculas, sobre comentarios, sobre literales, sobre identificadores y sobre palabras reservadas.
▍Unicode
El código JavaScript se representa mediante la codificación Unicode. Esto, en particular, significa que en el código, puede usar, por ejemplo, caracteres de emoticones como nombres de variables. Para hacerlo, por supuesto, no se recomienda. Es importante aquí que los nombres de los identificadores, sujetos a ciertas
reglas , se puedan escribir en cualquier idioma, por ejemplo, en japonés o chino.
▍ punto y coma
La sintaxis de JavaScript es similar a la sintaxis de C. Puede encontrar muchos proyectos en los que, al final de cada línea, hay un punto y coma. Sin embargo, los puntos y comas al final de las líneas en JavaScript son opcionales. En la gran mayoría de los casos, puede prescindir de un punto y coma. Los desarrolladores que, antes de JS, usaban idiomas en los que no se aplicaba un punto y coma, tienden a evitarlos en JavaScript.
Si, al escribir código, no utiliza construcciones extrañas, o no comienza la línea con un paréntesis o corchete, entonces en el 99.9% de los casos no cometerá un error (en todo caso, el linter puede advertirle de un posible error). A "diseños extraños", por ejemplo, podemos atribuir esto:
return variable
El uso o no de un punto y coma es un asunto personal para cada programador. El autor de este manual, por ejemplo, dice que decidió no usar puntos y comas donde no son necesarios, como resultado, son extremadamente raros en los ejemplos dados aquí.
▍ Brechas
JavaScript no presta atención a los espacios. Por supuesto, en ciertas situaciones, la ausencia de un espacio conducirá a un error (así como a un espacio inapropiado donde no debería estar), pero muy a menudo no hay diferencia entre la ausencia de un espacio en una determinada parte del programa y la presencia de uno o más espacios. Una afirmación similar es cierta no solo para espacios, sino también para avances de línea y para pestañas. Esto es especialmente notable, por ejemplo, en un código minificado. Eche un vistazo, por ejemplo, a qué código procesado con el
Compilador de cierre se convierte.
En general, debe tenerse en cuenta que, formateando el código del programa, es mejor no ir a los extremos, adhiriéndose a un cierto conjunto de reglas.
▍ Sensibilidad a mayúsculas y minúsculas
JavaScript es un lenguaje sensible a mayúsculas y minúsculas. Esto significa que distingue, por ejemplo, los nombres de las variables
something y
Something . Lo mismo aplica para cualquier identificador.
▍ Comentarios
Puede usar dos tipos de comentarios en JavaScript. El primer tipo son los comentarios de una sola línea:
//
Ellos, como su nombre lo indica, están ubicados en una línea. Todo lo que sigue a los
// caracteres se considera un comentario.
El segundo tipo son los comentarios de varias líneas:
/* */
Aquí, el comentario es todo lo que está entre la combinación de los caracteres
/* y
*/ .
▍ Literales e identificadores
Un literal es un cierto valor escrito en el código fuente de un programa. Por ejemplo, puede ser una cadena, un número, un valor lógico o una estructura más compleja: un literal de objeto (le permite crear objetos, formateados con llaves) o un literal de matriz (le permite crear matrices, formateadas con corchetes). Aquí hay algunos ejemplos:
5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}
No habrá ningún beneficio particular al lanzar un programa en el que se encuentren tales construcciones. Para trabajar con literales en programas, primero se asignan a variables o se pasan a funciones.
Un identificador es una secuencia de caracteres que se pueden usar para identificar una variable, función, objeto. Puede comenzar con una letra, un signo de dólar (
$ ) o con un guión bajo (
_ ), puede contener números y, si es necesario, caracteres Unicode como emoticones (aunque, como ya se mencionó, es mejor no hacerlo). Aquí hay algunos ejemplos de identificadores:
Test test TEST _test Test1 $test
El signo de dólar se usa comúnmente al crear identificadores que almacenan referencias a elementos DOM.
▍ Palabras reservadas
La siguiente es una lista de palabras reservadas por el idioma. No puede usarlos como identificadores.
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintryclassenumextendssuperconstexportimportimplementsletprivatepublicinterfacepackageprotectedstaticyield
Resumen
Hoy discutimos el estilo y la estructura de los programas escritos en JavaScript. La próxima vez hablaremos sobre variables, tipos de datos, expresiones y objetos.
Estimados lectores! ¿Qué guía de estilo de JavaScript usas?