El post que buscas se encuentra eliminado, pero este también te puede interesar

Plugin en jQuery

Anuncios

Una de las utilidades mas tentadoras que encontré en este framework escrito en javascript es la posibilidad de "agregarle" cierta funcionalidad mediante el uso de plugins.
Un plugin es una utilidad que pone jQuery al alcance de los programadores para poder, de alguna manera, ampliar las posibilidades o funcionalidades ofrecidas por defecto. Es una función que se le agrega al objeto jQuery.
Una de las mayores ventajas que tiene utilizar un plugin es la reutilizacion del código escrito. Pero antes de seguir con explicaciones, veamos un pequeno ejemplo.


Creando el primer plugin
Crear un plugin en jQuery es muy sencillo, solo debemos agregar una función a la propiedad 'fn' del objeto jQuery. Pero antes de dar una explicación mas detallada, veamos un ejemplo:

Plugin en jQuery


Ahora que tenemos el plugin escrito, lo que tenemos que hacer el guardarlo... nosotros le pondremos como nombre 'agrandar.jquery.js'. Luego, habra que incluirlo en el head de nuestra pagina (de mas estr decir que debemos incluir tambien el framework jquery). Por ejemplo:

Programacion


En practica:
Ahora si, tenemos todo listo para probar nuestro plugin. Si tenemos un elemento 'div' con la clase 'chiquito'... y luego escribimos:

script


Obtendremos lo siguiente:

html

Este pequeño código, agranda cualquier elemento, dandole un alto y un ancho de 100% de su contenedor, y ademas le da un color rojo de fondo.

Facil no?

Resumiendo, hacer un plugin significa agregarle una funcion al objeto jquery, de tal manera que, cualquier elemento que extendamos con el objeto jquery, podra responder a dicha funcion. En otras palabras, si escribimos por ejemplo:

Javascript


Existen algunas reglas a tener en cuenta al momento de crear un plugin de jQuery... algunas de las mas importantes son:
- Cualquier plugin que escribas, debera llamarse jquery.[nombre_plugin].js, y dentro de ellas, cualquier referencia al objeto this sera una referencia al objeto que reciba el metodo (en este caso, agrandar).
- La funcion debe retornar el mismo objeto jquery sobre el cual se solicito.
- Se debe utilizar $(this).each() previendo de que el objeto sobre el cual se aplico el metodo, sea una coleccion de objetos. Esto sucede en los ejemplos ateriores, donde escribimos $('.miclase'). Puede suponerse que en una pagina habra mas de un elemento con esa clase, por lo que al usar ese tipo de selector, el objeto que obtenemos es una coleccion.
- Se debe terminar todas las instrucciones con un punto y coma ( ; ) de tal manera que el codigo pueda ser comprimido y aun asi seguir funcionando sin problemas.


Lo mas importante, es que puedes crear practicamente cualquier funcionalidad e incluirlo como un plugin.

Ahora, veamos una posibilidad que existe, y que es bastante interesante a la hora de escribir nuestros propios plugins...

Gestion de Opciones
Cuando hablamos de opciones hacemos referencia a un objeto que puede ser pasado como parametro al plugin de manera de hacerlo mas flexible y configurable. En el ejemplo anterior, usabamos nuestro plugin para agrandar cualquier elemento, pero al mismo tiempo le dabamos un color rojo de fondo.
Que pasaria si quisieramos elegin, en cada invocacion a la funcion, el color de fondo que debe tomar el/los elemento/s elegido/s?? o el tipo y ancho de borde?? o el color y tipo de letra??
Para responder todas estas preguntas, vamos a ver un ejemplo:

plugins

Notese que en este ejemplo, la funcion recibe un argumento llamado 'opciones', el cual es un objeto. Pero veamos donde crearlo...

Llamando a nuestro plugin con opciones
Lo primero que vamos a hacer es crear el objeto con las configuraciones que querramos:

jquery

Con esto, llamamos a nuestro plugin, pero ademas le pasamos un objeto con las configuraciones que debe tomar el elemento cuando se ejecute nuestra funcion. Con esto logramos, como dije antes, que nuestro plugin sea mas configurable, y no solo una funcion que siempre hace lo mismo. Mas claro, echale agua!!!

Pero vamos a ir mas alla aun
En el ejemplo anterior, le pasamos todos los valores que debe tomar el elemento al momento de ejecutarse la funcion. Pero que pasa si queremos darle a nuestro plugin configuraciones por defecto, y ademas darle la posibilidad a la persona que usa nuestro plugin de poder configurarlo tambien? Es decir, si se hace la siguiente llamada:

Plugin en jQuery

Nuestros elementos con clase 'chiquito' tomen un formato por defecto, con un determinado color de fondo, color de texto, tamano, etc... pero tambien, que el programador pueda escribir:

Programacion

y de esta manera pasarle parametros personalizados.

La solucion a esto es una funcion de jQuery que se llama extend. Esta funcion, 'extiende' las propiedades de un objeto, con las propiedades de otro. Veamoslo en el plugin y luego explicamos como funciona.

script

y luego

html

Notese, que el primer argumento de la funcion extend, es el objeto 'base', es decir, a este objeto se le agregaran (o sobreescribiran) las propiedades que tenga el segundo. Con esto, se logra que el plugin tenga valores por defecto, pero en el caso que el programador le pase a la funcion un objeto con propiedades nuevas, se sobreescriban a las originales, y aquellas que no estaban definidas originalmente, pero si se pasaron como parametro, seran agregadas a las opciones.
En nuestro ejemplo, el objeto final (el que toma el elemento) queda de la siguiente manera:

Javascript

Cualquier duda o comentario, no dudes en preguntar... y mientras tanto... a practicar lo aprendido.
Mucha suerte!

Anuncios

4 comentarios - Plugin en jQuery

@awesomeposts +1
Primero tengo que aprender que es JQuery.
Conozco algo del lenguaje HTML y oí algo de JQuery, pero nunca investigue. Por ahi despues busco
@SrQuintanita +1
recomiendo primero aprender algo de javascript y como recorrer el DOM con dicho lenguaje
@awesomeposts
@siko2008
Che, ¿cómo se manejan las excepciones con este framework? Atrapar excepción, guardar log y mostrar un mensaje agradable al usuario
@mfalem
Las excepciones se pueden manejar tranquilamente con javascript, es decir, sin necesidad de jQuery. Existen distintas opciones, como por ejemplo el comando throw que detiene el flujo normal del código. Javascript también maneja los comandos Try y Catch, que a diferencia del anterior, no detienen el flujo del código, sino que se salta el bloque donde se produjo el error, y en lugar de ello se ejecuta el bloque catch, para luego seguir la ejecución normal. Ademas, se puede usar [
@tiu47
realmente muy bueno y util, al punto que me hizo querer logueame y escribir algo.