Esquema de programación de un plugin - I

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.