jQuery: cómo crear nuestros propios plugins.

jQuery: cómo crear nuestros propios plugins.


0. índice de contenidos.


1. Introducción

Ya hemos hablando en la introducción a jQuery que éste es plugable. Un plugin en jQuery no es más que un método propio de la función jQuery creado para extender la funcionalidad del propio objeto jQuery.

La comunidad de desarrolladores en torno a jQuery ha creado cientos de plugins, http://plugins.jquery.com/, con lo que podemos extender su funcionalidad, y ya hemos visto en adictos alguno de ellos: jcarrusel y jtip.

Nosotros crearemos un plugin cuando necesitemos “buscar o crear algo”, y el “hacer algo” sobre lo encontrado, o creado, no esté disponible en jQuery, o a través de un plugin ya existente.

En este tutorial vamos a ver cómo crear un plugin para jQuery sencillo, para sentar las bases, y otro un poco más elaborado.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • jQuery 1.3.2.

3. Nuestro propio plugin.

Para crear nuestro plugin, podemos extender de dos objetos:

  • jQuery: que maneja la lógica interna de la librería,
  • jQuery.fn: que maneja interacciones con los elementos visuales.

En función del tipo de plugin extenderemos de uno u otro objeto.

Nuestro plugin debemos incluirlo en una librería javascript que debería llamarse: jquery.myplugin.js, donde myplugin sea el nombre de nuestro plugin.

Es importante

  • incluir la importación de nuestra librería después de la de jQuery en nuestros html, e
  • invocar a nuestros métodos cuando el DOM este totalmente cargado.

Como no podía ser de otra manera, nuestro primer plugin será un hola mundo. A continuación, el código de nuestra librería: jquery.helloWorldPlugin.js

El código es sencillo, asignamos a la función sayHello creada para el objeto jQuery, la invocación a una función que recibe un mensaje como parámetro; ese mensaje será el que mostraremos mediante una alerta.

Para poder hacer uso del plugin basta con incluir la librería en nuestro html e invocar a la función desde cualquier elemento creado u obtenido con jQuery.

En el siguiente código añadimos al objeto document un evento onClick, de modo que cuando el usuario pulse sobre cualquier parte de la página se invoque a la función sayHello de nuestro plugin.


4. Un plugin más elaborado.

Vamos a intentar hilar un poco más fino, inyectando un comportamiento común a todos los componentes de texto de un formulario, ahora si, extendiendo el objeto que maneja las interacciones con los elementos visuales.

El objetivo es tener un comportamiento que permita resaltar objetos, modificando su color de fondo.

Primero el código html, se trata de ver cómo importamos las librerías; la página no incluye más que un formulario con tres campos, con sus correspondientes etiquetas:

El siguiente es el código de la librería que implementa el plugin: jquery.inputHighlight.js, está autocomentado:

A continuación, el código de la librería que hace uso del plugin: try_jquery.inputHighlight.js

Podemos invocarla con o sin parámetros, en el segundo caso, al ser nombrados, el código queda muy legible. En ambos casos la funcionalidad se está “inyectando” a todos los campos visibles de un formulario.


5. Referencias.


6. Conclusiones.

Los beneficios de crear un plugin frente hacer uso de una simple función de una librería propia, son evidentes:

  • podemos inyectar el comportamiento creado a cualquier objeto que pueda crear o manejar jQuery, esto es, a cualquier nodo de nuestro árbol DOM,
  • podemos extender de funciones propias de jQuery que nos hacen más fácil, ligero y legible el código javascript.

La fácil extensibilidad de jQuery es uno de los factores que ha influido en su gran aceptación y, viendo lo sencillo que resulta hacerlo, no es de extrañar.

Un saludo.

Jose

jmsanchez@autentia.com