Aprendiendo jQuery con la web del Senado, III

Hoy veremos el espinoso mundo de las variables globales. Además, veremos cómo

  1. Usar el atributo data.
  2. Usar la función map.
  3. Inicializar un array.

El código inicial.

El código a modificar es el siguiente:

Me encanta cuando la gente usa variables globales. Me hace preguntarme “¿por qué?”. Seré sincero, no suelo usar javascript. En su lugar uso coffeescript. Cuando estoy probando el código en desarrollo, coffeescript rodea cada uno de mis archivos con una IIFE, lo que hace que tenga que pensar qué he de exportar al ámbito global, no qué tengo que poner en el local. Lo primero que hago, es crear algo del estilo a window.Senado = {}, ahí meto toda mi mierda todo mi código.

He de reconocer que al menos meten todas las variables globales dentro de una variable nombrada, ejem, globales. Pero esto es un nombre fácilmente pisable.

Attributos data.

Por otra parte, la mayor porción del código accede a elementos para coger el texto. Todos los que he comprobado son elementos que no se muestran (tienen display: none, algunos de ellos escritos a fuego). Para ello, personalmente, prefiero meter la configuración en el elemento en sí. Para ello, me valgo de los atributos data. Si en un elemento ponéis un attributo data-x, después podéis acceder a él usando jQuery fácilmente. En este fiddle, lo uso para poner el texto del alert y el color de fondo nuevo. Más información en la documentación de la función data.

Map.

Veamos la siguiente variable.

Podríamos hacer lo mismo usando la función ya vista each. Veamos cómo en el siguiente código:

Tenemos un array con los valores del 1 al 5. Creamos un array result vacío. Después usamos la función each, y en cada iteración metemos el doble del elemento actual en el array result. Finalmente, ponemos en la consola el resultado.

El resultado de nuestro código es [2,4,6,8,10]

Esta forma de usar each parece muy útil; podríamos repetirla muchas veces en varios sitios. Podríamos hacer una función que hiciese algo parecido, pero para eso ya tenemos map. En ella pasamos una función que recibe como parámetros el índice del elemento en la colección y el elemento en cuestión. Esto mismo es para lo que sirve la función map de jQuery. Map creará un nuevo array con el mismo número de elementos, pero cada elemento será el resultado de aplicar la función al elemento original de la misma posición.

Por ejemplo, el código anterior reescrito usando jQuery.map quedaría como:

Y comprobamos que efectivamente devuelve el mismo resultado.

El código reescrito con jQuery.map

¿Os habéis dado cuenta de que podemos usar las funciones each y map en cualquier array o similar simplemente usándolos de forma diferente? En efecto, usando las formas jQuery.each y jQuery.map podemos usarlo en objetos lo suficientemente parecidos a un array. Daos cuenta, sin embargo, que la función que pasamos a jQuery.map recibirá los argumentos al revés: primero el elemento en sí y luego el índice.

Finalmente, el código corrrespondiente a la variable monthNames queda así:

Inicializando un array.

En general, si queremos crear un array, tenemos dos opciones recogidas en el siguiente gist:

En este caso, es preferible usar la segunda opción, puesto que es más rápida (se puede comprobar con este jsperf). Sin embargo, la variable está siendo inicializada con 31 elementos, todos ellos undefined.

En ese caso tenemos tres opciones. La primera es llamar a new Array con el número de elementos. El segundo, consiste simplemente en asignar 31 a la longitud del array (sí, sí, ¡funciona!). Finalmente, podemos añadir al array un método undefined 31 veces valiéndonos de un bucle para hacerlo.

Sorprendentemente, esta vez la más rápida es la que utiliza el constructor (new Array(31)). La más lenta se corresponde con la tercera opción. Los resultados del jsperf correspondiente en mi máquina son estos:

  • new Array(31): 18,590,339 operaciones por segundo.
  • [] + for: 2,497,498 operaciones por segundo.
  • [] + length: 6,512,241 operaciones por segundo.

Por lo tanto, amigos, en este caso lo han hecho bien. ¡Un aplauso para Rocío!

Notas finales.

En general, esta parte no está tan mal. Se sigue notando que son incapaces de consultar una api o de leerse un tutorial, pero no está del todo mal. El código modificado quedaría así:

Hay que tener en cuenta que estamos modificando función a función. Esto no estaría así, si de mí dependiese.

¡Ánimo, Rocío!

 

Author: Serabe

Mathematician, and Ruby and JavaScript programmer. Sometimes I speak at conferences and local meetups.

Leave a Reply

Your email address will not be published. Required fields are marked *