Seções iMasters
Carreira + Framework + JQuery

Aprendi jQuery, e agora?

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 é?!

=)

Mensagem do anunciante:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Comente também

14 Comentários

Lopes

excelente artigo

Willian

Bem legal, por favor continue!
Valeu.

Oziel Jose

Muito bom o artigo!

Fernando Sucoski

Bacana B@gaRaiiiii……………..O

Flavio Ferreira

Bom d + !! Parabéns

Danilo

muito bom esse artigo. é bem simples e esclarece muitas dúvidas implicitas de maneira direta.

Sebastião Ricardo Machado

SHOW…
Completou com chave de ouro o primeiro artigo..
Ai sim emmm….

rudy

Não me parece um artigo para iniciantes em jquery. Voce já inicia com exemplos utilizando plugins e seletores de id. Cadê as funções básicas do jquery? Cade as vantagens do jquery tais como selecionar tags por classe facilmente, utilizar recursos como animate, fade, etc. Este não é um artigo para quem pretende abusar das possibilidades que o jquery proporciona.

    William Bruno

    Oi rudy, em nenhum momento eu disse que seria um artigo para iniciantes, e o propósito desse texto não foi falar do básico, e nem de nenhum dos pontos que vc citou.

    Posso fazer um outro artigo com essa intenção, mas ai é outra história.

    Wellington

    Chá pra lá! O artigo foi ótimo, só o cara que não entendeu a proposta… Valeu Willian!

Michael Carajeleascov

Muito bom! Sempre tento analisar os plugins e até mesmo o funcionamento do jQuery, só que nem sempre consigo entender tudo. Seu artigo esclareceu algumas dúvidas! Obrigado.

Marlon Wanger

Otimo artigo , muito bom mesmo
estou aprendendo jquery gostei bastante do que eu li

att

Marlon Wanger

Mateus

Excelente artigo. Muito bom mesmo. Eu fiz o caminho jquery -> javascript, e não me arrependo, inclusive entendi algumas coisas legais no meio do caminho.

Mateus

Marcelo

Olá William,

Bem, primeiro parabéns pelo artigos, sensacionais!!

Agora preciso de uma ajudinha sua:

Qual tecnologia eu preciso aprender para criar um site igual este(http://fashion.me/apps/virtual-model/create-old) com aquele aplicativo de vc clicar numa imagem de roupa e automaticamente vestir a modelo? Parece que aquilo foi feito em Silverlight, que é da microsoft e pago, começei a ler sobre Flex que é seu concorrente(e gratuito) e o framework ExtJS(gratuito) têm tb Jquery, enfim estou querendo aprender como fazer aquilo mas confesso que estou totalmente perdido(sei PHP intermediário).

William, preciso saber qual tecnologia aprender p/ fazer aquilo e de uma luz de alguém tão inteligente como vc;

Abração;
Aguardo resposta

Marcelo

Qual a sua opinião?