jQuery, o que é e você deve usá-lo?

jQuery é uma pequena biblioteca JavaScript que tenta facilitar o trabalho com HTML. Ele fornece mais funções para manipular elementos em páginas da Web, o que o torna útil para criar conteúdo dinâmico. É a escolha certa para o seu site?

O que é jQuery e para que serve?

jQuery está em toda parte; é a biblioteca JS mais popular de longe, está integrada nos principais sistemas como o WordPress, e as perguntas JS no StackOverflow parecem sempre ter respostas no jQuery.

A biblioteca oferece abreviação para muitas funções JS usadas para manipular o DOM HTML, que geralmente podem ser longas e irritantes para digitar. O jQuery oferece uma sintaxe muito mais curta e mais limpa, e quando você digita document. getElementByID () cem vezes, reduzi-lo a um único caractere pode economizar muito tempo de desenvolvimento.

O principal atrativo do jQuery é sua função seletora, usada para encontrar elementos em seu HTML e obter uma referência a eles. Por exemplo, se você deseja encontrar um elemento por um ID, pode:

 $ ('# ID') 

O que é muito mais fácil digitar do que:

 document. getElementByID ('ID') 

É claro que essa não é a única maneira de selecionar elementos; O jQuery pode usar praticamente qualquer seletor de CSS, todos empacotados em sua função $. O objeto $ também contém todos os outros métodos jQuery, como $ . ajax ().

O JavaScript moderno realmente tem essa mesma funcionalidade de seleção com a função document. querySelectorAll (); portanto, se você estiver usando apenas o jQuery para digitar document. querySelectorAll () ” um pouco menos, você pode renunciar ao jQuery, alterando as funções para $ ou qualquer outra coisa:

Janela

. $ = document. querySelectorAll 

Mas isso nem sempre é bom para o jQuery; é muito melhor trabalhar com elementos DOM do que JS vanilla, com funções transversais para analisar através de uma lista de elementos e filtros para resultados de pesquisa. Ao selecionar a partir do HTML com JS vanilla, você recebe uma lista dos elementos DOM literais, mas o jQuery retornará objetos jQuery com métodos e propriedades adicionais, que podem ser úteis para você.

O jQuery possui alguns outros recursos, como animação e suporte para AJAX, mas animações CSS puras geralmente são muito mais rápidas, e bibliotecas como axios lidam com solicitações AJAX muito melhor do que o jQuery, portanto, você realmente só deve usar o jQuery para trabalhar com o DOM. O jQuery agora oferece um 'slim' &’ versão sem esses recursos, que economiza cerca de 6kb ao usar o arquivo compactado e compactado com gzip.

O jQuery desacelerará meu site?

A adição de muitas bibliotecas Javascript, estruturas e inchaço ao seu site é a maneira mais fácil de retardar o carregamento da página, especialmente para usuários móveis com conexões ruins. No entanto, o jQuery é uma pequena exceção a essa regra; é muito pequeno e é usado em todos os lugares, então se você o está referenciando a partir de uma CDN popular como o Google, existe uma boa chance de que um usuário comum o tenha pré-armazenado em cache e não precisará baixar nada de seus servidores. No entanto, isso não facilita a inclusão, pois ainda precisa ser carregado da memória do usuário e executado, o que levará tempo.

Se eles não o tiverem armazenado em cache, você poderá usar a versão compactada e compactada com gzip, que tem apenas 28,78 KB, provavelmente menor que o tamanho do seu HTML. Isso não é melhor que nada e pode adicionar mais um segundo à carga da sua página em conexões 3G lentas (sem cache).

Como o jQuery é um bloqueio de renderização, você precisará carregar o jQuery antes de exibir a página, o que não é bom para usuários móveis. Se você está tentando tornar seu site estático o mais rápido possível em todos os dispositivos, provavelmente deve optar por JavaScript vanilla sobre jQuery apenas por esse motivo. Mas se o seu site for muito dinâmico, o jQuery ou outras bibliotecas provavelmente valem a pena para acelerar o tempo de desenvolvimento. Para sites internos da empresa, painéis de administração ou qualquer coisa que não seja voltada para o usuário final, você não deve se preocupar em incluí-lo.

Esteja ciente do código Janky

Como o jQuery envolve as funções nativas do Javascript, ele sempre terá menos desempenho do que o uso do vanilla JS, com a vantagem de acelerar o tempo de desenvolvimento. O jQuery ainda é muito rápido, mas você deseja observar o código não otimizado. Ter muitas chamadas de função atrasadas pode reduzir a taxa de quadros do seu aplicativo abaixo da taxa de atualização, que parecerá uma microestaca instável para o usuário final ou apenas um atraso direto.

Use para loops, em vez de cada jQuery, sempre que você repetir um número significativo de itens. Eles são rápidos, mas cada um é muito mais lento, apesar de muito mais legível. A maior parte do tempo adicionado vem do atraso no final do loop antes do início do próximo, portanto, os loops com uma pequena quantidade de código e o comprimento longo terão um desempenho maior do que os loops com muito código e alguns elementos.

Os seletores de jQuery são lentos. De fato, fazer qualquer coisa com o DOM é lento, então você deseja minimizar as chamadas relacionadas ao DOM em seus scripts. Se você estiver referenciando um item várias vezes, coloque-o em cache em uma variável:

 var $ item = $ ('# item') 

Isso impede que o jQuery execute várias pesquisas sempre que você usar a sintaxe $ () para encontrar um elemento. O $ na frente da variável é uma convenção para nomear variáveis ​​de objeto jQuery e não é necessário.

Você pode acelerar a seleção do jQuery usando IDs nas classes sempre que possível. A seleção por ID é muito mais rápida que a seleção por classe, pois o jQuery apenas envolve o método nativo . getElementByID (), em vez de usar seu próprio mecanismo de seleção. Se você precisar selecionar por classe, tente pelo menos especificar um contexto para informar ao jQuery onde procurar. Por exemplo, usando:

 $ ('. classe', '#container') 

Será muito mais rápido do que procurar por '. class', pois o jQuery ignorará tudo no DOM, exceto o elemento #container.

Devo usar o jQuery?

O jQuery é uma biblioteca & não um framework. Uma biblioteca fornece algumas ferramentas úteis para você usar ou resolve um problema com o qual o vanilla JS enfrenta. Uma estrutura, como React ou Vue, fornece uma estrutura mais rígida e controla a maior parte de como seu aplicativo funciona.

O jQuery possui uma sintaxe simples e pode facilitar muito o seu desenvolvimento. Se você está apenas adicionando algumas coisas simples ao seu site, provavelmente não precisa disso, mas se você estiver criando muito conteúdo dinâmico, o jQuery pode realmente acelerar o tempo de desenvolvimento . Se você é novo no desenvolvimento de JS, aprender o jQuery pode ajudá-lo a inicializar aplicativos simples.

No contexto de um aplicativo grande, porém, os benefícios ficam mais desfocados. O jQuery não é construído para ser o mecanismo de grandes aplicativos da Web, mas geralmente é usado no lugar de uma estrutura mais complicada para a criação de páginas dinâmicas simples. Isso funciona bem para aplicativos simples, mas é muito fácil de superar. Se você tem uma necessidade real de jQuery para fazer seu aplicativo da Web funcionar, provavelmente também terá uma necessidade muito maior da estrutura, modularidade e capacidade de expansão oferecidas por uma estrutura completa.

Mas o jQuery tem muito mais desempenho do que uma estrutura enorme como o React, portanto, se você quiser ficar mais próximo do metal, o jQuery pode ser um bom complemento para limpar seu código. Se você estiver trabalhando em uma base de código existente, é fácil adicionar o jQuery, em comparação com uma estrutura completa que pode exigir muita refatoração, aprendizado e atualização. Além disso, o jQuery é muito mais simples do que a maioria dos frameworks da Web e não exige que você repense a maneira como codifica as coisas.

O jQuery é, em última análise, apenas uma biblioteca para manipulação do DOM; portanto, se o seu caso de uso exigir uma manipulação DOM mais complexa do que o vanilla JS fornece, o jQuery poderá ser para você.