Esquema de programação de um plugin
A seguir vamos mostrar o esquema de código de um plugin que inclui funções e variáveis. Este plugin não serve para nada, é apenas um teste que estou realizando para ver como posso criar essas variáveis, acessá-las e comprovar seu âmbito em distintos pontos do código do plugin.jQuery.fn.meuPlugin = function() {
//variáveis que são comuns a todos os elementos
//que havia no objeto jQuery que recebe o método do plugin
minhavariavelComum = "comum";
alert("Nova invocação de plugin. Minha variável comum: " + minhavariavelComum)
this.each(function(){
//CÓDIGO DO PLUGIN
//Elemento sobre o que itero e estou aplicando o plugin
elem = $(this);
//elem é uma variavel que poderemos utilizar em todo o plugin
//variáveis específicas para cada elemento
var minhaVariavel = "x";
//minhaVariavel poderá ser acessada dentro de todo o código que coloquemos aqui
//funcao que será acessível desde qualquer parte do plugin
function minhaFuncao(){
//posso acessar variaveis do plugin
minhaVariavel = elem.text();
//Mostro o conteudo da variavel
alert("minha variavel local e particular de cada plugin: " + minhaVariavel);
//troco a variavel comum a todos os elementos deste plugin
minhavariavelComum = "Outra coisa comum!"
}
//posso invocar as funcoes do plugin
minhaFuncao();
//evento, que tem uma funcao. Posso acessar variaveis e funcoes do plugin
elem.click(function(){
//posso acessar variaveis do plugin
alert("Dentro do evento: " + minhaVariavel);
//posso acessar funcoes
minhaFuncao();
});
});
};
//variáveis que são comuns a todos os elementos
//que havia no objeto jQuery que recebe o método do plugin
minhavariavelComum = "comum";
alert("Nova invocação de plugin. Minha variável comum: " + minhavariavelComum)
this.each(function(){
//CÓDIGO DO PLUGIN
//Elemento sobre o que itero e estou aplicando o plugin
elem = $(this);
//elem é uma variavel que poderemos utilizar em todo o plugin
//variáveis específicas para cada elemento
var minhaVariavel = "x";
//minhaVariavel poderá ser acessada dentro de todo o código que coloquemos aqui
//funcao que será acessível desde qualquer parte do plugin
function minhaFuncao(){
//posso acessar variaveis do plugin
minhaVariavel = elem.text();
//Mostro o conteudo da variavel
alert("minha variavel local e particular de cada plugin: " + minhaVariavel);
//troco a variavel comum a todos os elementos deste plugin
minhavariavelComum = "Outra coisa comum!"
}
//posso invocar as funcoes do plugin
minhaFuncao();
//evento, que tem uma funcao. Posso acessar variaveis e funcoes do plugin
elem.click(function(){
//posso acessar variaveis do plugin
alert("Dentro do evento: " + minhaVariavel);
//posso acessar funcoes
minhaFuncao();
});
});
};
Como se pode entender do código do plugin anterior, todas essas variáveis e funções podem ser invocadas ou acessadas em qualquer parte, desde que estejamos dentro do this.each(), onde foram criadas.
Nota: Antes do this.each()também se podem colocar variáveis, mas há que ter em conta que existirá uma mesma cópia dessa variável para todos os elementos onde se está aplicando o plugin.Vejamos o seguinte HTML.
<div id="esteDiv">
Este div
</div>
<span class="meusspan">span1</span>
<span class="meusspan">span2</span>
<span class="meusspan">span3</span>
Agora vejamos estas duas chamadas ao plugin anterior.
$("#esteDiv").meuPlugin();
$(".meusspan").mePlugin();
Como se pode ver, com a primeira chamada se executa o plugin sobre um elemento da página com id="esteDiv". É um único elemento da página, portanto o plugin só se aplica uma vez. No entanto, na segunda chamada, se executa o plugin sobre vários elementos com a class de CSS "meusspan". Neste segundo caso o plugin se executará sobre três elementos e então poderemos comprovar que as variáveis que se haviam definido fora do this.each() só existem uma vez e seu valor é comum para os três elementos sobre os que se aplicou o plugin na segunda chamada.
Certamente, talvez, tudo isto fique um pouco confuso, ou não se entenda muito bem para que podemos querer todas essas variáveis e funções locais ao plugin. Porém, à medida que vamos trabalhando e propondo-nos plugins mais complicados, veremos que são de muita utilidade para armazenar dados que queremos acessar mais tarde, ou para organizar o código de nosso plugin em diferentes funções, que podem ser chamadas repetidas vezes e desde vários lugares.<div id="esteDiv">
Este div
</div>
<span class="meusspan">span1</span>
<span class="meusspan">span2</span>
<span class="meusspan">span3</span>
Agora vejamos estas duas chamadas ao plugin anterior.
$("#esteDiv").meuPlugin();
$(".meusspan").mePlugin();
Como se pode ver, com a primeira chamada se executa o plugin sobre um elemento da página com id="esteDiv". É um único elemento da página, portanto o plugin só se aplica uma vez. No entanto, na segunda chamada, se executa o plugin sobre vários elementos com a class de CSS "meusspan". Neste segundo caso o plugin se executará sobre três elementos e então poderemos comprovar que as variáveis que se haviam definido fora do this.each() só existem uma vez e seu valor é comum para os três elementos sobre os que se aplicou o plugin na segunda chamada.
Para aqueles que conhecem um pouco de programação orientada a objetos, talvez lhes esclareça um pouco este similar: Se um plugin fosse como um objeto, as variáveis de dentro do bloco this.each() dos plugins seriam como as propriedades desse objeto e as funções seriam como métodos desse objeto. Embora tenha que se manter a distância, porque um plugin não segue exatamente o modelo que conhecemos nas classes de programação orientada a objetos.
0 comentários:
Postar um comentário