Comunidad de diseño web y desarrollo en internet online

Como programar mejor en JS (TIP 001) (for loops)

Citar            
MensajeEscrito el 23 Sep 2014 10:31 pm
Estoy en busqueda de algun buen programador que tenga conocimientos en javascript y en programacion, no un experto en angular, backbone, jquery o similares. Que parece ser la situacion actual de muchos desarrolladores de js. Por este motivo voy a publicar un serie de tips y anotaciones que he hecho tanto a gente que le he elaborado pruebas para trabajar en conjunto, asi como tips que he pasado a un programador que esta en entrenamiento conmigo.

TIP 001

Los ciclos o loop son una de las estrucutras basicas en cualquier lenguaje de programacion ya que te permite hacer tareas repetitivas o aplicar un proceso igual a distintos objetos.

Codigo Malo:

Código :

var checkboxes = [];
var holder = document.getElementById('container');
var items = [{id:'01', text:'opcion 1'}, {id:'02', text:'opcion 2'}]
for (var i = 0; i < items.length; i++)
{
  this.checkboxes.push(new Checkbox(items[i]));
  this.checkboxes[i].setValue(false);
  holder.appendChild(this.checkboxes[i].holder);
}


El anterior codigo asume que hay una clase (tema de otro TIP) que es Checbox que tiene una funcion setValue la cual recibe on boolean, y una propiedad holder que es un element html que contiene todos los elementos visuales del checkbox, que incluye el checbox y el un span con el texto por ejemplo. El anterior ejemplo fue insiparado en problemas que encontre en el codigo de otro desarrollador.

Problemas:
1) La variable llamada i, guarda el indice que es nuestro centro de atencion en el array, sin embargo el nombre i, no da ninguna clave de a que se refiere, un mejor nombre seria iData, iItem, o iChbx mi preferencia iItem, esto sirve por que cuando tienes loops dentro loops puedes necesitar pensar un momento que era i,j,k o la letra que hayas usado, por eso JAMAS debes usar nombres de variable de una sola letra en general, con contadas execpciones como r,g,b en un objeto que es un color podria ser un ejemplo.
2) Para acceder al checkbox que acabar de crear consultas el array, en general si vas a usar un objeto de un array guardalo en una variable y despues usalo, los beneficios son un punto de control para definir que estas modificando, la velocidad de acceso a tu variable es mas rapido, y tu codigo se ve mas sencillo, this.checkboxes[iChbx].setValue vs chbx.setValue o checkbox.setValue

Codigo MOdificado:

Código :

var checkboxes = [];
var holder = document.getElementById('container');
var items = [{id:'01', text:'opcion 1'}, {id:'02', text:'opcion 2'}]
for (var iChbx = 0; iChbx < items.length; iChbx++)
{
    var checkbox =  new Checkbox(items[iChbx]);
    checkbox.setValue(false);
    holder.appendChild(checkbox.holder);
    this.checkboxes.push(checkbox);
}


como veran el codigo es de mas facil lectura, correra mas rapido, y aunque tiene una linea mas de codigo es mas legible.

Por striwensko

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Sep 2014 04:00 pm
Error las variables deben ser definidas en un solo var, segun la ECMAScript.

segundo error, no se deben utilizar abreviaturas.

recuerda que las variables deben ser adjetivos :) y pueden ser en español o en ingles como:

checkboxActual o currentCheckbox

divContainer

actualRegisteredValue


Los IDE actuales facilitan el uso de variables más descriptivas.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 25 Sep 2014 04:07 pm
Mi humilde opinión...

Pues si eso dice el standard, el standard debería corregirse, porque es mucho más claro y visible que se declare un var por cada variable.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 25 Sep 2014 04:26 pm
Amm buen punto Dirver OP, pero por eso se declaran todas al principio (las globals) y las locales se declaran al principio de la función.

Es la buena practica por que así todas están agrupadas.

Se utiliza en JAVA por ejemplo donde todas las propiedades del objeto van al inicio del mismo.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 25 Sep 2014 04:28 pm
Olvide poner como se veria con unas buenas practicas :P

Código Javascript :

var checkboxes = [],
        holder = document.getElementById('container'),
        items = [{id:'01', text:'opcion 1'}, {id:'02', text:'opcion 2'}],
        checkboxCounter,
        currentCheckbox;
    for (checkboxCounter = 0; checkboxCounter < items.length; checkboxCounter++)
    {
        currentCheckbox =  new Checkbox(items[checkboxCounter]);
        currentCheckbox.setValue(false);
        holder.appendChild(currentCheckbox.holder);
        this.checkboxes.push(currentCheckbox);
    }

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 25 Sep 2014 05:50 pm
Si reconozco que en Java se declaran todas en un principio, y que incluso douglas crockford recomienda tal practica:
http://javascript.crockford.com/code.html

Mi objetivo de estos post es hacer el codigo mas legible, y facil de mantener y aumentar. Estas practicas las he adoptado por que me permite escribir codigo mas rapido, debugear mas rapido y por que he visto que a veces el declarar un solo var hace el codigo mas suceptible a errores.

Mi problema con un solo var es como veras se separa el var del lugar donde se usa, el for queda separado de donde se declara la variable. Ahora en cuanto el nombre de las vairables prefiero checkbox vs currentCheckbox por que es mas corto, respecto a ser un adjetivo si la variable representa un objeto por que no llamarlo objeto, es como actualmente en js el object window, document no son nombradas ni currentWindow, ni currentDocument, de la misma manera nombro checkbox.

En cuanto a checkboxCounter prefiero iChbx yo cuando nombro vairables en loops siempre empiezo con i, y el nombre de lo que estoy iterando, ejemplos
iChbx (ya es una abreviatura estandar para mi), iButton, iImage, iItem, siguiento esto conservo nombres mas cortos a la vez que queda claro una vez conocida la convencion respecto a que estoy iterando (tambien al ser nombres mas cortos me protejo mas contra un error de dedo).

Repito mi intencion es codigo que de un vistazo ya sepas que estas haciendo, aunque lo hayas escrito hace 2 años y que te facilite leer un codigo de mas de 1000 lineas de codigo. Por esa razon mi intencion de declarar la variable en el for, por que manejo codigos muy extensos y si coloco las variables todas al principio me vuelve el codigo mas largo y tengo que ver mas texto para leer lo mismo.

Por striwensko

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Sep 2014 06:14 pm
Se me oldivaba algo, agradezco el interes de las personas que estan siguiendo estos tips que a mi me han funcionado, era programador en AS3, y veran cual ha sido su influencia en mi cuando trate temas como animaciones y eventos y encapsulacion. Deberiamos hacer un reto cada cierto tiempo, y ver como escribe codigo cada quien, muchas practicas las he adpotado tras ver como escriben codigo los demas, creo que hay un balance.

Hay codigos que pueden resultar al final en lo mismo, pero a pesar de eso hay codigos mas faciles de mantener, debugear y leer. Me gustaria hacer unos retos poner algun objetivo y subir nuestro codigo y comparar creo que seria muy educativo, alguien se apunta. Estaba pensando en los ejemplos que hicieron en esta pagina para react.js

http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/

Que los hicieramos sin usar react.js yo los haria con puro vanilla javascript y los demas libres y comparamos codigos y practicas. Alguien estaria interesado en hacer eso?

Por striwensko

15 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.