Como programar mejor en JS (TIP 005) (Id's)

Hola:

Buen inicio de semana el tip de hoy es una recomendación muy valiosa, es el tema de los ids. Jquery enseña mucho que la foma de referencia un elemento es mediante el uso de id's o de un path the classes para retornar el elemento(s) de nuestro interes.

El siguiente ejemplo es tomado de un codigo que un deserrallador realizo como prueba de aptitud para probar si tiene el nivel para trabajar en un proyecto. He aqui algunas partes del codigo:

Código :

// En su codigo todo esto es una linea
var headerDiv = document.createElement('div'); headerDiv.id = "header"; headerDiv.className = "left-plugin";

Pueden ver la clara influencia de jquery en la mente de este desarrollador, yo recomiendo empezar a dejar jquery lo mas pronto posible, poco a poco no de golpe por que el usarlo tanto puede causar efectos como el anterior. Por que es el resultado de jquery?

La primera parte se que es la costumbre de hacer chaining, en jquery tu puedes aplicar un cambio a un elemento y aplicar cambios subsecuentes ya que las funciones retornan al mismo elemento que invoco el metodo, pudiendo hacer muchos cambios en una sola liena de codigo, se puede ver que el desarrollador quiere hacer muchos cambion en una linea de codigo y es una costumbra que tiene practicamente solo en el caso de creacion de elementos. Finalmente hace esto mas adelante en otra funcion:

Código :

document.getElementById(headerDiv.id).appendChild(menu.holder);

Esto es la clara costumbre de jquery de pensar que $('#id') no tiene ningun efecto, en este caso es muy obvio headerDiv ya es elemento que querias, no es necesario hacer eso podria haber hecho esto:

Código :

headerDiv.appendChild(menu.holder);

Tu codigo queda mas compacto mas entendible, finalmente lo primero que hizo dederia ser una linea de codigo por instruccion quedando asi, (nota:quite el id no es necesario por que tengo acceso al elemento y cambie el nombre de la clase para que hiciera mas sentido con su funcion y nombre de variable, que era otro error al no haber congruencia del nombre de la variable con el nombre de la clase css):

Código :

var headerDiv = document.createElement('div');
headerDiv.className = "header";

Si, JS es lo básico, pero se utiliza el Jquery por que es el Normalize de los JS en los distintos browsers.

Recuerda que Jquery es Write Less Do More, traducir un código de Jquery a JS toma algo de tiempo pero si es posible, sin embargo pierde legibilidad cuando son códigos muy extensos.

Y claro JS es más rápido de ejecutar, pero más tardado de programar. Su interacción con el DOM es más compleja y requiere altos skills, lo que te hace desechar a "candidatos" por un simple modo de trabajo.

Es como si al que barre le dices que barra hacia la izquierda, pero el normalmente lo hace a la derecha.

Es cierto jquery surgio en una epoca en que programar era una pesadilla en cada navegador, hoy en dia ie aun tiene sus cosas de ie, pero en el pasado fue una epoca en que saber crear codigo que corriera en un solo navegador para corregir cosas de un solo navegador era vital. Hoy en dia la gran parte de codigo corre igual en todos los navegadores. Aun hay excpeciones sobretodo cuando se tratan los temas mas avanzados de html5 como archivos, audio, video.

Cierto no hay nada mas sencillo que jquery, pero cuando un proyecto requiere crear componentes no hay mucha diferencia con jquery, si has visto mi codigo para crear un checkbox veras que en jquery no habria mucha diferencia. La idea no es traducir de jquery a codigo vanilla js, es programar en vanilla js.

Ese es el objetivo de estos tutoriales ayudar a los programadores que quieren dar el siguiente paso, he corregido errores de compañeros en los cuales el problema fue una letra que falto en un id, y como jquery no avisa no logran debugearlo, he visto cosas muy extrañas que hacen algunos y muchas de esas cosas se pueden relacionar con intentar hacer las cosas en un estilo jquery. Por ejemplo es muy comun en codigo jquery buscar un elemento en pantalla, y luego querer usarlo de nuevo y volver a hacer un query hacia ese elemento.

Por cierto ya vi tu sitio, tienes cosas muy interesantes felicidades.