Você pelo menos codifica? [Criação de objeto jQuery]

jQuery é uma estrutura brilhante que simplifica a interação com o DOM significativamente, e uma das coisas mais comuns que você vai encontrar-se fazendo é criar jQuery objetos como: $("div"). Este teste de desempenho mostra quanto tempo estamos realmente sacrificando para a conveniência de usar jQuery, e o que queremos evitar é criar um excesso de objetos jQuery.

O problema ocorre quando você deseja usar um objeto jQuery várias vezes e a maneira usual de fazer isso é criar uma variável que referencia o objeto jQuery, e para muitas pessoas isso funciona e eles estão muito felizes com isso. Nunca fiquei totalmente satisfeito com essa solução, então um dia criei uma função “use” personalizada que funciona com qualquer objeto jQuery. Você executa o seletor uma vez e, em seguida, usa a palavra-chave “this” para se referir a ele. Não há mais variáveis ​​extras para monitorar e, como bônus, torna-se muito fácil ver rapidamente qual código está afetando quais partes do DOM.

Agora eu sei que há desenvolvedores por aí que não gostam muito de usar a palavra-chave “this” nessas situações, então esta solução não será para todos, mas funciona para mim e tenho certeza que será útil a muitos outros programadores por aí também.

Aqui está outro teste de desempenho que compara a criação de vários objetos jQuery com o uso da função “usar” personalizada. Como esperado, se você criar um objeto jQuery duas vezes, você obtém o dobro da velocidade, três é igual a três vezes a velocidade, quatro é igual a quatro, etc.

Você pode verificar o código aqui: https://github.com/davidcollingwood/do-you-even-code

Um Exemplo Simples

$("div").use(function() {
    this.find("p").addClass("paragraph");
    this.addClass("example").show();
});

De dentro de um manipulador de clique

$("div").click(function() {
    $(this).use(function() {
        this.find("p").removeClass("paragraph");
        this.removeClass("example").hide();
    });
});

Usando o argumento opcional

$("div").use(function(that) {
    this.find("p").addClass("paragraph");

    this.click(function() {
        that.removeClass("example").hide();
    });

    this.addClass("example").show();
});