Escolar Documentos
Profissional Documentos
Cultura Documentos
MasterTraining Manual JQuery
MasterTraining Manual JQuery
www.mastertraining.com.br
JQUERY
O bsico de jQuery
Sumrio
1. jQuery bsico ....................................................................................................... 7
$(document).ready() ............................................................................................ 7
Selecionando elementos ..................................................................................... 8
Minha seleo contm algum elemento?......................................................... 11
Salvando selees .............................................................................................. 11
Refinando & Filtrando Selees ......................................................................... 12
Seletores relacionados formulrios................................................................ 12
Trabalhando com selees ................................................................................ 13
Encadeamento ................................................................................................... 13
Getters & Setters ............................................................................................... 15
CSS, Styling, & Dimenses ................................................................................. 15
Usando classes do CSS para estilos ................................................................... 16
Dimenses .......................................................................................................... 17
Atributos ............................................................................................................ 17
Travessia............................................................................................................. 18
Manipulando elementos ................................................................................... 19
Obtendo e setando informaes sobre elementos .......................................... 19
Movendo, copiando e removendo elementos. ................................................ 20
Clonando elementos ......................................................................................... 21
Removendo elementos ..................................................................................... 22
Criando novos elementos .................................................................................. 22
Manipulando atributos ...................................................................................... 24
2. Ncleo do jQuery ............................................................................................... 25
$vs $() ................................................................................................................ 25
MasterTraining - jQuery
Pgina 2
O bsico de jQuery
Pgina 3
O bsico de jQuery
Pgina 4
O bsico de jQuery
Pgina 5
O bsico de jQuery
MasterTraining - jQuery
Pgina 6
O bsico de jQuery
1. jQuery bsico
$(document).ready()
Voc no pode manipular a pgina com segurana at o
documento estar "pronto" (ready). O jQuery detecta o estado
de prontido para voc; o cdigo incluido dentro de
$(document).ready() somente ir rodar depois que a
pgina estiver pronta executar o cdigo JavaScript.
MasterTraining - jQuery
Pgina 7
O bsico de jQuery
$(document).ready(readyFn);
Selecionando elementos
O conceito mais bsico do jQuery "selecionar alguns
elementos e fazer alguma coisa com eles." O jQuery
suporta a maioria dos seletores CSS3, assim como alguns
seletores no-padro. Para uma referncia completa de
seletores, visite http://api.jquery.com/category/selectors/.
A seguir, alguns exemplos de tcnicas comuns de seleo.
MasterTraining - jQuery
Pgina 8
O bsico de jQuery
$('div:visible');
$('div:gt(2)');
primeiras divs
$('div:animated');
Para referncia, aqui est o cdigo que jQuery usa para determinar se um
elemento visvel ou oculto, com os comentrios adicionados para maior
esclarecimento:
jQuery.expr.filters.hid
den = function( elem )
{
var width = elem.offsetWidth,
height = elem.offsetHeight,
skip =
elem.nodeName.toLowerCase()
=== "tr";
// o elemento tem 0 de altura e 0 de
largura e no uma <tr>?
return width === 0 && height === 0 && !skip
?
// ento deve estar escondido true :
// mas se o elemento tiver largura e
altura e no for uma <tr>
width > 0 && height > 0 && !skip ?
// ento deve estar visvel false :
// se chamos aqui, o elemento tem largura
MasterTraining - jQuery
Pgina 9
O bsico de jQuery
// e altura, mas tambm uma <tr>,
// ento verifica a propriedade display para
// decidir se ele esta escondido
jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem )
{
return !jQuery.expr.filters.hidden( elem );
};
Escolhendo seletores
Escolher bons seletores uma forma de melhorar a performance do
seu JavaScript. Uma pequena especificidade - por exemplo, incluir
um elemento como div quando selecionar elementos pelo nome da
classe - pode ir por um longo caminho. Geralmente, sempre que voc
puder dar ao jQuery alguma dica sobre onde ele pode esperar
encontrar o que voc estiver procurando, voc deve dar. Por outro
lado, muita especificidade pode no ser muito bom. Um seletor como
#myTable thead tr th.special um desperdcio se um
seletor como #myTable th.special lhe dar o que voc
precisa.
O jQuery oferece muitos seletores baseados em atributo, permitindo
que voc selecione elementos baseados no contedo de atributos
arbitrrios usando expresses regulares simplificadas.
// encontre todos
elementos
<a>s em que o atributo
// rel termine com "thinger"
$("a[rel$='thinger']");
Se por um lado estes seletores podem ser bem teis, eles tambm
podem ser extremamente lerdos
- Uma vez eu escrevi um seletor baseado em atributos que travou
minha pgina por mltiplos segundos. Sempre que possvel, faa suas
selees usando IDs, nomes de classe e nomes de tags.,
MasterTraining - jQuery
Pgina 10
O bsico de jQuery
Salvando selees
Toda vez que voc faz uma seleo, um monte de cdigo executado, e o
jQuery no faz caching de selees para voc. Se voc fez uma seleo que
voc talvez precise fazer novamente, voc deve salvar a seleo numa
varivel ao invs de fazer a seleo vrias vezes.
MasterTraining - jQuery
Pgina 11
O bsico de jQuery
Hungarian_notation] -- meramente uma
conveno, e no obrigatria.
Uma vez que voc armazenou sua seleo, voc pode
chamar os mtodos do jQuery na varivel que voc
armazenou, da mesma forma que voc faria na seleo
original.
Uma seleo somente obtm os elementos que
esto na pgina quando voc faz a seleo. Se voc
adicionar elementos na pgina depois, voc ter que
repetir a seleo ou ento adicion-la seleo
armazenada na varivel. Selees armazenadas no
atualizam automaticamente quando o DOM muda.
// o elemento div.foo
$('h1').not('.bar');
// elementos h1 que no
tm a classe bar
$('ul li').filter('.current');
$('ul li').first();
// somente o primeiro
$('ul li').eq(5);
MasterTraining - jQuery
Pgina 12
:disabled
:enabled
:file
:image
:input
<select>
:password
:radio
:reset
:selected
:submit
:text
O bsico de jQuery
Seleciona elementos de formulrio desabilitados
Seleciona elementos de formulrio habilitados
Seleciona inputs com type="file"
Seleciona inputs com type="image"
Encadeamento
Se voc chamar um mtodo numa seleo e este mtodo retornar
um objeto jQuery, voc pode continuar a chamar mtodos do
jQuery sem precisar pausar com um ponto-e-vrgula.
MasterTraining - jQuery
Pgina 13
O bsico de jQuery
Se voc estiver escrevendo uma cadeia que inclui vrios passos,
voc (e a pessoa que vir depois de voc)
talvez ache seu cdigo mais legvel se
voc quebrar o cdigo em vrias linhas.
MasterTraining - jQuery
Pgina 14
O bsico de jQuery
MasterTraining - jQuery
Pgina 15
O bsico de jQuery
MasterTraining - jQuery
Pgina 16
O bsico de jQuery
Dimenses
O jQuery oferece uma variedade de mtodos para obter e
modificar informaes sobre dimenses e posies de um
elemento.
O cdigo do Exemplo 1.21, Mtodos bsicos de dimenses
somente uma introduo muito curta sobre as
funcionalidades de dimenses do jQuery; para detalhes
completos sobre os mtodos de dimenso do jQuery, visite
http://api.jquery.com/category/dimensions/.
$('h1').height('50px');
$('h1').height();
$('h1').position();
Atributos
Atributos de elementos podem conter informaes teis para
sua aplicao, ento importante saber como set-los e obtlos.
O mtodo $.fn.attr atua como getter e setter . Assim
como os mtodos $.fn.css , $.fn.attr atuando como
um setter, podem aceitar tanto uma chave e um valor ou um
objeto contendo um ou mais pares chave/valor.
MasterTraining - jQuery
Pgina 17
O bsico de jQuery
Agora, ns quebramos o objeto em mltiplas linhas. Lembrese, espaos no importam em JavaScript, ento voc deve se
sentir livre para usa-lo do jeito que quiser para fazer seu
cdigo ficar mais legvel! Depois, voc pode usar uma
ferramenta de minificao para remover espaos
desnecessrios para seu cdigo de produo.
Travessia
Uma vez que voc tem uma seleo do jQuery, voc pode
encontrar outros elementos usando sua seleo como ponto
de incio.
Nota
Seja cuidadoso com travessias de longas distncias nos seus documentos
-- travessias complexas torna imperativo que a estrutura do seu
documento permanea a mesma, uma dificuldade estabilidade, mesmo
se voc for o responsvel por criar toda a aplicao desde o servidor
at o cliente. Travessias de um ou dois passos so legais, mas geralmente
voc ir querer evitar travessias que levem voc de um container para
outro.
MasterTraining - jQuery
Pgina 18
O bsico de jQuery
Manipulando elementos
Uma vez que voc fez uma seleo, a diverso comea.
Voc pode mudar, mover, remover e clonar elementos.
Voc ainda pode criar novos elementos atravs de uma
sintaxe simples
Para uma referncia completa dos mtodos de manipulao do jQuery, visite
http://api.jquery.com/
category/manipulation/.
MasterTraining - jQuery
Pgina 19
O bsico de jQuery
$.fn.html
contedo html.
Obtm ou seta o
$.fn.text
ser removido.
$.fn.attr
atributo fornecido.
$.fn.width
como um inteiro.
$.fn.height
elemento na seleo.
$.fn.position
$.fn.val
formulrios.
MasterTraining - jQuery
Pgina 20
O bsico de jQuery
argumento; o mtodo $.fn.after coloca o elemento passado como argumento depois
do elemento
selecionado.Vrios outros mtodos seguem este padro: $.fn.insertBefore e
$.fn.before;
$.fn.appendTo e $.fn.append; e $.fn.prependTo e $.fn.prepend.
O mtodo que faz mais sentido pra voc depender de quais elementos voc j
selecionou e quais voc precisar armazenar uma referncia para os elementos que voc
est adicionando na pgina. Se voc precisar armazenar uma referncia, voc sempre ir
querer fazer pela primeira forma -- colocando os elementos selecionados relativos outro
elemento -- de forma que ele retorne o(s) elemento(s) que voc est colocando. Neste
caso, os mtodos $.fn.insertAfter, $.fn.insertBefore,
$.fn.appendTo, e $.fn.prependTo sero suas ferramentas para escolha.
Clonando elementos
Quando voc usa mtodos como $.fn.appendTo, voc est
movendo o elemento; porm, algumas vezes voc ir querer
fazer uma cpia do elemento. Neste caso, voc precisar usar
$.fn.clone primeiro.
MasterTraining - jQuery
Pgina 21
O bsico de jQuery
Se voc precisa copiar dados e eventos relacionados, esteja certo de passar true
como um argumento para $.fn.clone.
Removendo elementos
H duas formas de remover elementos da pgina: $.fn.remove e $.fn.detach.
Voc ir usar
$.fn.remove quando voc quiser remover a seleo permanentemente da pgina;
enquanto o mtodo retorna os elementos removidos, estes elementos no tero seus eventos
e dados associados a ele se voc retorna-los pgina.
Se voc precisa que os dados e eventos persistam, voc ir usar $.fn.detach . Da
mesma forma que
$.fn.remove, ele retorna uma seleo, mas tambm mantm os dados e os eventos
associados com a
seleo para que voc possa restaurar a seleo para a
pgina no futuro.
MasterTraining - jQuery
Pgina 22
O bsico de jQuery
MasterTraining - jQuery
Pgina 23
O bsico de jQuery
Manipulando atributos
Os recursos de manipulao de atributos do jQuery so muitos. Mudanas bsicas so
simples, mas o mtodo $.fn.attr tambm permite manipulaes mais complexas.
MasterTraining - jQuery
Pgina 24
2. Ncleo do jQuery
$vs $()
At agora, estivemos lidando inteiramente com mtodos que so
chamados em um objeto jQuery. Por examplo:
$('h1').remove();
A maioria dos mtodos jQuery chamada em objetos jQuery como mostrado acima; esses
mtodos so considerados parte do namespace $.fn, ou o prottipo do jQuery, e so
melhor imaginados como mtodos do objeto jQuery.
No entanto, h vrios mtodos que no atuam em uma seleo; esses mtodos so
considerados parte do namespace jQuery, e so melhor imaginados como mtodos do ncleo
do jQuery.
Esta distino pode ser incrivelmente confusa para os novos usurios do jQuery. Aqui est o
que voc precisa se lembrar:
Mtodos chamados em selees do jQuery esto no namespace $.fn, e
automaticamente recebem e retornam a seleo como est.
Mtodos no namespace $ geralmente so mtodos do tipo utilitrio, e no funcionam em
selees; no so passados quaisquer argumentos automaticamente para eles, e seu valor
de retorno variar.
H alguns casos onde mtodos de objeto e mtodos do ncleo tem os mesmos nomes, tal como
$.each e
$.fn.each. Nesses casos, seja extremamente cuidadoso(a) ao ler a
documentao para que voc explore
o mtodo correto.
Mtodos Utilitrios
jQuery oferece diversos mtodos utilitrios no namespace $. Estes mtodos so teis para
realizar tarefas rotineiras de programao. Abaixo esto exemplos de alguns dos mtodos
utilitrios; para uma referncia completa sobre mtodos utilitrios do jQuery, visite
http://api.jquery.com/category/utilities/.
MasterTraining - jQuery
Pgina 25
$.trim
$.each
Nota
H tambm um mtodo $.fn.each, que usado para iterar
sobre uma seleo de elementos.
$.inArray
Retorna o ndice de um valor em um array, ou
-1 se o valor no estiver no array.
var meuArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, meuArray) !== -1) {
console.log('encontrei!');
}
$.extend
MasterTraining - jQuery
Pgina 26
segundoObjeto);
console.log(primeiroObjeto.foo); //
'baz' console.log(novoObjeto.foo);
//
'baz'
Se voc no quer mudar nenhum dos objetos que
passa para o $.extend, passe um objeto vazio como
primeiro argumento.
var primeiroObjeto = { foo : 'bar', a : 'b'
};
var segundoObjeto = { foo : 'baz' };
var novoObjeto = $.extend({},
primeiroObjeto, segundoObjeto);
console.log(primeiroObjeto.foo); //
'bar' console.log(novoObjeto.foo); //
'baz'
$.proxy
MasterTraining - jQuery
Pgina 27
Verificando tipos
Como mencionado na seo "O Bsico do jQuery", jQuery oferece
alguns mtodos utilitrios para determinar o tipo de um valor
especfico.
Mtodos de Dados
Assim que seu trabalho com o jQuery avana, voc descobrir com frequncia
que h dados sobre um elemento que voc quer armazenar com o elemento. Em
JavaScript puro, voc pode fazer isso adicionando uma propriedade ao elemento
do DOM, mas voc ter que lidar com memory leaks em alguns navegadores.
jQuery ofere um jeito simples de armazenar dados relacionados a um elemento,
e gerencia os problemas de memria para voc.
MasterTraining - jQuery
Pgina 28
MasterTraining - jQuery
Pgina 29
MasterTraining - jQuery
Pgina 30
3. Eventos
Introduo
jQuery fornece mtodos simples para anexar manipuladores de eventos
(event handlers) em selees. Quando um evento ocorre, a funo fornecida
executada. Dentro da funo, this refere-se ao elemento que foi clicado.
Para detalhes sobre eventos do
http://api.jquery.com/category/events/.
jQuery,
visite
evento,
visite
MasterTraining - jQuery
Pgina 31
MasterTraining - jQuery
Pgina 32
Eventos
Desconectando Eventos
Para desconectar um manipulador de evento, voc usa o mtodo $.fn.unbind e passa
o tipo de evento para desatar. Se voc anexou uma funo nomeada para o evento, ento
pode isolar a desconexo para essa funo nomeada passando-a como o segundo
argumento.
{
{
//
foo
ainda
est
ligado
MasterTraining - jQuery
Pgina 33
ao
Eventos
MasterTraining - jQuery
Pgina 34
Eventos
target
evento. preventDefault()
Impede o evento de se
Disparando Eventos
jQuery fornece um mtodo de disparar os eventos ligados a um elemento
sem qualquer interao do usurio atravs do mtodo $.fn.trigger.
Enquanto este mtodo tem seus usos, ele no deve ser usado simplesmente
para chamar uma funo que foi ligada como um tratador de clique. Ao
invs disso, voc deve armazenar a funo que voc quer chamar em uma
varivel, e passar o nome da varivel quando fizer sua ligao. Ento voc
pode chamar a prpria funo sempre que quiser.
MasterTraining - jQuery
Pgina 35
Eventos
};
$('p').click(foo);
foo(); // ao invs de $('p').trigger('click')
de
Evento
usando
$('#minhaListaNaoOrdenada').delegate('li',
'click', function(e) {
var $meuItemDeLista = $(this);
// ...
});
MasterTraining - jQuery
Pgina 36
Eventos
Auxiliares de Eventos
jQuery oferece duas funes auxiliares relacionadas a eventos que
economizam algumas teclas digitadas.
$.fn.hover
O mtodo $.fn.hover deixa voc passar uma ou duas funes para serem
executadas quando os eventos mouseenter e mouseleave ocorrem em
um elemento. Se voc passar uma funo, ela ser executada para ambos os
eventos; se passar duas funes, a primeira ser executada para
mouseenter, e a segunda ser executada para mouseleave.
MasterTraining - jQuery
Pgina 37
Eventos
Nota
Antes do jQuery 1.4, o mtodo $.fn.hover exigia duas funes.
$.fn.toggle
Assim como $.fn.hover, o mtodo $.fn.toggle recebe duas ou mais
funes; cada vez que o evento ocorre, a prxima funo na lista chamada.
Geralmente, $.fn.toggle usado apenas com duas funes, mas tecnicamente voc
pode usar tantas quantas desejar.
Exemplo 3.12. A
funo auxiliar
toggle
$('p.expander').toggle(
function() {
$(this).prev().addClass('open');
},
function() {
$(this).prev().removeClass('open');
}
);
MasterTraining - jQuery
Pgina 38
Efeitos
4. Efeitos
Viso Geral
jQuery torna trivial adicionar efeitos simples a sua pgina. Efeitos podem
usar configuraes embutidas, ou fornecer uma durao customizada. Voc
pode tambm criar animaes customizadas de propriedades CSS arbitrrias.
Para detalhes completos sobre efeitos do jQuery, visite
http://api.jquery.com/category/effects/.
Efeitos Embutidos
Efeitos frequentemente usados esto embutidos no jQuery como mtodos:
$.fn.show
$.fn.hide
$.fn.fadeIn
Anima a opacidade dos
elementos selecionados para 100%.
$.fn.fadeOut
Anima a opacidade dos
elementos selecionados para 0%.
$.fn.slideDown
Mostra os elementos selecionados
com um deslizamento vertical.
$.fn.slideUp
Esconde os elementos selecionados
com um deslizamento vertical.
$.fn.slideToggle
MasterTraining - jQuery
Pgina 39
Efeitos
//
//
usando
uma
jQuery.fx.speeds
jQuery tem um objeto em jQuery.fx.speeds que contm a
velocidade padro, assim como as configuraes para "slow" e "fast".
velocidades: {
slow: 600, fast: 200,
// Velocidade padro
_default: 400
}
possvel sobrescrever ou adicionar a este objeto. Por exemplo, voc pode
querer mudar a durao padro dos efeitos, ou pode querer criar suas prprias
velocidades de efeitos.
Exemplo
4.1.
Acrescentando
velocidade customizadas ao
jQuery.fx.speeds
MasterTraining - jQuery
definies
Pgina 40
de
Efeitos
jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;
function()
Note que se sua seleo no retorna nenhum elemento, sua callback nunca
ser executada! Voc pode resolver este problema testando se sua seleo
retornou algum elemento; se no, voc pode s executar a callback
imediatamente.
MasterTraining - jQuery
Pgina 41
Efeitos
Easing
Propriedades relacionadas a cor no podem ser animadas com
$.fn.animate usando jQuery de forma convencional. Animaes
de cor pode facilmente ser efetuadas incluindo o plugin de cor
[http://plugins.jquery.com/files/jquery.color.js.txt]. Discutiremos o
uso de plugins depois no livro.
MasterTraining - jQuery
Pgina 42
Efeitos
Controlando efeitos
jQuery fornece vrias ferramentas para controlar animaes.
$.fn.stop
Para animaes atualmente sendo executadas nos
elementos selecionados.
$.fn.delay
jQuery.fx.off
MasterTraining - jQuery
Pgina 43
Ajax
5. Ajax
Introduo
O mtodo XMLHttpRequest permite que navegadores se comuniquem com
o servidor sem precisar recarregar a pgina. Este mtodo, tambm conhecido
como Ajax(Asynchronous JavaScript and XML - JavaScript Assncrono e
XML), permite ter experincias ricas e interativas nas pginas web.
Requisies Ajax so disparadas por cdigo JavaScript; seu cdigo envia
uma requisio a uma URL, e quando recebe uma resposta, uma funo de
callback pode ser acionada para trata-la. Pelo motivo da requisio ser
assncrona, o resto do seu cdigo continur a executando enquanto a
requisio processada, sendo assim, imperativo que um callback seja
usado para lidar com a resposta.
O jQuery prov suporte Ajax que abstrai as dolorosas diferenas entre
navegadores. Ele oferece mtodos completos como o $.ajax(), e alguns
mtodos de convenincia como $.get(), $.getScript(),
$.getJSON(),
$.post()
e
$().load().
A maior parte das aplicaes jQuery no usam XML apesar do nome
"Ajax"; ao invs disso, elas transportam HTML puro ou JSON (JavaScript
Object Notation - Notao de Objeto do JavaScript).
Em geral, Ajax no funciona atravs de domnios diferentes. As excees
so servios que fornecem suporte ao JSONP (JSON com padding), que
permite uma limitada funcionalidade entre domnios.
Conceitos Chave
O uso apropriado de mtodos relacionados ao Ajax requer o
conhecimento de alguns conceitos-chave.
MasterTraining - jQuery
Pgina 44
Ajax
e o POST. importante entender a aplicao apropriada para cada um.
O mtodo GET deve ser usado para operaes no-destrutivas - ou seja,
operaes que voc apenas esteja "pegando" dados do servidor, sem
modificar nenhum dado no servidor. Por exemplo, uma consulta para fazer
uma busca pode ser uma requisio GET. Requisies GET podem ser
cacheadas pelo navegador, que pode levar a comportamentos imprevisveis
se voc no tomar cuidado. Requisies GET geralmente enviam todos os
seus dados na string de requisio.
O mtodo POST deve ser usado para operaes destrutivas - ou seja,
operaes onde voc muda dados no servidor. Por exemplo, um usurio
salvando o post de um blog deve ser uma requisio POST. Requisies
POST geralmente no so cacheadas pelo navegador; uma string de
requisio pode fazer parte da URL, mas os dados tendem a ser enviados
separadamente como uma requisio POST.
Tipos de dados
O jQuery geralmente requer alguma instruo a respeito do tipo de dados que
voc espera obter com uma requisio Ajax; em alguns casos, o tipo de dado
especificado no nome do mtodo e em outros casos fornecido como parte
do objeto de configurao. H vrias opes:
texto
html
Para transportar blocos de HTML
para serem colocados na pgina
script
adicionar um
script pgina
Para
novo
json
Para transportar dados formatados no estilo JSON, que pode
incluir strings, arrays e objetos
No jQuery 1.4, se os dados JSON enviados pelo seu
servidor no estiverem propriamente formatados, a
requisio pode falhar silenciosamente. D uma olhada
em http://json.org para detalhes sobre formatao
correta do JSON, mas como regra geral, use mtodos j
prontos da linguagem usada no servidor para gerar
JSON sem erros de sintaxe.
MasterTraining - jQuery
Pgina 45
Ajax
jsonp
Para transportar
Para transporte de
dados em um XML
Eu sou um forte proponente no uso de JSON na maioria dos casos, de forma
que ele prov a maior flexibilidade. especialmente til para enviar HTML
e dados ao mesmo tempo.
A de assncrono
A assincronicidade do Ajax pega muitos novos usurios do jQuery
desprevinidos. Pelo fato das chamadas Ajax serem assncronas por padro, a
resposta no estar disponvvel imediatamente. Respostas s podem ser
manipuladas por um callback. Ento, por exemplo, o cdigo seguinte no ir
funcionar:
$.get('foo.php');
console.log(response);
Ao invs disso, ns temos que passar um funo callback para nossa
requisio; Este callback ser executado quando a requisio for realizada
com sucesso, e neste ponto que poderemos acessar os dados que ela
retornou, se houver algum.
$.get('foo.php',
function(response)
console.log(response); });
MasterTraining - jQuery
Pgina 46
Ajax
Ajax e o Firebug
O Firebug (ou o Webkit Inspector no Chrome ou Safari) uma ferramenta
indispensvel para trabalhar com requisies Ajax. Voc pode ver as
requisies Ajax no mesmo instante que elas acontecem na tab Console do
Firebug (e no painel Resources > XHR do Webkit Inspector), e voc pode
clicar numa requisio para expandi-la e ver os detalhes como os headers de
requisio, de resposta, contedo e mais. Se alguma coisa no estiver
acontecendo como esperado com uma requisio Ajax, este o primeiro
lugar para ver o que est acontecendo de errado.
$.ajax
O mtodo core $.ajax uma forma simples e poderosa de criar requisies
Ajax. Ele utiliza um objeto de configurao que contm todas as instrues
que o jQuery precisa para completar a requisio. O mtodo
$.ajax particularmente til porque ele oferece a habilidade de especificar
callbacks de sucesso e falha. H tambm a possibilidade de pegar um objeto
de configurao definido separadamente, fazendo que seja fcil escrever
cdigo reutilizvel. Para documentao completa das opes de
configurao, visite http:// api.jquery.com/jQuery.ajax/.
MasterTraining - jQuery
Pgina 47
Ajax
MasterTraining - jQuery
Pgina 48
Ajax
resposta HTTP no ir mostrar um erro. Quando estiver trabalhando com
requisies Ajax, tenha certeza que o servidor est enviando de volta os
dados com o formato que voc especificou e verifique se o header
Content-type est de acordo com o tipo de dados. Por exemplo, para
dados JSON, o header Content-type deve ser application/json.
Opes do $.ajax
H vrias, vrias opes para o mtodo $.ajax, que parte do seu poder. Para
uma lista completa de opes, visite http://api.jquery.com/jQuery.ajax/; aqui
vo algumas opes que voc ir usar frequentemente:
MasterTraining - jQuery
Pgina 49
Ajax
async Configure para false se a requisio deve ser enviada de forma sncrona. O
padro true. Perceba que se voc configurar esta opo para falso, sua requisio
bloquear a execuo de outro cdigo at que a resposta seja recebida.
cache
complete
context
data
dataType
O tipo de dado que voc espera do servidor. Por padro,
o jQuery ir olhar o MIME
type da resposta se nenhum tipo de dados for especificado.
error
jsonp
success
timeout
MasterTraining - jQuery
Pgina 50
Ajax
url
A URL para
requisio.
A opo url a nica propriedade obrigatria do objeto de configurao
do mtodo $.ajax; todas as outras propriedades so opcionais.
Mtodos de convenincia
Se voc no precisa da configurao extensiva do $.ajax, e voc no se
preocupa sobre manipulao de erros, as funes de convenicia providas
pelo jQuery podem ser uma forma til e lapidada para executar requisies
Ajax. Estes mtodos so somente "encapsulamentos" em torno do mtodo
$.ajax, e simplesmente pr setam algumas das opes no mtodo
$.ajax.
Os mtodos de convenincia providos pelo jQuery so:
$.get
$.post
$.getScript
$.getJSON
data
MasterTraining - jQuery
Pgina 51
Ajax
objeto quanto uma string de requisio,
como foo=bar&baz=bim.
Esta opo no vlida para
$.getScript.
callback de successo
tipo de dados
do servidor. Opcional.
MasterTraining - jQuery
Pgina 52
Ajax
$.fn.load
O mtodo $.fn.load nico dentre os mtodos de ajax do jQuery que
chamado em uma seleo. O
mtodo $.fn.load pega o HTML de uma URL, e usa o HTML retornado
para popular o(s) elemento(s) selecionados. Em adio URL informada,
voc ainda pode informar um seletor; o jQuery ir pegar somente o
elemento correspondente do HTML retornado.
#myDiv
Ajax e formulrios
As funcionalidades de Ajax do jQuery podem ser especialmente teis
ao
lidar
com
formulrios.
O
jQuery
Form
Plugin
[http://jquery.malsup.com/form/] uma ferramenta bem testada para
adicionar funcionalidades de Ajax nos formulrios e voc deve usa-lo para
manipular formulrios com Ajax ao invs de usar sua prpria soluo para
alguma coisa mais complexa. Mas ainda h dois mtodos do jQuery
relacionados processamento de formulrios que voc deve conhecer:
$.fn.serialize e
$.fn.serializeArray.
MasterTraining - jQuery
Pgina 53
Ajax
o
Yahoo!
Query
Language
[http://developer.yahoo.com/yql/console/], que ns iremos usar no prximo
exemplo para pegar notcias a respeito de gatos.
MasterTraining - jQuery
Pgina 54
Ajax
function(response) {
console.log(response);
}
});
O jQuery manipula todos os aspectos complexos por trs do JSONP
-- tudo que ns temos que fazer falar para o jQuery o nome do
callback JSONP especificado pelo YQL ("callback" neste caso), e
todo o processo se parece com uma requisio Ajax normal.
Eventos do Ajax
Frequentemente, voc ir querer fazer algo depois que uma
requisio Ajax inicia ou termina, como exibir ou mostrar um
indicador de carregamento. Ao invs de definir este comportamento
dentro de cada requisio Ajax, voc pode associar eventos do Ajax
elementos da mesma forma que voc associa outros eventos. Para
uma lista completa de de eventos do Ajax, visite
http://docs.jquery.com/Ajax_Events.
MasterTraining - jQuery
Pgina 55
Plugins
6. Plugins
O que exatamente um plugin?
Um plugin do jQuery simplesmente um novo mtodo que ns usamos para
extender o prottipo de objeto do jQuery. Atravs da extenso do prottipo,
voc permite que todos os objetos do jQuery herdem quaisquer mtodos que
voc adicionar. Como estabelecido, sempre que voc chama jQuery() voc
est criando um novo objeto do jQuery, com todos os mtodos herdados.
A idia de um plugin fazer alguma coisa com uma coleo de elementos.
Voc pode considerar que cada mtodo que vem com o core do jQuery seja
um plugin, como fadeOut ou addClass.
Voc pode fazer seus prprios plugins e usa-los privadamente no seu cdigo
ou voc pode libera-lo para comunidade. H milhares de plugins para o
jQuery disponveis online. A barreira para criar um plugin prprio to
pequena que voc desejar fazer um logo "de cara"!
MasterTraining - jQuery
Pgina 56
Plugins
Ns encapsulamos esta associao numa funo imediatamente invocada:
(function($){
//...
}(jQuery));
Isso possui o efeito de criar um escopo "privado" que nos permite extender o
jQuery usando o smbolo de dlar sem ter o risco de ter o dlar sobrescrito
por outra biblioteca.
Ento nosso verdadeiro plugin, at agora, este:
$.fn.myNewPlugin = function() {
return
this.each
(function
(){
// faz alguma coisa
});
};
A palavra chave this dentro do novo plugin refere-se ao objeto jQuery
em que o plugin est sendo chamado.
var somejQueryObject = $('#something');
$.fn.myNewPlugin = function() {
alert(this === somejQueryObject);
};
somejQueryObject.myNewPlugin(); // alerta 'true'
Seu ojeto jQuery tpico conter referncias para qualquer nmero de
elementos DOM, e esse o porqu que objetos jQuery so geralmente
referenciados colees.
Ento, para fazer algo com uma coleo, ns precisamos iterar sobre ela,
que mais facilmente feito utilizando o mtodo each() do jQuery:
$.fn.myNewPlugin = function() {
return this.each(function(){
});
};
O mtodo each() do jQuery, assim como a maioria dos outros mtodos,
retornam um objeto jQuery, permitindo-nos assim que possamos saber e
MasterTraining - jQuery
Pgina 57
Plugins
adorar o 'encadeamento' ($(...).css().attr()...). Ns no
gostaramos de quebrar esta conveno, ento ns retornamos o objeto
this. Neste loop, voc poder fazer o que voc quiser com cada elemento.
Este um exemplo de um pequeno plugin utilizando uma das tcnicas que
ns discutimos:
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').each(function(){
$(this).append(
' (' + $(this).attr('href') + ')'
);
});
};
}(jQuery));
// Exemplo de uso:
$('a').showLinkLocation();
Este prtico plugin atravessa todas as ncoras na coleo e anexa o atributo
href entre parnteses.
<!-- antes do plugin ser chamado: -->
<a href="page.html">Foo</a>
MasterTraining - jQuery
Pgina 58
Plugins
MasterTraining - jQuery
Pgina 59
Plugins
plugins que fazem muito mais do que voc precisa; eles podem acabar
adicionando um overhead substancial sua pgina. Para mais dicas sobre
como identificar um plugin ruim, leia Signs of a poorly written jQuery plugin
[http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/]
do Remy Sharp.
Uma vez que voc escolhe um plugin, voc precisar adiciona-lo sua
pgina. Baixe o plugin, descompacte-o se necessrio, coloque-o no diretrio
da sua aplicao e ento inclua o plugin na sua pgina usando uma tag script
(depois que voc incluir o jQuery).
Escrevendo Plugins
Algumas vezes voc quer que uma pequena funcionalidade esteja disponvel
pelo seu cdigo; por exemplo, tavez voc queira que um simples mtodo
possa ser chamado para executar uma srie de operaes sobre uma seleo
do jQuery. Neste caso, voc pode querer escrever um plugin.
A maioria dos plugins do jQuery so simplesmente mtodos criados no
namespace $.fn. O jQuery garante que um mtodo chamado num objeto
jQuery possa acessar aquele objeto jQuery como this dentro do mtodo.
Em retorno, seu plugin precisa garantir que ele retorna o mesmo objeto que
ele recebeu, a menos que o contrrio seja explicitamente documentado.
Este um exemplo de um plugin simples:
MasterTraining - jQuery
Pgina 60
Plugins
MasterTraining - jQuery
Pgina 61
Plugins
};
//
// padres do plugin
//
$.fn.hilight.defaults = { foreground: 'red', background:
'yellow'
};
//
// fim da closure
//
})(jQuery);
MasterTraining - jQuery
Pgina 62
Plugins
Nota
Esta seo baseada, com permisso, no post de blog Building Stateful
jQuery Plugins [http://
blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/] de Scott
Gonzalez.
Enquanto a maioria dos plguins para jQuery so stateless - isto , ns os chamamos num
elemento e isso a esteno de nossa interao com o plugin - h um grande conjunto de
funcionalidades que no se encaixam no padro bsico de plguins.
Como forma de preencher esta lacula, o jQuery UI implementa um sistema de plugin mais
avanado. O novo sistema gerencia estado, permite mltiplas funes sendo expostas
atravs de um plugin simples, e prov vrios pontos de esteno. Este sistema chamado
de fbrica de widgets e exposto como jQuery.widget e faz parte do jQuery UI 1.8;
entretanto, pode ser usado independentemente do jQuery UI.
Para demonstrar as capacidades da fbrica de widget, ns iremos fazer um simples plugin
para barra de progresso.
Para iniciar, ns iremos criar uma barra de progresso que nos permite especificar o
progresso uma s vez. Como podemos ver abaixo, isso pode ser feito atravs da
chamada jQuery.widget com dois parmetros: o nome do plugin a ser criado e um
literal objeto contendo funes para dar suporte ao nosso plugin. Quando nosso plugin
chamado, ele ir criar uma nova instncia do plugin e todas as funes sero executadas
dentro do contexto desta instncia. Isso diferente de de um plugin padro do jQuery em
duas formas importantes. Primeiro, o contexto um objeto, no um elemento do DOM.
Segundo, o contexto sempre um objeto, nunca uma coleo.
MasterTraining - jQuery
Pgina 63
Plugins
MasterTraining - jQuery
Pgina 64
Plugins
MasterTraining - jQuery
Pgina 65
Plugins
MasterTraining - jQuery
Pgina 66
Plugins
}
});
}
return value;
MasterTraining - jQuery
Pgina 67
Plugins
MasterTraining - jQuery
Pgina 68
Plugins
MasterTraining - jQuery
Pgina 69
Plugins
MasterTraining - jQuery
Pgina 70
Plugins
Adicionando Callbacks
Uma das formas mais fceis de fazer seu plugin estensvel adicionar
callbacks para que os usurios possam reagir quando o estado do plugin
muda. Ns podemos ver abaixo como adicionar um callback nossa barra
de progresso para enviar um sinal quando a barra de progresso chegar
100%. O mtodo
_trigger requer trs parmetros: o nome do callback, um objeto de evento
nativo que iniciou o callback, e um hash de dados relevantes para o evento.
O nome do callback o nico parmetro requerido, mas os outros podem
ser muito teis para usurios que querem implementar funcionalidades
customizadas no topo do seu plugin. Por exemplo, se ns construssemos um
plugin arrastvel, ns poderamos passar o evento mouseove nativo quando
dispararmos o callback de arrastar; Isso permitiria que usurios reagissem ao
arraste baseado nas coordenadas x/y providas pelo objeto do evento.
MasterTraining - jQuery
Pgina 71
Plugins
Funes de callback so essencialmente opes adicionais, ento voc pode
obter e seta-las como qualquer outra opo. Quando um callback executado,
um evento correspondente executado tambm. O tipo do evento
determinado pela concatenao do nome do plugin e do nome do callback. O
callback e o evento recebem os mesmos dois parmetros: um objeto evento e
um hash dos dados relevantes para o evento, como veremos a seguir.
Se seu plugin tem funcionalidade que voc deseja permitir que o
usurio previna, a melhor forma de suportar isso criando callbacks
cancelveis. Usurios podem cancelar um callback, ou seu evento
associado, da mesma forma que eles cancelam qualquer evento nativo:
chamando event.preventDefault() ou usando return false. Se
o usurio cancelar o callback, o mtodo
_trigger ir retornar falso para que voc implemente a funcionalidade
apropriada dentro do seu plugin.
MasterTraining - jQuery
Pgina 72
Plugins
Limpando
Em alguns casos, faz sentido permitir usurios aplicar seu plugin e
desaplica-lo depois. Voc pode fazer isso pelo mtodo destroy. Dentro do
mtodo destroy, voc deve desfazer qualquer coisa que seu plugin possa
ter feito desde o incio. O mtodo destroy automaticamente chamado
se o elemento que a instncia do seu plugin est amarrado removido do
DOM, para que isso seja usado para coleo de lixo (garbage collection). O
mtodo destroy padro remove a ligao entre o elemento DOM e a
instncia do plugin, ento importante chamar a funo destroy base
dentro do destroy do seu plugin.
MasterTraining - jQuery
Pgina 73
Plugins
this._update();
},
_setOption: function(key, value) {
this.options[key] = value; this._update();
},
_update: function() {
var progress = this.options.value + "%";
this.element.text(progress);
if (this.options.value == 100 ) {
this._trigger("complete", null, {
value: 100 });
}
},
destroy: function() {
this.element
.removeClass("progressbar")
.text("");
}
});
// chama funo destroy base
$.Widget.prototype.destroy.call(this);
MasterTraining - jQuery
Pgina 74
Plugins
MasterTraining - jQuery
Pgina 75
MasterTraining - jQuery
Pgina 76
MasterTraining - jQuery
Pgina 77
Otimize seletores
Otimizao de seletores menos importante do que costumava ser, pois mais
navegadores implementam document.querySelectorAll() e a
carga de selecionamento muda do jQuery para o navegador. Entretanto,
ainda h algumas dicas para se manter em mente.
MasterTraining - jQuery
Pgina 78
Seletores baseados em ID
Comear seu seletor
com um ID sempre
melhor.
// rpido
$('#container div.robotarm');
// super-rpido
$('#container').fi
nd('div.robotarm')
;
A abordagem $.fn.find mais rpida pois a primeira seleo
manipulada sem passar pelo engine de seleo do Sizzle - selees s com
ID so manipuladas usando document.getElementById(), que
extremamente rpido, pois nativo para o navegador.
Especificidade
Seja especfico no lado direito do seu seletor, e
menos especfico no esquerdo.
// no otimizado
$('div.data .gonzalez');
// otimizado
$('.data td.gonzalez');
Use tag.classe se possvel no seu seletor mais a direita, e somente
tag ou .class na esquerda. Evite especificidade excessiva.
$('.data
table.attendees
td.gonzalez');
// melhor: remova o meio se possvel
$('.data td.gonzalez');
Um DOM "magro" tambm ajuda a melhorar a performance do seletor,
pois a engine de seleo possui poucas camadas para atravessar quando
estiver procurando por um elemento.
MasterTraining - jQuery
Pgina 79
MasterTraining - jQuery
Pgina 80
MasterTraining - jQuery
Pgina 81
$('li.cartitems').doOnce(function(){
// faa com ajax! \o/
});
Este guia especialmente aplicvel para UI widgets do jQuery, que
possuem muita sobrecarga mesmo quando a seleo no contm elementos.
MasterTraining - jQuery
Pgina 82
Definio de Varivel
Variveis podem ser definidas em uma
declarao ao invs de vrias.
/
/
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);
/
/
=
1
,
test2 = function() { ... }, test3 =
test2(test);
Em funes auto-executveis, podem ser puladas todas as definies de
variveis.
(function(foo, bar) { ... })(1, 2);
Condicionais
// forma antiga
if (type == 'foo' || type == 'bar') { ... }
// melhor
if (/^(foo|bar)$/.test(type)) { ... }
// procura por literal objeto
if (({ foo : 1, bar : 1 })[type]) { ... }
MasterTraining - jQuery
Pgina 83
8. Organizao de cdigo
Viso Geral
Quando voc vai alm de adicionar melhorias simples em seu website com jQuery e comea
a desenvolver aplicaes client-side completas, voc precisa considerar como organizar
seu cdigo. Neste captulo, ns iremos dar uma olhada em vrios padres para
organizao de cdigo que voc pode utilizar em usa aplicao com jQuery e explorar o
gerenciador de dependncias e sistema de build RequireJS.
Conceitos Chave
Antes de irmos para os padres de organizao de cdigo, importante entender alguns
conceitos que so comuns a todos bons padres de de organizao de cdigo.
Seu cdigo deve ser dividido em unidades de funcionalidade - mdulos, servios, etc.
Evite a tentao de ter todo seu cdigo em um enorme bloco dentro do
$(document).ready().
No se repita. Identifique similaridades entre pedaos de funcionalidade e use tcnicas
de herana para evitar cdigo repetitivo.
Apesar da natureza centrada no DOM do jQuery, aplicaes em JavaScript no so s
sobre o DOM.
Lembre-se que no so todas as funcionalidades que necessitam - ou devem - ter uma
representao no DOM.
Unidades
de
funcionalidade
devem
ser
fracamente
acopladas
[http://en.wikipedia.org/wiki/ Loose_coupling] uma unidade de funcionalidade deve
conseguir existir por si s, e comunicao entre unidades devem ser manipuladas atravs de
um sistema de mensagens, como eventos customizados ou pub/sub. Evite comunicao
direta entre unidades de funcionalidade sempre que possvel.
Unidades de funcionalidade devem ser divididas em pequenos mdodos que fazem
exatamente uma s coisa. Se seus mtodos so maiores que algumas linhas, voc deve
considerar uma refatorao.
MasterTraining - jQuery
Pgina 84
Encapsulamento
O primeiro passo para organizao de cdigo separar as partes de sua aplicao em
peas distintas;
algumas vezes, mesmo este esforo
suficiente para ceder
O literal objeto
Um literal objeto talvez a forma mais simples de encapsular cdigo relacionado. Ele no
oferece nenhuma privacidade para propriedades ou mtodos, mas til para eliminar
funes annimas do seu cdigo, centralizar opes de configurao e facilitar o caminho
para o reuso e refatorao.
MasterTraining - jQuery
Pgina 85
Organizao de cdigo
MasterTraining - jQuery
Pgina 86
Organizao de cdigo
var $div = $this.find('div');
$div.load('foo.php?item=' +
$this.attr('id'), function() {
$div.show();
$this.siblings()
.find('div').hide();
});
}
);
});
A primeira coisa que voc ir perceber que esta abordagem obviamente muito maior
que a original
- novamente, se isso for extender nossa aplicao, o uso do literal objeto no ir fazer
sentido algum. Embora assumindo que no vai extender nossa aplicao, ns ganhamos
vrias coisas:
Ns quebramos nossas funcionalidaes em mtodos pequenos; no futuro, se ns
precisarmos mudar como o contedo mostrado, claro onde ns iremos mudar. No
cdigo original, este passo muito mais difcil para se localizar.
Ns eliminamos o uso de funes annimas.
Ns movemos as opes de configurao para fora do corpo do cdigo e colocamos em
uma localizao central.
Ns eliminamos as restries do encadeamento, fazendo o cdigo mais refatorvel,
modificvel e rearranjvel.
Para funcionalidades no triviais, literais de objeto so uma clara melhora sobre o longo
pedao de cdigo dentro do bloco $(document).ready(), de forma nos leva a pensar sobre
pedaos de funcionalidade. Entretanto, eles no so muito mais avanados do que ter um
monte de declaraes de funes dentro do bloco $(document).ready().
O Module Pattern
O module pattern supera algumas das limitaes do literal objeto,
oferecendo privacidade para variveis e funes enquanto expe uma API
pblica se assim for necessrio.
MasterTraining - jQuery
Pgina 87
Organizao de cdigo
changePrivateThing =
function() {
privateThing = 'super
secreto';
},
sayPrivateThing = function() {
console.log(privateThing);
changePrivateThing();
};
return {
publicThing : publicThing,
sayPrivateThing :
sayPrivateThing
}
};
var feature = featureCreator(); feature.publicThing;
// 'no segredo' feature.sayPrivateThing();
// loga 'segredo' e muda o valor de
// privateThing
No exemplo acima, ns criamos uma funo featureCreator que retorna um
objeto. Dentro da funo, ns definimos algumas variveis. Pelo fato das
variveis estarem definidas dentro da funo, ns no temos
acesso ela fora da funo, a no ser que ns coloquemos no objeto de
retorno. Isto significa que nenhum cdigo externo da funo tem acesso
varivel privateThing ou a funo changePrivateThing. Entretando,
sayPrivateThing tem acesso a privateThing e changePrivateThing, por causa
que ambas foram definidas no mesmo escopo de sayPrivateThing.
Este padro poderoso pois, da mesma forma que voc pode obter dos
nomes de variveis, ele pode dar a voc variveis privadas e funes
enquanto expe uma API limitada consistindo das propriedades retornadas
dos objetos e mtodos.
Abaixo temos uma verso revisada do exemplo anterior, mostrando como
poderamos criar a mesma funcionalidade utilizando o module pattern e
somente expondo um mtodo pblico do mdulo, showItemByIndex().
MasterTraining - jQuery
Pgina 88
Organizao de cdigo
Gerenciando dependncias
Nota
Esta seo fortemente baseada na excelente documentao do
RequireJS disponvel em http://
requirejs.org/docs/jquery.html, e usada com permisso do autor do
RequireJS, James Burke.
Quando um projeto alcana um determinado tamanho, gerenciar modulos de
scripts comea a ficar complicado. Voc precisa ter certeza da seqncia
correta dos scripts e voc comea a pensar seriamente em combinar scripts
em um nico arquivo, para que somente uma ou um nmero pequeno de
requisies sejam feitas para carregar os scripts. Voc pode tambm carregar
cdigo assim que necessrio, depois que a pgina carregar.
O RequireJS uma ferramenta para gerenciamento de dependncias feita
pelo James Burke e pode lhe ajudar a gerenciar mdulos de scripts, carregalos na ordem correta e tornar fcil a combinao de scripts mais tarde atravs
de uma ferramenta prpria de otimizao, sem necessidade de alterar seu
cdigo de marcao. Ele tambm lhe fornece um meio fcil de carregar os
scripts depois da pgina ter carregado, permitindo que voc distribua o
tamanho do download atravs do tempo.
O RequireJS tem um sistema de mdulos que permite que voc defina
mdulos com escopo bem definido, mas voc no precisa seguir o sistema
para obter os benefcios do gerenciamento de dependncias e otimizaes
em tempo de build. Com o tempo, se voc comear a criar cdigo mais
modular que precisa ser reutilizado em algumas outras partes, o formato de
mdulo do RequireJS torna fcil escrever cdigo encapsulado que pode ser
carregado sob demanda. Ele pode crescer com sua aplicao, particularmente
se voc deseja incorporar strings de internacionalizao (i18n), para que seu
projeto funcione em lnguas diferentes, ou carregar algumas strings HTML e
ter certeza que estas strings esto disponveis antes de executar o cdigo, ou
mesmo usar servicos JSONP como dependncias.
Obtendo o RequireJS
A forma mais fcil de usar o RequireJS com jQuery baixando um build do
jQuery
que
j
tem
o
RequireJS
embutido
[http://requirejs.org/docs/download.html]. Este build exclui pores do
RequireJS que duplicam funcionalidades do jQuery. Voc tambm pode
achar til baixar um projeto jQuery de amostra que utiliza o RequireJS
[http://requirejs.org/docs/release/0.9.0/jquery-require-sample.zip].
MasterTraining - jQuery
Pgina 89
Organizao de cdigo
MasterTraining - jQuery
Pgina 90
Organizao de cdigo
MasterTraining - jQuery
Pgina 91
Organizao de cdigo
MasterTraining - jQuery
Pgina 92
Organizao de cdigo
MasterTraining - jQuery
Pgina 93
Organizao de cdigo
MasterTraining - jQuery
Pgina 94
Organizao de cdigo
9. Eventos Customizados
Introduo Eventos Customizados
Ns todos estamos familiares com eventos bsicos - click, mouseover, focus,
blur, submit, etc. - estes que ns podemos usar para interaes entre o
usurio e o navegador. Eventos customizados abrem um mundo
completamente novo de programao orientada a eventos. Neste captulo, ns
iremos utilizar o sistema de eventos customizados do jQuery para fazer uma
aplicao de busca simples no Twitter.
Pode ser difcil primeira instncia entender por que voc iria querer utilizar
eventos customizados, quando os eventos j prontos parecem satisfazer bem
suas necessidades. Acontece que eventos customizados oferecem um jeito
completamente novo de pensar sobre JavaScript orientado a eventos. Ao
invs de focar no elemento que dispara uma ao, eventos customizados
colocam o holoforte no elemento em ao. Isso traz muitos benefcios,
incluindo:
Comportamentos do elemento alvo podem ser facilmente disparados por
elementos diferentes utilizando o mesmo cdigo.
Comportamentos podem ser disparados atravs de elementos-alvo
mltiplos e similares de uma vez.
Comportamentos podem ser mais facilmente associados com o elemento
alvo no cdigo, tornando o cdigo mais fcil de ler e manter.
Por que voc deveria se importar? Um exemplo provavelmente a melhor
forma de explicar. Suponha que voc tenha uma lmpada num quarto na
casa. A lmpada est ligada e ela controlada por dois switches de trs vias
e um clapper:
<div class="room" id="kitchen">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
MasterTraining - jQuery
Pgina 95
Organizao de cdigo
O estado da lmpada ir mudar disparando o clapper ou mesmo os switches.
Os switches e o clapper no se importam em qual estado a lmpada est; eles
somente querem mudar o estado.
Sem eventos customizados, voc talvez
poderia escrever algo assim:
$('.switch,
.clapper').click(funct
ion() {
var $light =
$(this).parent().find('.lightbulb');
if ($light.hasClass('on')) {
$light.removeClass('on
').addClass('off');
} else {
$light.removeClass('of
f').addClass('on');
}
});
Com eventos customizados, seu cdigo pode ficar parecido com este:
$('.lightbulb').bind('changeState', function(e) {
var $light = $(this);
if ($light.hasClass('on')) {
$light.removeClass('on').addClass('off');
} else {
$light.removeClass('off').addClass('on');
}
});
$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('changeS
tate');
});
Este ltimo pedao de cdigo no l essas coisas, mas algo importante
aconteceu: ns movemos o comportamento da lmpada para a lmpada, e
ficamos longe dos switches e do clapper.
Vamos tornar nosso exemplo um pouco mais interessante. Ns vamos
adicionar outro quarto nossa casa, junto com o switch mestre, como
mostrado a seguir:
MasterTraining - jQuery
Pgina 96
Organizao de cdigo
<div class="room" id="kitchen">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div class="room" id="bedroom">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div id="master_switch"></div>
Se h vrias luzes na casa, ns queremos que o switch mestre desligue todas
as luzes; de outra forma, ns queremos todas as luzes acesas. Para fazer isso,
ns iremos adicionar dois ou mais eventos customizados s lmpadas:
turnOn e turnOff. Ns iremos fazer uso deles no evento customizado
changeState, e usar alguma lgica para decidir qual que o switch mestre
vai disparar:
$('.lightbulb')
.bind('changeState', function(e) {
var $light = $(this);
if ($light.hasClass('on')) {
$light.trigger('turnOff');
} else {
$light.trigger('turnOn');
}
})
.bind('turnOn', function(e) {
$(this).removeClass('off').addClass('on');
})
.bind('turnOff', function(e) {
$(this).removeClass('off').addClass('on');
});
$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('cha
ngeState');
});
$('#master_switch').click(function() {
MasterTraining - jQuery
Pgina 97
Organizao de cdigo
if ($('.lightbulb.on').length) {
$('.lightbulb').trigger('turnOff');
} else {
$('.lightbulb').trigger('turnOn');
}
});
MasterTraining - jQuery
Pgina 98