Objetivo: Entender como extender a jQuery para usar nossas próprias funções por meio do uso dos seletores nativos da biblioteca.
Pré-requisitos:
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çõesComo 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.
Comentários