25
0
Em outro artigo já compartilhei que, na minha opinião, o fluxo correto, é primeiro aprender javascript, para só depois estudar a biblioteca.
Mas e se você já está no meio do caminho?
Achava javaScript difícil e chato, não via nem utilidade. E então foi para o mundo do “Write Less, Do More”, sem ter uma boa base em js. Dependendo do tempo e experiência que você tem em programação, pode saber o que está fazendo, ou não. Enfim, gostaria de listar algumas coisas interessantes sobre a biblioteca, mas que pelo menos eu, nunca vi sendo discutido por aí...
jQuery é apenas javascript
Isso e nada mais. Se fizeram com a lib, dá para fazer sem. E o mesmo se aplica quando precisamos pensar que a estrutura da sintaxe do jQuery é apenas javascript.
Vamos olhar por partes:
$(document)
Estamos invocando uma função, chamada $, e passando o objeto global document para ela.
.ready()
Agora conseguimos usar um método apartir da função anterior, porque jQuery foi escrito com base em no pattern Fluent Interface. O método ready(), aguarda que o DOM esteja pronto. Isso acontece antes do evento window.onload, pois o window.onload espera também que as imagens estejam todas carregadas. Enqnto o .ready() aguarda apenas a marcação html.
Funções anônimas
Okay, continuando temos sempre um:
function(){
}
E o que é isso ? Apenas uma function, só que sem nome.
Estamos acostumados com funções assim:
function a(){}
Sendo "a", o nome da nossa função.
Passamos uma função anônima para o callback do método .ready()! Repare quantas pequenas coisas fazíamos sem notar!
E qual o ponto interessante disso? O ponto é que podemos fazer o seguinte:
var a = function(){
alert( 'ae' );
};
$(document).ready( a );
..que, pelo menos, tecnicamente deve funcionar, certo? Certíssimo, funciona!
Deu na mesma, se tivessemos feito:
$(document).ready(function(){
alert( 'ae' );
});
Não estou roubando. Se fosse um plugin:
var a = function(){
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
});
};
$(document).ready( a );
Também continuaria funcionando. Tudo normal.
jSON
Veja que interessante agora, o plugin recebe como parâmetro um objeto javascript. Só que estamos jogando esse objeto diretamente ali. Se por algum motivo tivermos que instanciar novamente o mesmo plugin, já vi códigos assim:
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
});
$('a#tal').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
});
Deve ser evidente a duplicação de instruções. E o que devemos fazer com isso? Juntar em uma só!
Se não pudermos fazer:
$('a[rel*=facebox], a#tal').facebox(
Por qualquer motivo, seja falta de suporte a arrays de objetos do plugin, ou escopos diferentes, podemos dar um nome para esse nosso jSON de configuração, e então enviar ele:
var configs = {
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
};
$(document).ready(function(){
$('a[rel*=facebox]').facebox( configs );
$('a#tal').facebox( configs );
});
O bom disso, é que tudo funciona como deveria. Afinal, estamos falando de javascript e a estrutura da linguagem permite essas coisas.
Agora colocando tudo de uma vez:
var configs = {
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
};
var a = function(){
$('a[rel*=facebox]').facebox( configs );
$('a#tal').facebox( configs );
};
$(document).ready( a );
Pode estar meio estranho, ou até ilegível, já que não estamos acostumados com isso. É normal a forma com que escrevi, e é exatamente isso que fazemos todos os dias. Só que sem notar. E esse é o problema,somos mais fortes e programaremos melhor, quqnado entendermos cada detalhe do que fizermos.
noConflict()?
Hum… essa parte é interessante!
(function( $ ){
$(document).ready(function(){
alert('ae');
});
})(jQuery);
E o que é isso?
Trata-se de função anônima autoexecutável que recebe o objeto jQuery como parâmetro.
Veja que o argumento é $, então podemos usar esse símbolo normalmente dentro dessa function, sem nos preocupar com conflito, pois externamente a essa function passamos um jQuery e o $ ficou restrito ao escopo dessa anônima.
Clousures é um conceito muito interessante. Vale a pena pesquisar e entender a beleza. Lógico que você não precisa se lembrar de tudo o que eu disse, cada vez que for escrever algo com jQuery.
Mas é melhor saber o que está usando do apenas usar sem saber, não é?!
