markdown Mi estandar nombredesímbolosyjavascript

Posted 2021-05-06

# Los símbolos

## Variables simples
las variables se nombran usando Lower camel case variable {sHeroRoutes}

tipo de dato | prefijo a usar
-- | --
boolean | b
date | d
numeric| n
string  | s
time | t
| 
object | o
arrays para estructuras o configuración | ac 
arrays con datos| ad

# Graphql
## Los nombres de la cadenas de conexión
tiene que seguir la sgte forma
~~~
[Tipo]_[Entidad]_[verbo][nrocampos]_['by'Orden-]_['for'Parametro]
~~~
donde:  
[Tipo]: indica la naturaleza de la operación asociada a la cadena  
puede ser:
- gm : graphql + mutation 
- gq : graphql + query  
- ge : graphql + enum  
- gs :graphql + stored procedure/ stored function    

[Entidad]: (en lower Camel Case)es el nombre de la tablaprotagonsta de la consulta en la base de datos  
o el nombre completo del procdimiento o funcion almacenada

[verbo]:(en lower Camel Case) es la operación que realiza  
- get
- getAll
- add
- del
- act  

[nrocampos]: puesto q con graphql puedes crear una misma consulta con distintos campos, 
para poder diferenciar estas consultas, se agrega el número de campos que regresan


[Orden] :  (en Lower Camel Case)corresponde a la parte  ORDERBY del sql  
[Parámetro] : (en Lower Camel Case) corresponde a la parte  WHERE del sql  
 ejemplos:
~~~ js
gq_user_get
gq_user_getall_byApeNom
gm_user_get_forLoginClave
gm_instructor_del_forId
gq_alumno_get_forId
gq_matCursoLibre_get12_forId
gq_matCursoLibre_get15_forId
gs_getnewKeyfor 
~~~

# Html
## los nombres de los objetos html cuando necesitan tener un nombre referenciable  

Todos los nombres son lowercase

control | otro nombre prefijo | prefijo
-- | --| --
button | boton| btn_
form | formulario| form_
label| etiqueta| lbl_
input type="checkbox">| [checkbox](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.checkbox.html#input.checkbox) | chk_ 
input type="color" name="color">| [color](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.color.html#input.color) | num_
input type="datetime-local" |fecha y hora| txt_
input type="hidden">| [Campo oculto](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.hidden.html#input.hidden) | hdn_ 
input type="email">| [Dirección de correo email](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.email.html#input.email) | txt_ 
input type="number">| numero| num_
input type="password">| [Clave o contraseña](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.password.html#input.password)| txt_ 
input type="range" | un control deslizante que permita elegir entre una gama de valores| num_
input type="search">| [caja para búsquedas](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.search.html#input.search) | txt_ 
input type="submit" | [boton](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.button.html#input.button)| btn_
input type="tel">| [Número de teléfono o móvil](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.tel.html#input.tel)| txt_ 
input type="text">| [caja de texto](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.text.html#input.text) | txt_
input type="url">| [Dirección URL](https://www.w3.org/TR/2012/WD-html-markup-20120315/input.url.html#input.url)| txt_ 
textarea>| Texto alfanumérico libre (texto extenso)| edt_ 
fieldset |grupo de controles | fset_
file select (input)| selección de archivo | file_
hidden control| control oculto|     hid_
image| imagen|	img_
radio button| grupo de radios (optionbutn) | grad_
select | uno de una lista (combobox:select) | sel_
seleccion multiple | mas de uno x lista (listbox:select multiple) | list_
table|tabla| tbl_


[configuración de controles htm](https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos) 

control | otro nombre prefijo | prefijo
-- |-- | --
p-accordion | a collection of contents in tabs. | acco_
p-autoComplete |  input component that provides real-time suggestions when being typed. | auto_
p-button|an extension to standard input element | btn_
p-calendar|component to select a date.|caln_
p-colorPicker|an input component to select a color.| color_
p-chips|used to enter multiple values on an inputfield.| chp_
p-checkbox|an extension to standard checkbox element |chk_
p-triStateCheckbox| is used to select either "true", "false" or "null" as the value.| chk_
p-inputSwitch |used to select a boolean value.|chk_
p-toggleButton |  used to select a boolean value | chk_ 
p-dialog |  a container to display content in an overlay window.| diag_
p-dropdown|used to select an item from a collection of options| drop_
p-editor| rich text editor component| edoc_
p-fieldset | a grouping component with a content toggle feature. | fset_
p-fileUpload |  an advanced uploader| fload_ 
p-listbox | select one or more values from a list of items.| lst_
p-multiSelect|used to select multiple items from a collection.|msel_
p-radioButton |an extension to standard radio button element| rbt_ 
p-slider| a component to provide input using dragging of a handle.| sld_  
p-selectButton|is used to choose single or multiple items from a list using buttons.|selc_
p-inputMask | component is used to enter input in a certain format | txt_ 
pInputTextarea>|add styling and autoResize functionality to standard textarea| edt_ 
p-rating | components is a star based selection input.| spn_  
p-spinner | an input component to provide a numerical input. | spn_ 
p-splitButton | set of commands | btn_ 
p-dataView |displays data in grid or list layout | dlist_  
p-dataScroller |  displays data with on demand loading using scroll | dlist_ 
p-orderList |  used to sort a collection. | dlist_  
p-panel | a grouping component providing with content toggle feature. | pan_  
p-pickList |used to reorder items between differents lists. | plist_
p-schedule|Schedule is an event calendar based on FullCalendar.| agend_  
p-scrollPanel | alternative to native browser scrollbar. | scll_
p-table| Table is the successor of p-dataTable| tbl_
p-tabView | a container component to group content with tabs.| tabs_
p-toolbar |  a grouping component for buttons and other content. | tbar_
todos los menus | en todas modalidades | menu_

si no importa el nombre| basta con usar el prefijo mas un anom+secuencial| [prefijo]+"anom"+[secuencial] 


## Variables que hacen referencia al formulario de la interface respectiva
se nombran igual que los contorles html, sólo que los prefijos de ese estandar se usan como sufijos  
y al subguión antecede a la parte descriptiva.
pero el sufijo no es necesario, si el nombre del simbolo ya tiene una referencia al tipo de control o de objeto  



## Variables/funciones privadas y variables temporales
las variables/funciones se nombran usando Lower camel case   
las variables/funciones privadas empiezan con subguión {_}  
y las variables privadas de vida muy breve   
-sólo útiles en la pequeña función actual- empiezan con subguión doble {__}


## Constantes
Los nombres de las constantes usan UPPER_SNAKE_CASE  
pero se da preferencia que sea en Lower camel case variable (heroRoutes) especialmente cuando son constantes que
están dentro de una pequeña porcion de código, como un bucle FOR o parecidos, en cuyo caso bien puede empezar 
ademas con un subguión doble.(mirese la regla del nombre de variables privadas o de vida brevísima)


## Los nombres de los archivos y folders deben mostrar muy claramente su intención/ contenido  
## Los nombres de las clases deben estar en UpperCamelCase y sus archivos en minúsculas 

la clase | el archivo
-- | --
.. class Appcomponent|  app.component.ts
.. class HeroListComponent|  hero-list.component.ts
.. class ValidationDirective|  validation.directive.ts
.. class AppModule|  app.module.ts
.. class UserProfileService| user-profile.service.ts

NOTA: los servicios que calramente muestran su cometido/ inteción, no requieren la palbra 'Service' en su nombre  
x ejemplo: logger  -> archivo: looger.service.ts

## Orden de los import
1- primero los de angular  
2- de terceros  
3 los propios  
 todos en orden alfabético  
 
## LIFT  
__L__ocate code quickly  
__I__dentify the code at a glance  
keep __F__lattest strcuture you can  
__T__ry to be DRY  

## Comentarios en javascript
### Comentarios en las funciones
1era forma
~~~
/**
 * El comentario comienza con una barra y dos asteriscos.
 * Cada nueva línea lleva un asterisco al comienzo.
 * @param {string} nombre: indica que una función recibe un parámetro de tipo string y que
 * el nombre del parámetro es nombre.
 * @descriptor Cada descriptor que añadamos irá en una línea independiente. 
 ************/
~~~

2da forma
~~~
/**
 * Verifies if the string is in a valid email format
 * @param  {string}
 * @return  {boolean}
 */
~~~ 
### Comentarios en la cabecera del archivo
~~~
/**
 * @fileoverview Menú aprMenu, desplegable con efecto expansión suavizado
 *
 * @version                               2.2
 *
 * @author                 César Krall <[e-mail]>
 * @copyright           aprenderaprogramar.com
 *
 * History
 * v2.2 – Se mejoró el efecto de expansión de los submenús dándole efecto aceleración
 * v2.0 – Se evitó que quedaran supersupuestos textos de submenús
 * v1.1 – Se mejoró la compatibilidad con navegadores Opera
 * ----
 * La primera versión de aprMenu fue escrita por Karl Monitrix
 ************/
~~~

ref: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=881:guia-de-estilo-javascript-comentarios-proyectos-jsdoc-param-return-extends-ejemplos-cu01192e&catid=78&Itemid=206

revisar como referencias:  
[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)  
[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#table-of-contents)