04/03/2015

Underscore.js: haciendo JavaScript más simple

Underscore.js: haciendo JavaScript más simple

Con el correr de los años, JavaScript pasó de ser un lenguaje para insertar sencillos scripts en sitios web a convertirse en un elemento indispensable de muchas interfaces de usuario avanzadas, especialmente como parte de Ajax. También se transformó en un lenguaje multipropósito, utilizado en aplicaciones mobile, videojuegos, extensiones de browsers y hasta microcontroladores. En esta evolución tuvo mucho que ver la aparición de frameworks, plugins y bibliotecas que facilitan la programación en este lenguaje, cuya sintaxis puede ser algo complicada.

Una de estas herramientas es Underscore.js, una biblioteca de JavaScript que ofrece más de 100 funciones útiles para manipular datos. Estas funciones están clasificadas en cinco grupos. Conozcamos algunos ejemplos de cada uno:

  • Colecciones. Funciones para recorrer, buscar, filtrar, ordenar, agrupar, contar o hallar el máximo y el mínimo en un conjunto de elementos.
  • Arrays. Funciones para manipular arrays: obtener el primer o el último elemento, buscar elementos, hallar uniones o intersecciones entre arreglos, etc.
  • Funciones. Funciones para, valga la redundancia, manipular el modo, el evento o el momento en el cual se ejecutará una función.
  • Objetos. Funciones para acceder a las propiedades, los métodos y el tipo de dato de un objeto, así como para clonarlo o extenderlo.
  • Utilidad. Funciones útiles de uso variado. Nos permiten invocar una función una determinada cantidad de veces, obtener un número aleatorio, depurar cadenas de texto, obtener la hora actual, etc.

Muchas de estas tareas pueden lograrse sin ayuda de ninguna función. Pero Underscore.js las implementa a través de una sintaxis mucho más reducida y fácil de entender. Supongamos que queremos multiplicar por 10 todos los elementos de un array de números. Con JavaScript, normalmente necesitamos recorrer el arreglo con un ciclo for y aplicar la multiplicación a cada elemento. Con Underscores.js, nos basta con invocar la función _.map (las funciones de la biblioteca son identificadas con un guion bajo al principio).

Pero .map también existe oficialmente en JavaScript. Entonces, ¿por qué usar una implementación diferente? Simplemente, porque es una de las funciones pertenecientes a ECMAScript 5, un estándar no soportado por browsers antiguos. Underscores.js detecta si el navegador soporta la función; de ser así, usará la función .map convencional, pero si no, ejecutará su propia implementación.

Underscore.js es ideal cuando necesitamos contar con funciones de bajo nivel para manipulación de datos. Claramente, su objetivo es muy diferente al de jQuery, otra biblioteca de JavaScript popular, pero orientada a la manipulación de los elementos del DOM.

Enlaces externos

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce