Aprende acerca de los Plugins en jQuery

Habrás comprobado que, con pocas líneas de código, se pueden hacer diversos efectos y dotar a la página de interacción con el usuario, pero quizás todavía te sientas un poco perdido a la hora de encarar el desarrollo de problemas más complejos con los que podrás enfrentarte.

Todavía nos queda mucho camino por delante, pero lo bueno es que, con lo que sabes hasta ahora, tienes una base suficiente para empezar a hacer cosas más divertidas y ejemplos que merezcan más la pena como práctica para tu día a día. Además, tendrás que aprender a programar de una manera adecuada en jQuery y sobre todo crear código reutilizable y con un ciclo de vida mayor. Para cumplir todos esos objetivos vamos a pasar directamente a explicar los plugins en jQuery, una de las "herramientas" que utilizarás habitualmente, si quieres hacer cosas más avanzadas con el framework y sacarle todo su provecho.

Qué son los Plugins

Los plugins son la utilidad que pone jQuery a disposición de los desarrolladores para ampliar las funcionalidades del framework. Por lo general servirán para hacen cosas más complejas necesarias para resolver necesidades específicas, pero las hacen de manera que puedan utilizarse en el futuro en cualquier parte y por cualquier web.

En la práctica un plugin no es más que una función que se añade al objeto jQuery (objeto básico de este framework que devuelve la función jQuery para un selector dado), para que a partir de ese momento responda a nuevos métodos. Como ya sabemos, en este framework todo está basado en el objeto jQuery, así que con los plugins podemos añadirle nuevas utilidades.

Voy a poner un ejemplo un poco abstracto para ver si podemos llegar a la idea de cómo es un plugin. Imagina que necesitas que los elementos de la página "bailen" (parpadeen, se muevan, interactuen con el usuario de una manera concreta, o lo que sea que necesites), pues creas una función para hacer eso. Haces que esa función sea un plugin llamado "bailar" y a partir de entonces cualquier elemento de la página que lo desees podrá bailar. Para ello simplemente invocas ese método del objeto jQuery sobre el elemento o elementos que selecciones.

//con esto bailan todos los párrafos
$("p").bailar();

//con esto bailan los elementos de la clase "artista" 

$(".artista").bailar();

//con esto baila el elemento con id="lola" 

$("#lola").bailar();

Espero que el ejemplo no haya parecido muy tonto, pero es que los plugins no son nada del otro mundo, son simplemente eso, extensiones del framework para crear cualquier funcionalidad que podamos necesitar en los elementos de la página, por muy especial, o tonta, que sea.

Lo genial de los plugins es que tú podrás utilizar esa funcionalidad en donde desees a partir de ahora, ya que estará perfectamente a tu disposición, siempre que tengas cargado el plugin. Incluso si tu generosidad es tal, la podrás proporcionar a otras personas para que la utilicen en sus desarrollos. Claro que, para conseguir todo esto, será necesario que programes los plugins atendiendo a una serie de normas, bastante sencillas pero importantes para asegurar que se puedan utilizar en cualquier parte y para cualquier selector de jQuery.

Cómo se crea un plugin de jQuery

Los plugins en jQuery se crean asignando una función a la propiedad "fn" del objeto jQuery. A partir de entonces, esas funciones asignadas se podrán utilizar en cualquier objeto jQuery, como uno de los muchos métodos que dispone dicho objeto principal del framework.

Nota: La creación de plugins, para ampliar las funcionalidades de jQuery, es una cosa tan básica que la mayoría de las funciones con las que está dotado el propio framework están incluidas en el objeto jQuery por medio de plugins. Es decir, en la construcción del framework en muchas de las ocasiones simplemente se crean plugins para extenderlo. Así pues, esta técnica es usada, no sólo por terceros desarrolladores, para crear nuevos componentes, sino también por el propio equipo de jQuery para el diseño base de este framework.Si lo deseamos, aparte de seguir los próximos artículos de este manual, podemos ver el código fuente del framework o cómo están hechos los plugins de otros desarrolladores, para tener una idea sobre cómo se utilizan.

A modo de ejemplo, podemos ver a continuación un código fuente de un plugin muy sencillo:

jQuery.fn.desaparece = function() {
   this.each(function(){
      elem = $(this);
      elem.css("display", "none");
   }); 
   return this;
};

Este plugin permitiría hacer desaparecer a los elementos de la página y podríamos invocarlo por ejemplo de la siguiente manera:

$("h1").desaparece();

En el siguiente artículo veremos con mayor detalle la creación de un plugin de jQuery y explicaremos varios temas que resultarán de vital importancia para entender el código anterior y para construirlos nosotros mismos.

Fuente: enlace