Índice
Directrices de nomenclatura angular
En esta publicación, compartiré con ustedes las buenas convenciones de nomenclatura que defiende el equipo de Angular.
Naming es una de las cosas que más hacemos como desarrolladores de software, por eso es importante que lo hagamos bien.
Las buenas prácticas de nomenclatura son importantes en el software porque facilitan:
- Legibilidad del código.
- Mantenibilidad del código.
- Incorporación de nuevos desarrolladores a un equipo.
Angular es un marco muy obstinado por naturaleza y por una buena razón. Ayuda a garantizar que nuestro patrón de codificación sea predecible y, por lo tanto, fácil de mantener.
Reglas de oro para nombrar
Las reglas de oro para nombrar deben formar la base de su patrón de nombres. Deben, por todos los medios, aplicarse o seguirse.
La consistencia es clave al nombrar artefactos en su código angular. El principio con coherencia es seguir un buen patrón y ceñirse a él.
Ser coherente ayuda a encontrar contenido de un vistazo. Además, proporciona sugerencias a los nuevos desarrolladores sobre cómo nombrar las cosas.
Aquí hay una cita de la documentación oficial de Angular con respecto a la consistencia de los nombres.
“La coherencia dentro del proyecto es vital. La coherencia con un equipo es importante. La coherencia en toda la empresa proporciona una eficiencia tremenda»
Todos los artefactos en su proyecto; carpetas, archivos, clases, etc. deben nombrarse para transmitir significado. Los nombres deben proporcionar una pista de lo que hace un artefacto.
- Usa nombres que transmitan intención.
- Utilice nombres que se puedan buscar.
- Use sustantivos para clases, carpetas y nombres de archivos.
- Use verbos o frases verbales para métodos o funciones.
- Evite el uso de abreviaturas y notaciones porque pueden resultar confusas.
Estilos de caja en Angular
Aparte de las pautas generales de nomenclatura discutidas anteriormente, Angular usa principalmente tres estilos de casos para nombrar artefactos camelCase, PascalCase y kebab-case
.
Es importante saber cuándo y dónde usar cada uno de estos estilos de casos. En la siguiente sección, revisaré cada uno de los estilos de caso y dónde usarlos.
kebab-case
es un estilo de naming donde todas las letras del nombre son minúsculas y usa un guión para separar palabras en un nombre.
Además, en Angular, se usa un punto para separar el nombre, el tipo y la extensión de los nombres de archivo.
La inclusión del tipo en los nombres de los archivos facilita la búsqueda de un tipo de archivo específico mediante un editor de texto o un IDE
. Además, proporcionan coincidencia de patrones para tareas automatizadas.
El kebab-case
se utiliza para nombrar carpetas, selectores de componentes, archivos y la propia aplicación Angular. Los archivos típicos en un proyecto Angular incluyen archivos de componentes, archivos de servicio, archivos de plantilla, archivos de módulo, etc .
Ejemplos:
Se puede nombrar un componente que realiza un seguimiento de una lista de automóviles car-list.component.ts
. Un servicio correspondiente sería car-list.service.ts
.
Un archivo pipe para fechas sería date.pipe.ts
.
Un selector que muestra los coches en una tabla se podría nombrar como se destaca en negrita a continuación.
@Component( selector: ‘car-list-table’, templateUrl: ‘./car-list-button.component.html’ )
Los archivos de prueba son un poco especiales. Además del tipo y la extensión, deben tener el sufijo Especificaciones
para archivos de prueba unitaria y e2e-spec
para archivos de prueba de un extremo a otro.
Se podría nombrar un archivo de prueba de unidad de tubería de fecha date.pipe.spec.ts
.
Se podría nombrar un archivo de prueba de un extremo a otro de un componente de lista de automóviles car-list.component.e2e-spec.ts
PascalCase
es un estilo en el que todas las primeras letras de las palabras de un nombre están en mayúsculas o en mayúsculas.
El caso Pascal se utiliza principalmente para nombrar clases en un proyecto angular.
Ejemplos:
El nombre de clase del componente car-list se puede nombrar de la siguiente manera.
Export class CarListCompoent {}
Una clase de tubería que transforma las fechas podría denominarse de la siguiente manera.
Export class DatePipe {}
Los nombres de las clases deben seguir el PascalCase
, independientemente de si pertenecen a un módulo, servicio, componente, etc .
El estilo de nomenclatura de camelCase
es un poco similar al de PascalCase
, excepto que la primera letra de un nombre siempre debe estar en minúscula. Todas las demás palabras posteriores de un nombre tendrán mayúsculas para la primera letra.
CamelCase
se utiliza para nombrar métodos o funciones, propiedades, campos, selectores de directivas y selectores de tuberías, como se resalta a continuación.
Ejemplos:
Los selectores de directivas utilizan camelCase
.
@Directive( selector: ‘[carValidate]’ ) export class CarValidateDirective {}
Los selectores de nombre de tubería también usan camelCase
.
@Pipe( name: ‘initCaps’ ) export class InitCapsPipe implements PipeTransform {}
En Angular, los nombres de métodos o funciones también usan mayúsculas y minúsculas. Por ejemplo, un método para obtener la lista de automóviles se puede nombrar de la siguiente manera.
public getCars();
Si tiene experiencia en lenguaje de programación basado en C
como yo y está acostumbrado a tener nombres de funciones en PascalCase
. Entonces tal vez puedas usar lo mismo en Angular. Solo asegúrate de elegir un patrón y ceñirte a él (sé consistente).
Comentarios de código
Algunos nombres de artefactos pueden no transmitir significado sin importar cuánto lo intente. En tales casos, utilice un comentario como ayuda para el nombre. El comentario debe ser breve y preciso.
Conclusión
En esta publicación, hemos analizado algunas pautas de nomenclatura en Angular . Un buen nombre es muy importante para la legibilidad y el mantenimiento de su código.
Cuando nombramos artefactos, lo hacemos por nuestros compañeros desarrolladores y por supuesto, por nosotros mismos.
Gracias por leer este post hasta el final.
Añadir comentario