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.