Igual que en cualquier lenguaje de programación, podemos utilizar funciones para estructurar el código de nuestros plugins. Del mismo modo, en los plugins podemos tener variables, donde guardar datos u objetos que tengan validez dentro del ámbito de ese plugin. Todo ello nos ayudará bastante a hacer un código más claro, autónomo y compacto.

En este artículo vamos a mostrar cómo sería el esquema de programación de un plugin jQuery un poco más avanzado, que incluye las mencionadas variables y funciones "locales" (o "privadas", como las queramos llamar). Veremos también cómo es posible acceder a esas variables y funciones desde cualquier parte del flujo de código de un plugin, incluso desde el código de otras funciones, como los eventos.

Esquema de programación de un plugin

A continuación vamos a mostrar el esquema de código de un plugin que incluye funciones y variables. Este plugin no sirve para nada, simplemente es una prueba que estoy realizando para ver cómo puedo crear esas variables, acceder a ellas y comprobar su ámbito en distintos puntos del código del plugin.

jQuery.fn.miPlugin = function() {
   
   //variables que son comunes a todos los elementos
   //que había en el objeto jQuery que recibe el método del plugin
   mivariableComun = "comun";
   alert("Nueva invocación de plugin. Mi variable común: " + mivariableComun)
   
   this.each(function(){
      //CÓDIGO DEL PLUGIN
      
      //Elemento sobre el que itero y estoy aplicando el plugin
      elem = $(this);      
      //elem es una variable que podremos utilizar en todo el plugin

      //variables específicas para cada elemento
      var miVariable = "x";
      //miVariable se podrá acceder dentro de todo el código que pongamos aquí
      
      //funcion que será accesible desde cualquier parte del plugin
      function miFuncion(){
         //puedo acceder a variables del plugin
         miVariable = elem.text();
         
         //Muestro el contenido de la variable
         alert("mi variable local y particular de cada plugin: " + miVariable);
         
         //cambio la variable comun a todos los elementos de este plugin
         mivariableComun = "Otra cosa comun!"
      }
      
      //puedo invocar las funciones del plugin
      miFuncion();
      
      //evento, que tiene una función. Puedo acceder a variables y funciones del plugin
      elem.click(function(){
         //puedo acceder a variables del plugin
         alert("Dentro del evento: " + miVariable);
         
         //puedo acceder a funciones
         miFuncion();
      });
      
   });
};

Para definir esas variables y funciones locales al plugin, de manera que estén accesibles dentro del plugin y a su vez tengan acceso a todos los datos del mismo, debemos colocarlas dentro de la iteración que se hace con this.each().

Como se puede entender del código del plugin anterior, todas esas variables y funciones se pueden invocar o acceder en cualquier parte, siempre y cuando estemos dentro del this.each(), donde fueron creadas.

Este plugin, aunque no valga para mucho, lo hemos publicado y se puede ver en marcha en una página aparte.

Lo cierto es que quizás todo esto quede un poco confuso, o no se entienda muy bien para qué podremos querer todas esas variables y funciones locales al plugin. Pero a medida que vayamos trabajando y planteándonos plugins más complicados, veremos que nos son de mucha utilidad para almacenar datos a los que queremos acceder más tarde, o para organizar el código de nuestro plugin en distintas funciones, que se pueden llamar repetidas veces y desde varios sitios.

Para los que conocen un poco de programación orientada a objetos, quizás les aclare un poco este simil: Si un plugin fuese como un objeto, las variables de dentro del bloque this.each() de los plugins serían como las propiedades de ese objeto y las funciones serían como métodos de ese objeto. Aunque hay que salvar las distancias, porque un plugin no sigue exactamente el modelo que conocemos en las clases de programación orientada a objetos.

Para que veamos un caso práctico de plugin que tiene varias variables y funciones locales hemos realizado el ejemplo del siguiente artículo: Checkbox con diseño personalizado con jQuery.