Introdução ao jQuery (Parte 3): Esperando que a página carregue e funções anônimas

Propaganda

jQuery é indiscutivelmente uma habilidade essencial para o moderno desenvolvedor web Qual linguagem de programação aprender - Programação da WebHoje vamos dar uma olhada nas várias linguagens de programação da web que impulsionam a Internet. Esta é a quarta parte de uma série de programação para iniciantes. Na parte 1, aprendemos o básico de ... consulte Mais informação , e nesta pequena minissérie espero dar a você o conhecimento para começar a fazer uso dela em seus próprios projetos na web. No primeira parte do nosso tutorial jQuery Tutorial jQuery - Primeiros passos: Noções básicas e seletoresNa semana passada, falei sobre como o jQuery é importante para qualquer desenvolvedor da Web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprender como ... consulte Mais informação , vimos alguns fundamentos de linguagem e como usar seletores; na parte 2, passamos para métodos de manipulação do DOM Introdução ao jQuery (Parte 2): Métodos e Funções

Esta é parte de uma introdução contínua para iniciantes à série de programação web jQuery. A Parte 1 abordou os fundamentos do jQuery sobre como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... consulte Mais informação .

Na parte 3, abordaremos o problema de como atrasar o jQuery até que a página seja carregada, então tentarei explicar o que são funções anônimas e por que você precisa saber sobre elas.

Carregamento atrasado: como e por quê?

Se você está testando parte do código das partes 1 e 2, pode ter se deparado com alguns erros, comportamento estranho ou coisas que simplesmente não estão funcionando. O erro mais comum que experimentei ao aprender jQuery foi o de elementos DOM não serem encontrados - mesmo embora eu pudesse vê-los claramente na fonte da página, jQuery continuou me dizendo que simplesmente não conseguia encontrar eles! Por que é que?

Bem, tudo tem a ver com a ordem em que as coisas são carregadas pelo navegador. É mais simples, se você tiver um script jQuery em execução no navegador antes o elemento DOM que está procurando foi realmente criado, o script carregará primeiro, mas não fará nada porque não pode encontrar o elemento, então o elemento DOM carregará mais tarde. Isso é menos problemático se você colocar todos os seus scripts perto do rodapé, mas ainda pode acontecer.

A solução é envolver seus scripts no que é chamado de evento pronto para documento. Isso faz com que o código fechado espere até que o DOM tenha sido totalmente carregado (até que seja pronto). Usar é simples:

$ (document) .ready (function () { // seu código para atrasar vai aqui. });

Há uma maneira ainda mais curta de fazer isso descrita no documentação jQuery, mas eu recomendo fortemente que você use essa forma para facilitar a leitura do código.

Este evento de documento pronto é outro bom exemplo de um função anônima, então vamos tentar entender o que isso significa.

Funções anônimas

Se, como eu, você tem alguma experiência em programação de nível iniciante, a ideia de funções anônimas - que é fundamental para jQuery e Javascript - pode ser um pouco desconcertante. Por um lado, ele comete erros bastante comuns devido a chaves incompatíveis, e é por isso que vou explicar isso agora. Se você quiser uma explicação completa de por que funções anônimas são melhores do que funções nominais normais funções em um nível mais técnico, eu sugiro ler esta postagem de blog bastante complexa [No Longer Disponível].

Até agora, você provavelmente só encontrou funções nomeadas. Essas são funções que foram declaradas com um nome e, portanto, podem ser chamadas em qualquer outro lugar, quantas vezes você quiser. Considere este exemplo trivial, que registrará uma mensagem no console quando a página for carregada.

function doStuffOnPageLoad () { console.log ("fazendo coisas!"); } $ (documento) .ready (doStuffOnPageLoad);

Isso é útil se sua função for projetada para ser reutilizada, mas, neste caso, é meio complicada, já que realmente queremos que ela seja disparada uma vez, quando a página for carregada. Em vez disso, não nos preocupamos em definir uma função separada e apenas a declaramos inline como um parâmetro quando necessário. O exemplo anterior, portanto, seria melhor reescrito como:

$ (document) .ready (function () { console.log ("fazendo coisas"); });

Você pode não ver muitas vantagens disso no momento - é apenas um pouco menos código neste caso - mas como seus scripts progridem em complexidade, você apreciará não ter que ficar pulando tentando encontrar a função definições. Infelizmente, isso torna as coisas um pouco mais difíceis para iniciantes - basta olhar para todas as chaves - então certifique-se de verificar os seguintes pontos se estiver recebendo erros:

• Número correto de chaves correspondentes - recuar seu código ajuda.
• Cintas encaracoladas vs redondas.
• Instrução que fecha com ponto e vírgula - mas não é necessária após uma chave de fechamento.

Usando um editor de código como Sublime Text 2 Experimente o Sublime Text 2 para suas necessidades de edição de código entre plataformasSublime Text 2 é um editor de código multiplataforma do qual ouvi falar recentemente, e devo dizer que estou realmente impressionado, apesar do rótulo beta. Você pode baixar o aplicativo completo sem pagar um centavo ... consulte Mais informação pode realmente ajudar, pois destaca os colchetes correspondentes e recua automaticamente o código para você. Um editor de código dedicado é realmente essencial.

É isso para esta lição, mas você deve adquirir o hábito de incluir algumas manipulações DOM básicas no evento de documento pronto antes de prosseguir, e comece a editar arquivos em um editor de código se você não já. Na próxima vez, vamos dar uma olhada nos eventos e como eles são usados ​​para adicionar interatividade a uma página - como fazer com que o jQuery faça algo quando um botão é clicado. Perguntas ou comentários sempre bem-vindos abaixo.