Sobre .Net...

Quando estamos aprendendo JQuery, a primeira coisa que aprendemos é que todo código de inicialização é colocado no método ready, porém, muitas vezes não nos perguntamos o porque isso é feito dessa forma.

Quem nunca viu um navegador lento renderizar a página toda torta e depois de alguns segundos sumir com tudo, deixando tudo organizado?

Com certeza isso é devido à má utilização do método ready(), ou desconhecimento do método live().

JQuery.ready(), como funciona?

Muitos pensam que o ready é executado quando a página é carregada por completo, porém, esse pensamento não está certo.

O JavaScript tem nativamente um método que é executado quando a página está carregada por completo, e esse método é o window.onload, que muitas vezes utilizamos na tag body através do evento onload. O método ready do JQuery não substitui esse método, e nem executa no mesmo instante.

Para o navegador a página está totalmente carregada quando todos os recursos da página estão carregados, e isso inclui todos os arquivos externos, como scripts, música e imagens. Apenas quando todos os recursos estão carregados o navegador invoca o evento Load da janela, ou seja, caso a página esteja carregando um script ou uma imagem muito grande, dependendo do navegador, toda a página pode ser exibida, porém, o Load pode não ser chamado ainda. (Obs.: Dependendo do navegador porque existem alguns navegadores que só exibem a página quando todos os recursos da página estão carregados em memória).

Diferente do Onload, o ready executa quando a estrutura do documento está pronta, ou seja, quando o DOM foi carregado por inteiro, mesmo que os recursos da página, como scripts e imagens, ainda não tenham sido carregados. Isso pode acontecer porque muitos navegadores modernos carregam os recursos de forma assíncrona, ou seja, exibe a página, apenas com CSS e texto, por exemplo, e vai carregando imagens paralelamente, sem impedir que o usuário possa começar a ler o conteúdo da página.

Já aconteceu comigo de utilizar um plugin JQuery que carregava os scripts necessários por demanda, e muitas vezes, ao chamar a criação do plugin no método ready, era retornado o erro O objeto não dá suporte para a propriedade ou método, isso porque o arquivo que continha o plugin que eu tentava chamar ainda não estava carregado. Portanto, se você carrega arquivos de forma dinâmica, o ready não é uma boa opção.

Caso seja realmente interessante carregar scripts dinamicamente, crie métodos com callbacks que indiquem que os arquivos já foram carregados, para ai sim você poder atribuir eventos e plugins aos controles.

JQuery.live(), quando usar?

Agora que já entendemos como funciona o método ready(), podemos conhecer o live().

Imagine que você realmente precise carregar algumas informações assíncronas para criar a tela, por exemplo, as informações para criar tabs carregam de um arquivo de acordo com um script de globalization, que é carregado depois que o navegador identifica a linguagem do browser, ou imagine que alguns trechos do seu HTML serão adicionados/carregados, depois que o DOM já está pronto, e portanto, depois que o ready já executou, ou você não quer correr o risco que um browser renderize o começo da página antes de montar todo o DOM, e o começo da página em vez de exibir suas tabs, exiba uma lista (LI) de palavras, pois o ready não executou ainda e você não pôde ligar os métodos dos plugins.

Essas situações podem acontecer e é aí que você utiliza o live.

O live() gerencia eventos em controles que são dinamicamente adicionados ou removidos de uma página, você pode utilizar a chamada live em controle que nem existem ainda, mas que virão a existir durante a vida da página.

Por exemplo, o código abaixo:

<script type="text/javascript">
$().ready(function () {
        $("input:button").click(function () {
            alert(this.value);
            $("<input value=""+$("input:button").length+"" type="button" />").appendTo("#div");
        });
    });
</script>
<div id="div">
    <input type="button" id="btnClick" value="Botao1" />
    </div>

O código acima, do jeito que está, dentro de um ready, sempre que for clicado no primeiro botão, será exibido um alerta com o value do botão, e adicionará um novo. Porém, ao clicar nos adicionados, nada acontecerá, porque uma vez adicionado evento ao botão na criação do DOM, nada mais vai acontecer, porém, com o método live, os controles adicionados dinamicamente também irão receber o evento.

O código ficaria assim:

<script type="text/javascript">
$("input:button").live("click",function () {
            alert(this.value);
            $("<input value=""+$("input:button").length+"" type="button" />").appendTo("#div");
        });
</script>
<div id="div">
    <input type="button" id="btnClick" value="Botao1" />
    </div>

Desta forma, sempre que for adicionado um novo controle, o novo controle automaticamente irá receber o evento. Isso pode ser muito útil para controle como grid, por exemplo.

Identificando todas as situações onde o live poderia ser utilizado, poderíamos tirar bastante processamento do ready, o que deixaria o processamento da página muito mais rápido, pois os eventos já seriam adicionados ao controle no momento da criação, não só quando o DOM fosse totalmente criados. Fora que mesmo que fossem criados dinamicamente, como exemplificado acima, os eventos já seriam adicionados, poupando alguma quantidade de código, e deixando o documento menor.

E um detalhe interessante, você pode adicionar vários eventos ao mesmo tempo com o live, apenas separando os nomes dos eventos com espaço, por exemplo:

$("input:button").live("mouseover mouseout",function () {...

Conclusão

Nem tudo que a gente aprende no começo é a melhor coisa a se fazer em todas as situações. Nesse post não consegui abordar todos os prós e contras do live e do ready, mas dando uma estudada melhor na biblioteca do JQuery vamos descobrir muitas coisas interessantes.

Vou voltar a falar mais coisas sobre essa biblioteca incrível nos próximos post, tentando sempre melhorar o conhecimento dos métodos que facilitam nossa vida no JavaScript.

Fica ai a dica!

Abraços e até o próximo post.