Extendendo a jQuery
Objetivo: Entender como extender a jQuery para usar nossas próprias funções por meio do uso dos seletores nativos da biblioteca.
Pré-requisitos:
- Javascript (intermediário)
- jQuery (básico) » “$” e Seletores
- JSON (básico) » O que é JSON? | Parametrizando funções JS com JSON
Quem está acostumado a trabalhar com Javascript já deve ter criado pelo menos uma função personalizada para uso em seus projetos.
Eu por exemplo, antes de conhecer a jQuery, tinha minha própria biblioteca de funções para manipulação do DOM e outras coisinhas também.
Mas depois que comecei a trabalhar com a jQuery, muitas das minhas funções cairam em desuso por serem contempladas dentro da própria jQuery, por exemplo:
getAltura(element) //Retorna a altura (height) do elemento getElement(id) //O mesmo que "document.getElementById(id)" getSrc(element) //Retorna o valor do atributo "src" de uma imagem getValor(id) //O mesmo que "document.getElementById(id).value". Essa eu usava de mais //Dentre várias outras funções
Como podemos ver todas essas funções são facilmente substituidas por funções nativas da jQuery. Especificamente para estas acima, hoje eu uso:
$('#element').height(); $('#element'); $('#element').attr('src'); $('#element').val();
Mas nem todas as funções existentes na minha biblioteca são contempladas nativamente na jQuery.
Eu tinha a seguinte função que trocava o src de uma imagem pra mim (por exemplo aqueles ícones de Mais e Menos que abrem e fecham alguma coisa).
Imagine que o meu ícone [+] tem como endereço o seguinte url: “../../imgs/icones/icnAbre.gif” e quando ele for clicado, a imagem deve ser alterada para mostrar o ícone [-] cujo endereço é “../../imgs/icones/icnFecha.gif”. A função foi escrita para receber somente as substrings que se alteram nos dois endereços. No nosso caso a única coisa que muda é que em um endereço existe o “Abre” e no outro endereço o “Fecha”. Dessa forma quando chamamos a função passamos o id da imagem que terá seu src alterado e a substring que deve ser alterada no src atual. Ex.: toggleSrc(’icnAbreFecha’, ‘Abre’, ‘Fecha’);
Assim ele troca na string do src o valor “Abre” por “Fecha” ou vice-versa (no caso da ícone da vez for o “Fecha”).
Abaixo a função:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function toggleSrc(idImg, strSrc1, strSrc2){ var alt, src = document.getElementById(idImg).src; if(src.indexOf(strSrc1) >= 0){ alt = 'clique para fechar'; src = src.replace(strSrc1, strSrc2); }else{ alt = 'clique para abrir'; src = src.replace(strSrc2, strSrc1); } document.getElementById(idImg).src = src; document.getElementById(idImg).alt = alt; document.getElementById(idImg).title = alt; } |
Vou mostrar como extender a jQuery para suportar nossas próprias funções personalizadas usando a função “toggleSrc()” listada acima como exemplo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | (function($){ $.fn.toggleSrc = function(options){ var opts = $.extend({}, $.fn.toggleSrc.defaults, options); return this.each(function() { var alt, src = $(this).attr('src'); if(src.indexOf(opts.strSrc1) >= 0){ alt = 'clique para fechar'; src = src.replace(opts.strSrc1,opts.strSrc2); }else{ alt = 'clique para abrir'; src = src.replace(opts.strSrc2,opts.strSrc1); } $(this).attr('src', src); $(this).attr('alt', alt); $(this).attr('title', alt); }); }; $.fn.toggleSrc.defaults = { strSrc1: 'Abre', strSrc2: 'Fecha' }; })(jQuery); |
Linha 1 - Na linha 1, usamos um artifício do Javascript para garantir que o
caracter "$" referencie obrigatoriamente a jQuery.
Isso garante que mesmo que você use a jQuery (e o seu arquivo de
extensão da jQuery) junto com outra biblioteca que também use o
caracter "$" (por exemplo Prototype), ainda assim o seu código irá
fazer referência a jQuery.
A linha 1 trabalha em conjunto com a linha 21, ou seja, podemos ler
o conjunto como algo do tipo: (function($){ ... })(jQuery);
Linha 2 - Esta linha utiliza a expressão jQuery nativa "$.fn" para adicionar
a funcionalidade "toggleSrc" a jQuery de forma que eu possa chamá-la
nativamente com os seletores jQuery. Ex: $('#img').toggleSrc();
Repare que a funcionalidade "toggleSrc" é atribuida uma função que
recebe como parâmetro uma variável chamada "options". Essa variável
é um JSON contendo os parâmetros necessários para executar a função
da maneira desejada.
Linha 3 - Aqui utilizamos um recurso muito legal da jQuery que é o "$.extend".
No caso da nossa função se nenhum parâmetro for passado, assumimos
como padrão que os parâmetros serão os já definidos em
"$.fn.toggleSrc.defaults".
Internamente esse recurso lê os parâmetros que você passou e para
aqueles que você não definiu na chamada da função ele substitui
pelos valores padrão que foram defindos (linhas 28 e 29).
Linha 4 - Esta linha executa toda a ação existente no contexto da função
aberta uma vez para cada elemento informado no seletor. Por exemplo,
se houver duas imagens na página inteira e você chamar
"$('img').toggleSrc();", o código existente dentro do contexto da
função iniciada nesta linha (e terminado na linha 66) será
executado para cada uma das duas imagens retornadas pelo seletor
"$('img').toggleSrc();". Se houvessem 50 imagens, esse código seria
executado 50 vezes. Se prestarmos atenção ficará claro que essa é a
filosofia da jQuery, não tem nada de novo aqui.
Linhas 5 a 15 - Aqui mora a lógica da nossa função e de importante destaco 3
coisas:
1. Neste escopo (dentro da função descrita na linha anterior) a
palavra reservada "this" faz referência ao elemento DOM selecionado.
Sempre um por vez, ou seja se "$('img').toggleSrc();" retornar 3
elementos, "this" referenciará uma imagem de cada vez. Para cada
execução do trecho (que será executado tantas vezes quantos forem os
elementos encontrados no seletor jQuery) "this" fará referência a um
dos elementos DOM ![]()
por vez.
A variável "opts" (linhas 6, 8 e 11) nada mais é do que a variável
resultante do que você passou como parâmetro para a função, mesclado
como o que você já tinha definido como DEFAULT caso nada fosse
passado. (conforme explicado na linha 3).
Linha 18 -"$.fn.toggleSrc.defaults" recebe os valores DEFAULT da sua função
para os parâmetros que não forem definidos na chamada. No nosso caso
definimos que as duas strings são "Abre" e "Fecha". Se você chamar a
função assim: "$('img').toggleSrc({strSrc1:'Mais', strSrc2:'Menos'});"
então os valores passados irão substituir os definidos como DEFAULT.
Caso você chame a função assim: "$('img').toggleSrc({strSrc1:'Mais'});"
os valores utilizados dentro da função serão "Mais" para "strSrc1"
e "Fecha" para "strSrc2".
E assim eu extendo a jQuery adicionando a ela minhas próprias funções.
Um exemplo de um arquivo meu com algumas funções é:
(function($) { $.fn.radioSel = function(valueToSel){ ... }; $.fn.shuffle = function(){ ... }; $.fn.fck = function(options){ ... };$.fn.fck.defaults = { BasePath: '/../../_libs/fckeditor/', ToolbarSet: 'Basic' }; $.fn.toggleSrc = function(options){ ... };$.fn.toggleSrc.defaults = { strSrc1: 'Abre', strSrc2: 'Fecha' }; })(jQuery);
Como vemos aqui podemos adicionar mais de uma função personalizada no mesmo arquivo.
Acho legal categorizar os arquivos de funções personalizadas organizando as funções por tipo. Por exemplo:
jquery.forms.js – Funções referentes a formulários
jquery.interface.js – Funções referentes a interface (animações, etc)
jquery.ajax.js – Funções referentes a requisições ajax
É isso aí… qualquer dúvida é só falar.
Categories: Javascript, Programação, jQuery jQuery
Compartilhe:
Comentários