Reglas para el desarrollo de plugins en jQuery

Con los plugins en jQuery podemos ampliar Framework, creando nuevos métodos para dotar de nuevas funcionalidades al objeto jQuery. En el artículo anterior ofrecimos una explicación general sobre los plugins en jQuery y en el presente vamos a adentrarnos en su desarrollo.

Como habrás comprobado en el Manual de jQuery, el framework ya contiene muchas funciones para hacer cosas interesantes, que se basan en la utilización del objeto jQuery, así que ahora aprendamos a extender este objeto para proporcionar funcionalidades nuevas a nuestras páginas. Pero atención, porque tenemos que realizar el trabajo siguiendo una serie de normas, para asegurar que los plugins funcionen como deben y los pueda utilizar cualquier desarrollador en cualquier página web.

Aquí puedes ver un listado normas, que son sólo unas pocas, pero que resultan tremendamente importantes.

• El archivo que crees con el código de tu plugin lo debes nombrar como jquery.[nombre de tu plugin].js. Por ejemplo jquery.desaparece.js.
• Añade las funciones como nuevos métodos por medio de la propiedad fn del objeto jQuery, para que se conviertan en métodos del propio objeto jQuery.
• Dentro de los métodos que añades como plugins, la palabra "this" será una referencia al objeto jQuery que recibe el método. Por tanto, podemos utilizar "this" para acceder a cualquier propiedad del elemento de la página con el estamos trabajando.
• Debes colocar un punto y coma ";" al final de cada método que crees como plugin, para que el código fuente se pueda comprimir y siga funcionando correctamente. Ese punto y coma debes colocarlo después de cerrar la llave del código de la función.
• El método debe retornar el propio objeto jQuery sobre el que se solicitó la ejecución del plugin. Esto lo podemos conseguir con un return this; al final del código de la función.
• Se debe usar this.each para iterar sobre todo el conjunto de elementos que puede haber seleccionados. Recordemos que los plugins se invocan sobre objetos que se obtienen con selectores y la función jQuery, por lo que pueden haberse seleccionado varios elementos y no sólo uno. Así pues, con this.each podemos iterar sobre cada uno de esos elementos seleccionados. Esto es interesante para producir código limpio, que además será compatible con selectores que correspondan con varios elementos de la página.
• Asigna el plugin siempre al objeto jQuery, en vez de hacerlo sobre el símbolo $, así los usuarios podrán usar alias personalizados para ese plugin a través del método noConfict(), descartando los problemas que puedan haber si dos plugin tienen el mismo nombre.

Estas reglas serán suficientes para plugins sencillos, aunque quizás en escenarios más complejos en adelante necesitaremos aplicar otras reglas para asegurarnos que todo funcione bien.

Ejemplo de un plugin en jQuery

Ahora que ya sabemos las reglas básicas para hacer plugins podemos crear uno por nuestra cuenta que nos sirva para practicar lo que hemos aprendido. Te sugiero que identifiques los lugares donde hemos aplicado cada una de las anteriores normas de la lista, o al menos las que se puedan aplicar en este plugin tan simple que vamos a ver.

El plugin que vamos a construir sirve para hacer que los elementos de la página parpadeen, esto es, que desaparezcan y vuelvan a aparecer en un breve instante. Es un ejemplo bien simple, que quizás tenga ya alguna utilidad práctica en tu sitio, para llamar la atención sobre uno o varios elementos de la página.

Para hacerlo, utilizaremos otras funciones del framework como fadeOut() (para hacer desaparecer al elemento) y fadeIn() (para que aparezca de nuevo).

jQuery.fn.parpadea = function() {
   this.each(function(){
      elem = $(this);
      elem.fadeOut(250, function(){
         $(this).fadeIn(250);
      });
   });
   return this;
};

Con this.each creamos un bucle para cada elemento que pueda haberse seleccionado para invocar el plugin. Con elem=$(this) conseguimos extender a this con todas las funcionalidades del framework y el objeto jQuery resultante guardarlo en una variable. Luego invocamos fadeOut(), enviando como parámetro un número que son los milisegundos que durará el efecto de desaparecer el elemento. Luego enviamos como parámetro una nueva función que es un callback, que se ejecutará cuando haya terminado fadeOut() y en esa función callback se encargará simplemente de ejecutar un fadeIn() para mostrar de nuevo el elemento.

Ahora veamos cómo podríamos invocar este plugin:

$(document).ready(function(){
   //parpadean los elementos de class CSS "parpadear"
   $(".parpadear").parpadea();
   
   //añado evento clic para un botón. Al pulsar parpadearán los elementos de clase parpadear
   $("#botonparpadear").click(function(){
      $(".parpadear").parpadea();
   })
})

Dado el código anterior, al abrir la página parpadearán los elementos de la clase "parpadear" y luego habrá un botón que repetirá la acción de parpadear cuando se pulse.

En este caso no hemos colocado el script en un archivo aparte con el nombre jquery.parpadea.js, tal como se recomendaba, pero de momento será suficiente para probar esto de los plugins y quizás más fácil porque así no necesitamos más que un archivo HTML con todo el código junto. Podemos ver el código completo de este ejemplo a continuación:

<html>
<head>
<title>Creando plugins en jQuery</title>
   <script src="../jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.parpadea = function() {
   this.each(function(){
      elem = $(this);
      elem.fadeOut(250, function(){
         $(this).fadeIn(250);
      });
   });
   
   return this;
};
$(document).ready(function(){
   //parpadean los elementos de class CSS "parpadear"
   $(".parpadear").parpadea();
   
   //añado un evento clic para un botón, para que al pulsarlo parpadeen los elementos de clase parpadear
   $("#botonparpadear").click(function(){
      $(".parpadear").parpadea();
   })
})
</script>
   
</head>
<body>
   <p class="parpadear">Hola que tal, esto parpadeó gracias a jQuery!</p>
   <p>Parafo normal que no va a parpadear.</p>
   <p class="parpadear">Sí parpadea</p>
   <p>Parafo normal que no va a parpadear tampoco...</p>
   <div class="parpadear" style="background-color: #ff9966; padding: 10px;">Esta capa también tiene la clase parpadear, con lo que ya se sabe...</div>
   <p><input type="button" value="Parpadea de nuevo" id="botonparpadear"></p>
</body>
</html>

Para acabar, puedes acceder al ejercicio en una página aparte.