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