jQuery: métodos desconhecidos

Conheça alguns métodos pouco utilizados mas que podem ser grandes aliados dos desenvolvedores jQuery

proxy()

O método proxy() permite executar um outros método forçando um determinado contexto. Seu objetivo principal é evitar a confusão do ‘this’ causada quando um objeto é utilizado dentro de um método de outro objeto.

Por exemplo:

$(".botao").click(function() {
  setTimeout(function() {
    console.log(this); //window
  }, 400);
});

$(".botao").click(function() {
  setTimeout($.proxy(function() {
    console.log(this); //.botao
  }, this), 400);
});

É possível utilizar o proxy() através de duas assinaturas. A primeira recebe como parâmetros uma função e o escopo. A segunda funciona passando o escopo e o nome do método como uma string.

$.proxy( funcao(){}, 'objeto' );
$.proxy( 'objeto', 'metodo' );

Quem sabe agora você para de usar o truque do ‘var that = this’, hein?

isArray() e isFunction()

Esses dois métodos fazem parte da família de utilitários do jQuery. Como seus nomes sugerem, o primeiro verifica se o objeto é um array JavaScript e o segundo se o objeto é uma função.

var jogadores = ['Messi', 'Ronaldo', 'Montillo'];
var chutar = function(jogador){
  console.log("Gol de " + jogadores[jogador]);
};
console.log($.isArray(jogadores)); // true
console.log($.isFunction(chutar)); // true

Uma observação: a função isArray retorna true apenas para verdadeiros Arrays (e não objetos “tipo array”, como um objeto jQuery, por exemplo).

var jogadores = $('.jogadores');
console.log($.isArray(jogadores)); // false

A lista de utilitários possui outros métodos interessantes, tais como grep(), map(), merge() etc.

queue() e dequeue()

Apesar de terem sido desenvolvidos originalmente para o uso de animações, os métodos queue() e dequeue() podem ser utilizados para qualquer tipo de fila.

A fila padrão é chamada de ‘fx’: essa é a fila das animações. Ela será utilziada caso não seja passado nos parâmetros o nome de uma fila. No exemplo abaixo, estamos criando a fila ‘ajaxRequests’.

$(document).queue('ajaxRequests', function(){
  $.ajax({
    type: 'GET',
    url: '/tableless',
    complete: function(jqXHR, textStatus){
      $(document).dequeue("ajaxRequests");
    }
  });
});

$(document).queue('ajaxRequests', function(){
    $.post('/tableless', {categoria: 'jquery'});
});

Para dar sequência no andamento da fila, você precisa utilizar o método dequeue(). Ele deve ser chamado no final da execução de um processo da fila (e como essa é uma fila de processos AJAX, utilizamos o dequeue no evento complete).

Outro recurso interessante é a possibilidade de saber o tamanho da fila, ou seja, quantos eventos ainda serão executados. Para isso, basta utilizar a propriedade length após o método queue().

$(document).queue('ajaxRequests').length; // 2
$(document).dequeue("ajaxRequests"); // executa fila
$(document).queue('ajaxRequests').length; // 0

detach()

Assim como o remove(), o detach() retira um elemento do DOM. No entanto, esse método guarda as referências, eventos e dados associados ao elemento retornando um objeto jQuery que pode ser re-inserido no DOM.

$('.link').click(function(e){
  e.preventDefault();  
  console.log('clique');
});
$('.link').click(); // 'clique'
var link = $('.link').detach();
$('body').append(link);
$('.link').click(); // 'clique'
$('.link').remove();
$('body').append('<a href="#" class="link">link</a>');
$('.link').click(); // []

ajaxSetup() e afins

Talvez esses sejam os métodos mais injustiçados do jQuery. É muito comum a repetição de chamadas AJAX, incluindo seus parâmetros. Esses métodos de configuração permitem definir valores padrão para qualquer evento AJAX em sua aplicação.

Com o ajaxSetup() é possível, por exemplo, habilitar ou desabilitar o cache e definir o tipo de requisição: POST ou GET.

$.ajaxSetup({
  type: 'POST',
  dataType: 'json',
  cache: true
});

Você ainda pode configurar uma URL padrão e também parâmetros passados durante a chamada:

$.ajaxSetup({  
  data: {
      origem: 'paulotips.blogspot.com'
  },
  url: '/paulotips.blogspot.com'
});

Para conferir uma lista completa das propriedades configuráveis, visite a página do método AJAX na API do jQuery.

Os callbacks e eventos relacionados à execução de métodos AJAX também podem ser configurados. No entanto, essa configuração deve ser feita através dos seguintes métodos específicos: ajaxStart(), ajaxStop(), ajaxComplete(), ajaxError(), ajaxSuccess() e ajaxSend().

Por exemplo, você poderia utilizar a configuração abaixo para exibir um indicador de carregamento no início da execução de um método AJAX.

$('.carregando')
  .ajaxStart(function(){
    $(this).show();
  })
  .ajaxStop(function(){
    $(this).hide();
  });

Você pode associar os eventos a qualquer elemento e o jQuery se encarregará de encontrar e executar todos os métodos associados.

delay()

O método delay() serve para adiar a execução de uma função, método ou animação. Ele é especialmente útil para controlar o tempo de animações.

$('.alerta').fadeIn().delay(1000).slideUp();

No exemplo acima, o elemento com a classe “alerta” é exibido através de uma transição fade e, um segundo depois, ocultado através do método slideUp().

replaceWith() e replaceAll()

Imagine que você queira substituir todos os elementos que tenham a classe “pontos”. Com o método replaceWith() fica fácil. O que ele faz é buscar todos os objetos que se encaixem no seletor indicado e substituir seu conteúdo.

$('.pontos').replaceWith('<h2>100 pontos!</h2>');

O replaceWith() também funciona com elementos que não estejam presentes no DOM, ou seja, você pode criar um objeto jQuery e substituir/manipular seu conteúdo antes de inserí-lo no DOM.

$('<div class="carregando" />').replaceWith('<p class="carregando">Carregando...</p>');

Da mesma forma, o método replaceAll() também substiui o conteúdo de elementos, mas a origem e o destino são invertidos. Você também pode passar seletores como conteúdo. Nesse caso o funcionamento é um pouco diferente já que o elemento não é clonado e sim movido no DOM.

$('<h2>Carregamento completo!</h2>').replaceAll('.carregando');
$('.titulo').replaceAll('.carregando');

Note que a diferença dos métodos acima para os métodos tradiconais html() e text() é que o próprio elemento também é substituído e não só o seu conteúdo.

Estes foram alguns métodos que pouca gente conhece ou utiliza. Pode até ser que você nunca tenha sentido falta deles, mas é sempre bom ter umas cartas extras na manga.

E se você gostou, garanto que ao consultar a API do jQuery você descobrirá vários outros métodos desconhecidos, mas que podem ser úteis em algum momento do desenvolvimento dos seus projetos.

Créditos: Davi Ferreira

 

Tweet

Pin It