Este artigo foi traduzido por máquina.

Cutting Edge

Explorar jQuery rich Client script com, parte 2

Dino Esposito

Conteúdo

O modelo de eventos jQuery
Ligação de manipuladores de eventos
Disparar eventos por programação
Métodos de relacionados ao evento especiais
Auxiliares de evento
Efeitos visuais
Animação personalizada
Recursos do AJAX
Cache de cliente
Soma para cima

Aplicativos da Web exigem recursos de cliente poderoso.Os desenvolvedores da Web tradicionalmente têm se apoiou no JavaScript para oferecer esse poder.No entanto, JavaScript não processado tem suas limitações, alguns deles podem ser resolvidas por meio de bibliotecas e orientação a objetos.

Há muitas bibliotecas JavaScript disponível, mas após um tempo a mesma todos eles aparência.Se você não pode decidir onde começar, sugiro Iniciar aqui — com jQuery.Como discutido no mês passado, jQuery tem alguns recursos úteis, incluindo seletores, filtros, conjuntos de quebra automática e o recurso de chave — encadeadas funções.(Consulte"Explorar jQuery rich Client script com, parte 1.") Este mês, examinarei alguns outros, incluindo o modelo de eventos, efeitos visuais, cache e recursos do AJAX.

O modelo de eventos jQuery

Mais freqüentemente que não, navegadores tem seu próprios representação de eventos.O Internet Explorer tem seu próprio modelo de eventos, como Firefox e Safari.Portanto, obtenção de compatibilidade de vários navegadores para eventos não é nenhuma tarefa fácil sem o auxílio de uma boa biblioteca.Em seguida, praticamente qualquer biblioteca JavaScript deve fornecer um modelo abstrato para manipular eventos.A biblioteca jQuery não é nenhuma exceção.

O evento jQuery tratamento API é organizado em dois grupos de funções.Existem alguns métodos de evento gerais para adicionar e remover manipuladores, além de uma longa lista de funções auxiliares.Métodos gerais fornecem a base para auxiliares trabalhar; e auxiliares jQuery programação fácil e eficiente.

A Figura 1lista os métodos que você pode usar para vincular e desvincular manipuladores de eventos para os elementos correspondentes de um conjunto de quebra automática.

A propósito, vale a pena observar que jQuery vernacular um método é código usado para processar o conteúdo do conjunto de quebra automática.Uma função, por outro lado, é o código que executa uma operação que não especificamente destina ao processar o conteúdo de um conjunto de quebra automática.

Ligação de manipuladores de eventos

O método bind anexa um manipulador para um determinado evento a todos os elementos no conjunto de quebra automática.A assinatura completa do método bind é esta:

bind(eventName, eventData, eventHandler)

O primeiro argumento é uma seqüência de caracteres e indica tratar o evento. O segundo argumento representa os dados de entrada que vem com o evento. Finalmente, o terceiro argumento é a função JavaScript para ligar.

Como jQuery oferece um modelo de eventos abstrata, é importante examinar a lista de eventos com suporte. A lista completa é na Figura 2 .

Devido as diferenças de navegador e o nível de abstração fornecido pela biblioteca, a lista é menos óbvia que parece uma olhada primeiro. Por exemplo, alterar e selecione eventos endereço muito diferentes cenários. O evento de alteração refere-se a uma alteração no valor de um elemento input, incluindo listas de caixas de texto e a lista suspensa. O evento selecione simplesmente se refere a seleção de texto em um elemento textarea ou de entrada.

Também existem diferenças sutis entre os pares de eventos MouseOver/MouseEnter e MouseLeave/Mouseout. Eles têm quase a mesma descrição e diferem apenas porque mouseover e mouseout também são acionados quando o usuário move dentro e para fora do elementos filho. Para elementos com sem filhos, esses eventos são equivalentes.

É possível que você registre o mesmo manipulador de JavaScript para vários eventos. Você pode fazer que separando os nomes de eventos com um espaço em branco. O exemplo a seguir alterna um estilo CSS quando o mouse entra ou sai uma marca DIV com um determinado estilo:

$("div.sensitiveArea").bind("mouseenter mouseleave", 
   function(e) {
        $(this).toggleClass("hovered");
    }
);

O segundo argumento do método bind é opcional e, se especificado, indica quaisquer dados definidos pelo usuário sejam passadas para o manipulador. a Figura 3 ilustra como você pode alternar o estilo CSS de uma caixa de texto usando um manipulador de JavaScript em vez disso, genérico.

A Figura 3 alternar estilo de caixa de texto

<script type="text/javascript">
  $(document).ready( 
     function() {
       $("#TextBox1").bind("focus", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
       $("#TextBox1").bind("blur", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
     }
  );

  function setCSS(e)
  {
     var name = "#" + e.target.name;
     $(name).toggleClass(e.data.cssStyle);
  }
</script>

Observe que o código anterior é puramente ilustrativos da função ligação e pode não funcionar corretamente como uma maneira de alternar estilos. É preferível usar a: concentrar pseudo-class para adicionar um estilo especial a um elemento enquanto o elemento tem foco. Navegadores mais recentes suportará-lo. Manipulador de JavaScript é uma função que declara e recebe uma estrutura de dados do evento. Esse objeto tem os membros listados na Figura 4 .

Vale a pena observar que a propriedade de destino retorna um objeto de referência DOM, não um jQuery quebradas conjunto. Para calcular a identificação do elemento, você deve chamar a propriedade de identificação ou nome. O manipulador de recupera quaisquer dados personalizados que você passa por sua propriedade expando de dados.

Dois métodos concluir a definição do objeto de dados do evento. O método preventDefault interrompe o navegador de realizar a ação padrão que normalmente seria necessário após o evento. Por exemplo, se você chamar preventDefault em um manipulador de envio, nenhum envio de formulário deve ocorrer. O método preventDefault não pare a subida do evento por meio pilha do objeto de, no entanto.

Por outro lado, o método stopPropagation pára a subida do evento, mas não impede a ação. Se você deseja parar a propagação de eventos e impedir que a ação padrão, não chamar um desses métodos; basta retornar false do manipulador de eventos.

Quaisquer manipuladores conectados através do método ligação podem ser desanexados usando o método unbind. O método usa dois parâmetros opcionais — o nome do evento e o manipulador. Se nenhum for especificado, todos os manipuladores serão removidos de todos os elementos no conjunto de quebra automática.

Disparar eventos por programação

O disparador de método (veja a Figura 1 ) instrui jQuery para chamar qualquer manipuladores registrados com o evento especificado. Para simular o usuário clicar em um determinado botão, use:

$("#Button1").trigger("click");

O código não faz nada se nenhum manipulador de JavaScript é registrado com o evento click do elemento.

O método triggerHandler difere do disparador de duas maneiras. Em primeiro lugar, o triggerHandler método também impede que padrão ação o navegador. Em segundo lugar, o método afeta apenas um elemento um elemento, não todo o conjunto de quebra automática. Se o conjunto de quebra automática contém vários elementos correspondentes, somente o primeiro será necessário o manipulador acionado para o evento especificado.

Se você usar o método triggerHandler para programaticamente disparar o evento de foco em um campo de entrada, como você verá em seguida, executa qualquer manipulador registrado mas a ação padrão de mover o foco de entrada para o campo não acontece.

 $("#TextBox1").triggerHandler("focus");

Figura 5 mostra o que parece.

A Figura 5 disparar o evento de foco por programação

Métodos de relacionados ao evento especiais

A biblioteca jQuery fornece três métodos de evento comumente usadas: pronto, passe, alternar. O método pronto obtém uma função e executa quando o DOM estiver pronto para ser partilhado com e manipulados pelo código:

$(document).ready(
  function() {
...
  }
);

Bibliotecas precisam essa capacidade, que substitui o evento onload do objeto de janela do navegador. O evento onload acontece muito tarde — quando todas as imagens também foram carregadas. O evento pronto, por outro lado, é acionado quando a página e a biblioteca foram totalmente inicializadas.

Na função em foco, você colocar o código que você deseja executar quando o usuário entra e sai de um conjunto de elementos de página. A função de foco aceita dois manipuladores. A primeira é executado quando o mouse focaliza um elemento no conjunto de quebra automática e o segundo executa quando o mouse sai área do elemento.

Finalmente, a função de alternância executa uma tarefa ainda mais inteligente. Ele leva dois ou mais manipuladores de e executa-los como alternativa como os cliques do usuário. Em outras palavras, o primeiro clique em um elemento correspondente executa o manipulador primeiro, o segundo clique executa o manipulador segundo e assim por diante. Quando o final da lista manipulador é atingido, todos os cliques subseqüentes executar volta da primeira função na lista.

Auxiliares de evento

Para reforçar a idéia de sua usabilidade extrema, a biblioteca jQuery vem com uma lista de métodos auxiliares para simplificar a ligação de manipuladores para eventos comuns. Auxiliares existem duas formas: com e sem um parâmetro de função.

Auxiliares que aceita um parâmetro recebem uma função JavaScript ser executado quando o evento é acionado. Se nenhum parâmetro for especificado, o método apenas dispara o evento determinado em qualquer elemento no conjunto de quebra automática. a Figura 6 mostra a lista de auxiliares com suporte e se distingue entre métodos de fichário e métodos do disparador.

O código a seguir registra um evento click para um determinado botão. A ligação entre o evento e o manipulador ocorre como logo conforme o documento está totalmente carregada e pronto para ser manipulado programaticamente.

$(document).ready( function() {
   $("#btnProcess").click(
       function(e) {
this.text("Please wait ... ");
       }
   );
});

Alguns eventos como a rolagem, redimensionar e eventos de mouse faz sentido somente se disparada por uma ação explícita do usuário. Esses eventos não têm um método de disparador, como mostrado na Figura 6 .

Efeitos visuais

Um dos fatores mais responsáveis pela popularidade da biblioteca jQuery é o mecanismo interno para efeitos visuais. A biblioteca, você encontrará um mecanismo eficiente para a criação de animações personalizadas e alguns recursos para implementar rapidamente efeitos comuns, como esmaecimento e deslizante.

Efeitos predefinidos podem ser divididos em três grupos de acordo com os atributos CSS elas atuam em: visibilidade, deslizante e dégradé. a Figura 7 lista todos os efeitos disponíveis nativamente.

Todos os métodos na Figura 7 aplicam-se a qualquer elemento correspondente em um conjunto de quebra automática. Visibilidade métodos atuam sobre o atributo CSS de exibição e mostram ou ocultar elementos usando uma BOM animação interna. Por exemplo, o código a seguir unveils um painel HTML como o usuário clica no botão:

$("btnShowOrders").click(
   function(e) {
      $("#panelOrders").show(2000);
   }
);

A animação leva dois segundos para concluir. Argumentos opcionais, que você pode especificar visibilidade métodos incluem a velocidade da animação e um retorno de chamada para chamar após a conclusão. O tipo de animação está codificado e progressivamente revela o conteúdo do canto superior esquerdo.

Métodos deslizante funcionam no atributo de altura de CSS de elementos correspondentes. O método slideDown aumenta a altura de um elemento em um loop para que a exibição acontece por revelar o elemento progressivamente. O método slideUp faz o inverso e oculta o elemento deslizando-lo, da altura real como zero.

Métodos de esmaecimento execute um modelo parecido com deslizante métodos. Que dão suporte a opcionais velocidade e a conclusão retorno de chamada e Mostrar/Ocultar elementos loop no atributo de opacidade de CSS (consulte a Figura 8 ).

A Figura 8 esmaecimento

$("#btnShowOrders").click(
   function(e) 
   {
      // Hide the current panel.
      $("#panelOrders").fadeOut(1000);

      populateOrderPanel();

      // Show new content and when done 
      //apply some CSS styles
      // to denote the new content.
      $("#panelOrders").fadeIn(2000, 
         function() {
            $("#panelOrders").css(...);
         }
      );
   }
);

O exemplo anterior mostra como fade out um painel HTML existente, atualizá-la enquanto oculta e, em seguida, exibi-lo novamente usando fade-in animação. Observe que você pode indicar a velocidade desejada usando uma duração explícita em milissegundos ou recorrer a uma seqüência que representa uma das três velocidades predefinidas: lenta, normal ou rápida.

Animação personalizada

Todos os efeitos visuais listados na Figura 6 são implementados na parte superior do mecanismo jQuery animação. O coração desse mecanismo é a função animação:

function animate( prop, speed, easing, callback ) 
{ 
  …
}

O primeiro argumento para a função é uma matriz de pares de propriedade/valor em que a propriedade se refere a um atributo CSS. A função simplesmente anima a propriedade CSS de cada elemento correspondente da seu valor atual com o valor especificado.

Argumentos adicionais, opcionais, que você pode especificar incluem a velocidade da animação e o retorno de chamada de conclusão. O argumento easing indica o nome do efeito easing que você deseja usar durante as transições. Há dois valores internos: linear e swing. Outras opções easing podem ser adicionadas usando um plug-in.

Eis uma chamada de exemplo para o método de animação:

$("#Element1").animate(
   { width: "70%",
     opacity: 0.4,
     borderWidth: "10px"
   }, 
   3000);

No final da animação, o elemento correspondente será ter a largura especificada, opacidade e largura da borda. A animação será concluída em três segundos e variar atributos CSS de seus valores atuais cima ou para baixo para o valor de destino.

Observe que as propriedades CSS devem ser especificadas usando camelCase, isto é o primeiro caractere é minúsculo e o primeiro caractere de cada palavra seguinte é maiúsculo. Como exemplo, para animar a borda de um elemento você deve usar "borderWidth" em vez do nome de propriedade de original do CSS de border-width.

O método animado também suporta animações relativas, como o aumento (ou diminuir) um valor de propriedade por uma porcentagem ou por um valor fixo. Por exemplo, o trecho de código a seguir mostra como aumentar a largura de um elemento em 20 % e escurecer seu conteúdo por um valor de 0.4... Eu também tenha especificado que todas as alterações devem ser aplicadas em dois segundos.

$("#Panel1").animate(
   { width: "+=20%",
     opacity: "-=0.4"
   }, 
   2000);

Finalmente, observe que todas as animações em jQuery automaticamente são enfileiradas e executar em ordem, um após o próximo. Animações na fila são a pré-condição necessário para encadear várias chamadas nos elementos em um conjunto de quebra automática. Animações na fila, entretanto, são apenas o comportamento padrão. Como desenvolvedor, você terá as ferramentas para fazer algumas animações executados em paralelo.

Para obter alguns paralelismo, você criar uma fila de animação usando uma sobrecarga do método animação:

function animate( prop, options )
{
   …
}

Como na assinatura anterior, o primeiro argumento indica o conjunto de atributos de estilo que você deseja animar e os valores que você deseja alcançar.

O segundo argumento indica um conjunto de opções com o qual deseja configurar a animação. Opções incluem a duração, facilitando, retorno de chamada de conclusão e um valor booleano para indicar se ele é uma animação na fila — true é o padrão.

Definindo o atributo de fila para false nas opções da chamada de animação, você executar a animação imediatamente sem enfileiramento. Vamos considerar o trecho de código a seguir:

$("#div1").animate({ width: "90%" }, {queue:false, duration:5000 });
$("#div1").animate({ fontSize: '10em' }, 1000);
$("#div1").animate({ borderWidth: 5 }, 1000);

A primeira animação não na fila e executa imediatamente. O segundo não é enfileirado mas é considerada a primeira na fila para que ele é executado bem. O efeito é que as duas primeiras animações iniciar em conjunto. A terceira animação é enfileirada e começa assim que termina a segunda animação — um segundo mais tarde. Porque a primeira animação leva cinco segundos, a animação de borda também é executado em paralelo com a animação que altera a largura do elemento.

Recursos do AJAX

O que uma biblioteca JavaScript moderna seria sem uma infra-estrutura sólida para chamadas assíncronas de AJAX? No jQuery, o suporte de AJAX é baseado na função ajax, através do qual pode controlar todos os aspectos de uma solicitação da Web. Eis uma maneira comum de invocar a função de ajax:

$.ajax(
 {
   type: "POST",
   url: "getOrder.aspx",
   data: "id=1234&year=2007",
   success: function(response) {
     alert( response );
   }
 }
);

A função aceita uma lista de parâmetros agrupados em um único objeto. Opções viáveis são tipo, url, dados, tipo de dados, cache, assíncrona, nome de usuário, senha, tempo limite e ifModified.

Em particular, o parâmetro de tipo de dados indica o tipo de resposta esperada, ao passo que o parâmetro de cache (se definida como false) força solicitada recursos não para ser armazenada em cache pelo navegador. Outros parâmetros como tipo, senha, nome de usuário e url são auto-explicativos.

As opções para a função de ajax também incluem um número de retornos de chamada opcionais para ser chamado antes de qualquer uma das etapas mais relevantes do ciclo de vida do objeto XMLHttpRequest subjacente. O retorno de chamada bem-sucedidos indica o retorno de chamada de conclusão. A função de retorno de chamada recebe a resposta como seu argumento único. Outras chamadas de retorno são erro, beforeSend e concluir. O retorno de chamada completo é executado no final da solicitação quando o erro ou êxito retornos de chamada tem sido chamados.

Curiosamente, a função de ajax lista um retorno de chamada para pré-processar a resposta da Web antes que ele é retornado para o código de chamada. Esse retorno de chamada é dataFilter e controla a resposta não processada baixada pelo XMLHttpRequest. O objetivo de retorno de chamada é filtrar a resposta de forma que apenas corrigidos dados compatíveis com o tipo de dados esperado são retornados para o chamador. A função de retorno de chamada recebe dois argumentos: os dados brutos retornados do servidor e o valor atribuído para o parâmetro de tipo de dados.

Ao usar a biblioteca jQuery, você mal poderia usar a função de ajax diretamente. Com mais freqüência você acabaria usando algumas dos auxiliares de AJAX como getScript, carregar ou getJSON.

O código a seguir mostra como carregar um arquivo de script sob demanda. O script é executado automaticamente após o carregamento:

$.getScript("sample.js");

Outro dado bastante útil código é a função de carga. A função de carga baixa marcação HTML e injeta ela automaticamente no atual DOM. O código a seguir mostra como preencher um menu programaticamente:

$("#menu").load("menu.aspx");

O conteúdo da URL está anexado a subárvore DOM enraizada no quaisquer elementos que coincidam com o seletor. O método de carregamento padrão é uma solicitação GET, mas você pode alterá-lo a POST, simplesmente adicionando um argumento de dados, como visto aqui:

$("#links").load(
   "menu.aspx", 
   { topElement: "Books" },
   function() 
   {
       // completion callback code
   }
);

Como mostrado acima, um retorno de chamada também pode ser especificado para executar após a conclusão do download.

Também é possível especificar um seletor jQuery na URL para que a marcação de entrada é pre-filtered para selecionar apenas elementos correspondentes. A sintaxe simplesmente implica que você adicionar uma expressão de seletor à URL. Aqui está um exemplo que extrai todos os elementos de <li> de um elemento de <ul> chamado menuItems:

$("#links").load("/menu.aspx ul#menuItems li");

Finalmente, você tem obter, postagem e getJSON funções para realizar direcionar GET e POSTs e obter JSON conteúdo de uma URL.

Cache de cliente

Um cache do lado do cliente é essencial no código de JavaScript não trivial. Nesse contexto, um cache é uma matriz onde os desenvolvedores podem armazenar dados que está relacionado a um determinado elemento DOM. No código a seguir, uma URL é chamada para determinar se o conteúdo de uma caixa de texto é válido e, em seguida, a resposta é armazenada em cache em um elemento de matriz chamado IsValid.

var url = "...";
var contentIsValid = $.get(url);
$("#TextBox1").data("IsValid", contentIsValid);

Cada elemento DOM pode ter seu próprio cache local. JQuery, você usa o método de dados nos elementos em um conjunto de quebra automática.

Para ler novamente o conteúdo do armazenamento, use a mesma função de dados com apenas um argumento — o nome do elemento:

alert($("#grid").data("Markup"));

Elementos adicionados ao cache podem ser removidos usando a função removeData.

Seria bom saber por que ele é melhor usar a função de dados de propriedades expando. Uma propriedade expando adiciona informações personalizadas a um elemento DOM usando um atributo HTML padrão. Definitivamente, é um tipo de armazenamento em cache do lado do cliente, mas alguns navegadores não podem como atributos personalizados. Nesse caso, você normalmente recorrer ao uso de atributos padrão como alt ou rel de maneira diferente do padrão. Uma estrutura de armazenamento em cache do lado do cliente como a função de dados armazena dados em objetos de JavaScript antigos sem formatação e mantém um link para o elemento do DOM de destino usando um dicionário. Nenhum conflito com navegadores feito dessa maneira, é possível.

Soma para cima

JavaScript permanece praticamente inalterado cerca de dez anos. Embora uma revisão significativa do idioma está em ordem, é de alguém adivinhar quando ele será ser totalmente definido e, mais importante, se será ela tem o suporte de navegadores. Ano passado, um consenso foi atingido ao redor de uma versão da linguagem que se situa em entre o idioma atual e a linguagem de 4 ECMAScript nova proposta que foi significativamente diferente de JavaScript hoje. O novo projeto que deve gerar JavaScript 2.0 é chamado Harmony.

Qualquer forma de você examiná-la, bibliotecas de vários navegadores parece ser a maneira confiável somente para planejar eficiente e eficaz desenvolvimento do lado do cliente, pelo menos para os próximos anos. Nesse contexto, jQuery é uma excelente biblioteca será integrada em futuras ferramentas de desenvolvimento da Microsoft. Dê uma olhada fechá-lo; você ficará feliz que fez! Codificação jQuery feliz!

Envie suas dúvidas e comentários para Dino para cutting@microsoft.com.

Dino Esposito é um arquiteto na arquitetura na IDesign e o co-autor de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). Residente na Itália, Dino é palestrante assíduo em eventos do setor no mundo inteiro. Você pode ingressar em seu blog em weblogs.asp. NET/despos.