Funciones y variables dentro de plugins jQuery

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.

Nota: Antes del this.each() se pueden colocar también variables, pero tenemos que tener en cuenta que existirá una misma copia de esa variable para todos los elementos donde se está aplicando el plugin.Veamos el siguiente HTML.
<div id="esteDiv">
   Este div
</div>
<span class="misspan">span1</span>
<span class="misspan">span2</span>
<span class="misspan">span3</span>
Ahora veamos estas dos llamadas al plugin anterior.
$("#esteDiv").miPlugin();
$(".misspan").miPlugin();
Como se puede ver, con la primera llamada se ejecuta el plugin sobre un elemento de la página con id="esteDiv". Es un único elemento de la página, luego el plugin sólo se aplica una vez. Sin embargo, en la segunda llamada, se ejecuta el plugin sobre varios elementos con la class de CSS "misspan". En este segundo caso el plugin se ejecutará sobre tres elementos y entonces podremos comprobar que las variables que se habían definido fuera del this.each() sólo existen una vez y su valor es común para los tres elementos sobre los que se aplicó el plugin en la segunda llamada.

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.

Fuente:enlace