Consejos para crear plugins con jQuery

En este artículo damos una serie de recomendaciones a considerar al momento de crear y mantener un plugin con jQuery.

En la actualidad, la funcionalidad de jQuery se ha venido enriqueciendo con un gran número de plugins desarrollados, de manera independiente, por parte de la comunidad que hace uso de este framework.

A lo largo de Internet, nos encontraremos con montones de plugins, que de manera superficial, lucen adecuados para resolver ciertas situaciones, pero cuyo código resulta bastante frustrante para trabajar.

En términos generales, que un plugin de jQuery es un fragmento de código encapsulado, el cual es utilizado para extender el código funcional del framework, permitiéndonos realizar tareas extras a las que ya vienen integradas al core de jQuery. Como tal, el plugin debe poder trabajar con nuestro código sin problema.

En busca de lograr plugins mejor elaborados, daremos una serie de consejos que nos permitirán trabajar mejor con estos complementos. Estos tips no son sólo para desarrollar correctamente plugins, también te ayudarán a mantenerlos y expandirlos en un futuro en caso de ser necesario.

El plugin debe poder trabajar sin cambios

Como ya dijimos, el plugin es un complemento que debe poder trabajar con nuestro código sin ningún problema, este tiene la obligación de adaptarse al código que ya existe, pudiendo trabajar desde cualquier lugar donde se le mande llamar. Para su funcionamiento, no debe ser necesario instalar, reestructurar o definir algo, su simple inicialización es lo único requerido para poder trabajar con él.

jQuery("#elemento").nombrePlugin();

Muchos plugins cometen el error de hacer peticiones al usuario, como por ejemplo utilizar ciertos IDs o clases específicas, para que el plugin pueda funcionar. En vez de hacer algo así, se puede hacer uso de parámetros o selectores que nos permitan saber con que elementos trabajaremos.

Establece una configuración por defecto

La mayoría de los plugins cuentan con una serie de características que pueden ser adaptadas y modificadas para lograr resultados distintos. Una buena práctica, es proporcionar una configuración por defecto que permita al usuario entender como utilizar tu plugin.

El proporcionar una configuración default, permite que los desarrolladores que utilicen tu plugin, encuentre con más facilidad la funcionalidad correcta y adecuada de este mismo. Esto conlleva a que más desarrolladores utilicen tu plugin y aumenta la posibilidad de que se recomiende y su popularidad crezca.

var configuracionDefecto = {
    modo       : 'recuadro',
    transicion : 'fadeOut',
    tiempo     : '300'
};
 
configuracion = jQuery.extend({}, configuracionDefecto, configuracion || {});

Con el codigo de arriba, podemos agregar una configuración por defecto y después extender dicha definición con las características que sean definidas por el usuario.

Mantén los nombres únicos

Trata siempre de manejar una serie de nombre que sean únicos y que expresen con precisión la parte del plugin a la que hacen referencia. Esto le facilitará en gran medida las cosas al desarrollador y permitirá evadir conflictos con el código JavaScript y CSS que ya existe en la página.

Es muy probable, que el desarrollador ya haya utilizado nombres genéricos para definir alguna de sus funciones personalizadas, o para establecer el identificador de algún elemento en el DOM. Por ello, es muy importante que si tu plugin hace referencia a algún elemento común como un botón, input, tab u otro, trata de agregar el nombre de tu plugin antes del tipo e incluso algún otro identificador personalizado.

En vez de utilizar “button” puedes manejar “_miPlugin_button”, o si tu plugin es para crear un tooltip trata de evitar este nombre y mejor utiliza algo como “laWeberaTooltip()”.

Utiliza una estructura adecuada

Una estructura adecauda te permitirá desarrollar, mantener y actualizar tu plugin con mayor facilidad, además de que permite al desarrollador comprender más rápido la forma en que llevas a cabo las acciones dentro del plugin.

A continuación, presentamos una de las estructuras más utilizadas para establecer plugins, contiene predefinido todas las piezas importantes que requieres para poder trabajar.

var configuracionDefecto = {
    //configuración
};
 
jQuery.fn.miPlugin = function(configuracion)
{
    //establecimiento y obtención de valores     
    return this.each(function()
    {
        var elem = jQuery(this);
        //código         
        elem.data("_miPlugin", miPlugin);
    }     
    //clases y uso de prototyping
}

Los valores por defecto pueden ir afuera del encapsulado, ya que no es necesario crear una instancia cada vez que se llame el plugin. Por su parte, el establecimiento y obtención de valores no siempre es necesario, pero en caso de serlo se debe colocar antes de correr cualquier ciclo.

Después sigue el retorno de cada elemento, esto se hace para no interrumpir el flujo de método de encadenamiento de jQuery. Se procede a guardar los datos de cualquier elemento utilizando “.data()”, y finalmente de ser necesario se hacen llamadas a clases y se realiza algún tipo de prototyping.

Prueba el plugin en todos los navegadores

Es muy importante que pruebes la funcionalidad del plugin en cada navegador posible. Esta es una parte crucial para la supervivencia del complemento, ya que de no funcionar en alguno de estos, no podrá llegar a ser utilizado en masa y su popularidad ira decreciendo.

Es muy probable, que los mismos desarrolladores no se den cuenta de alguna falla de este tipo, pero al momento en que su código llegue al usuario final, una gran parte de sus usuarios notará inmediatamente la falla. Esto se debe a que el uso de navegadores es muy diverso y muchos de los usuarios no cuentan con un navegador tan moderno como los que utilizaste tú para probar.

Da un paquete completo

Una vez que tu plugin se encuentra bien estructurado y probado en distintos navegadores, es tiempo de pensar en liberarlo para que otros puedan utilizarlo. Pero antes de pasar a este paso, es importante que te tomes un tiempo para realizar alguna documentación de su funcionamiento, además especifica algún tipo de versión en los archivos o en la misma documentación, de esa manera le harás saber al desarrollador que tu trabajo no ha terminado y pueden venir más versiones, además de que le permite saber si cuenta con la versión más actualizada.

Como extra, puedes agregar un archivo con el código minimizado, para que el usuario pueda utilizarlo en caso de que quiera consumir menos recursos de petición.