miércoles, 10 de diciembre de 2014

Esquema de programación de un plugin - II

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.

No hay comentarios:

Publicar un comentario