Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

viernes, 25 de mayo de 2012

jUri - Qué es, y cómo se usa

Hace relativamente poco empecé un proyecto que necesitaba para poder desarrollar el tipo de webs en las que estoy metido normalmente (con AJAX, por ejemplo). Estuve unas dos semanas añadiendo funciones cada día según mis necesidades, y el resultado fue el siguiente: una biblioteca de funciones en JavaScript para manejar cómodamente la URL del navegador (entre otras cosas).



A partir de aquí, la he ido actualizando en GitHub y creo que ya va siendo hora de que lo explique un poco a la comunidad.

Básicamente, quise crear este script porque no había (o no encontré) una biblioteca que hiciera exactamente lo que yo quería, así que me puse a investigar el objeto window.location de JS, para empezar a escribir funciones a partir de los datos que nos proporciona. A continuación os explico las cosas para las que se puede usar el script...


Parseo de URL

La biblioteca tiene como único objeto jUri, que tiene diferentes métodos y propiedades para intentar cubrir las necesidades que suelen ser básicas referentes a la uri/url. El objeto jUri es parecido a window.location, pero está extendido. Estas propiedas son exactamente las mismas que el window.location:
  • jUri.host
  • jUri.hostname
  • jUri.href
  • jUri.pathname
  • jUri.port
  • jUri.protocol
Además, para facilitar el acceso a las variables GET, existe la función jUri.get(), que devuelve un objeto con todas las variables.


Manejo de #hash

La función más importante es jUri.hash(), ya que tiene varios usos:
  • Si no le pasamos argumentos, nos devuelve el hash actual
  • Si le pasamos un argumento como expresión regular, lo compara con el hash actual y nos devuelve true/false. También le podemos pasar un callback como segundo argumento, que será ejecutado si coincide la RegExp.
  • Si le pasamos una cadena (string) como argumento, definirá la cadena como #hash
También existe soporte para el evento hashchange (soportado nativamente en algunos navegadores).  Su uso es jUri.hashchange(function(){});.


Anclas <a> animadas

Una de las características más útiles y que requieren menos programación (una sola línea de código) es la de animar los enlaces que llevan a una ancla <a name=""/> de la página. Con animado quiero decir el desplazamiento suave, al contrario de lo que  sucede cuando hacemos click en un enlace de este tipo.

La función para generar este efecto es jUri.animateAnchorLinks();. Le podemos pasar, eso sí, un string con los nombres de las anclas que queramos animar (individualmente), separadas por comas.


Generador de anclas

Esto es automático solo con incluir el script de jUri: se genera una ancla automáticamente justo antes de cualquier elemento con el atributo data-name="". Esto es útil si queremos incluir una ancla rápidamente en nuestro código html ;).


Enlaces retardados

También podemos usar el atributo data-after en los enlaces, para poder definir el retardo en milisegundos antes de ir a la dirección del enlace.


De momento, ya he explicado bastantes de las características de esta biblioteca, jUri. Por supuesto, iré publicando más entradas sobre el proyecto conforme vaya añadiendo cosas nuevas ;).

Un saludo!



Este proyecto en GitHub | https://github.com/3nr1c/jUri.js
Si quieres contribuir al proyecto | efz1005[at]gmail[dot]com

No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...