Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Conociendo UnderscoreJS

Conociendo UnderscoreJS 06.AUG.13

Alvaro José Rios Ch
Fundador WebBizarro

Underscore es un conjunto de herramientas en javascript a las que estamos acostumbrados en lenguajes como Ruby pero sin extender los objetos de javascript, esto quiere decir que podemos usar estas funciones sobre los tipos de datos nativos.

Underscore es una libreria util cuando estamos desarrollando aplicaciones que hacen un uso exaustivo de javascript donde tenemos que manipular y procesar datos del lado del cliente.

Pero basta de tecnisismos y veamos un ejemplo

Para utilizar underscore simplemente debes incluir la libreria underscorejs y ya esta.

Veamos un pequeño ejemplo para entender un poco mejor underscore.

Supongamos que tenemos en un array con enteros del 1 al 100 y queremos obtener los que sean mayores de 50.

Podriamos hacerlo de esta forma

var integers = [1, 27, 91, 32, 86, 12, 8, 68, 97, 72];
var integerLimit = 50;
var topIntegers = [];

for (var i=0; i <= integers.length; i++)
    if (integers[i] > integerLimit)
		topIntegers.push(integers[i]);

Ahora veamos como lo hariamos con underscore

var integers = [1, 27, 91, 32, 86, 12, 8, 68, 97, 72];
var integerLimit = 50;
var topIntegers = _.filter(integers, function (aInteger){ 
    return aInteger > integerLimit;
});

En el ejemplo anterior hemos utilizado la función filter que se encuentra en la especificaciones ECMAScript 5. En este caso, Underscore delegará la ejecución en la implementación nativa si el entorno lo permite. Si por el contrario, no lo estuvise (un navegador antiguo), se ejecutaría una implementación propia de Underscore.

Underscore implementa 80 funciones primitivas divididas en cinco grupos dependiendo su naturaleza:

  • Collections
  • Arrays
  • Objects
  • Functions
  • Utilities

Una descripcion completa de cada una de las funciones la uedes encontrar visitando underscorejs.org, aqui veremos como utilizar algunas de ellas con algunos ejemplos.

La funcion sortBy permite ordenar el arreglo de forma asendente dependiendo del valor que retorna la funcion iterador (si el resultado retornado es un string se usa la longitud del mismo para ordenarlos)

var alumnos = [
    {nombre: "Pedro Lopez", edad: 18},
    {nombre: "Juan Martinez", edad: 21},
    {nombre: "Luis Rivera", edad: 22},
    {nombre: "Virginia Suarez", edad: 19}
];

var alumnos_ordenados = _.sortBy(alumnos, function(alumno){
    return alumno.edad;
});

/*
El resultado en la variable alumnos_ordenados
[
    {nombre: "Pedro Lopez", edad: 18},
    {nombre: "Virginia Suarez", edad: 19},
    {nombre: "Juan Martinez", edad: 21},
    {nombre: "Luis Rivera", edad: 22},
]
*/

Otra funcion que vamos a ver es union que retorna un nuevo arreglo con las union de todos los elementos unicos en todos los arreglos pasados como parametros.

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);

/*
    El resultado de la union seria el siguiente.
	[1, 2, 3, 101, 10]
*/

Una utilidad interesante es wrap que permite ejecutar una funcion dentro de una funcion wrapper, lo que permite ejecutar código antes y despues para hacer algun procesamiento previo a los parametros o un tratamiento posterior al resultado.

var hola = function(nombre) { return "hola: " + nombre; };

hola = _.wrap(hola, function(func) {
  return "Antes, " + func("alvaro") + ", despues";
});

hola();

/*
    El resultado seria el siguiente
    'Antes, hello: alvaro, despues'
*/

Por ultimo veremos la funcion template que es util para redenderizar trozos de HTML a partir de arreglos de datos en JSON.

var alumnos = [
    {nombre: "Pedro Lopez", edad: 18},
    {nombre: "Juan Martinez", edad: 21},
    {nombre: "Luis Rivera", edad: 22},
    {nombre: "Virginia Suarez", edad: 19}
];

var plantilla = "<ul><% _.each(alumnos, function(alumno){ %> <li> <%= alumno.nombre %> </li> <% }) %></ul>";

_.template(plantilla, alumnos);

/*
    El resultado seria el siguiente
    <ul><li>Pedro Lopez</li><li>Juan Martinez</li><li>Luis Rivera</li><li>Virginia 	Suarez</li></ul>
*/