Entrar Ainda não tem acesso?
4
respostas

[Sugestão] Não é jQuery, Ainda é Javascript Vanilla!

Referente ao curso JavaScript: criando requisições, no capítulo Buscando elementos e atividade Busca dinâmica

por João Lino Adão Manuel
| 91.6k xp | 73 posts
Chief Operations Officer

Olá, gostaria de compartilhar uma notação que aprendi fazendo Peer-programming com um amigo dev, uma técnica bem conhecida pela galera do jQuery.

O Método Bind

O bind() retorna uma nova função, que é uma versão da função original com o valor de this fixado ao contexto especificado. Quando chamamos essa nova função, ela será executada com o contexto fornecido, independentemente de como ela é chamada.

Exemplo:

const $ = document.querySelector.bind(document);

Explicação

Ao criar uma nova função com document.querySelector.bind(document), a função resultante pode ser atribuída à constante $. Isso significa que podemos usar a constante $ para chamar o método querySelector() diretamente, em vez de usar a notação completa document.querySelector(). Por exemplo:

Logo, const botaoPesquisa = $('[data-botao-pesquisa]'); // Equivalente a document.querySelector('[data-botao-pesquisar]') Dessa forma, o código torna mais conciso e fácil de ler, pois o símbolo $ é comumente associado a bibliotecas como o jQuery, onde é usado para selecionar elementos no documento HTML.

Espero ter ajudado compartilhando o que aprendi,

4 respostas
por Luis Dias
| 2590.6k xp | 2182 posts
Developer PHP (⌐■_■)

Oi, João

Goste muito da ideia, mas não funcionou comigo

Fiz de outra forma:

<!DOCTYPE html>
<html>

<head>
    <title>JQuery sem JQuery</title>
</head>

<body>
  <ul>  
    <li>JQuery</li>
    <li>é</li>
    <li>incrível!</li>    
  </ul>

    <input type="button" value="JQuery" />

    <script>
    const $ = (seletor) => document.querySelector(seletor);
    const $$ = (seletor) => document.querySelectorAll(seletor);
    Element.prototype.on = Element.prototype.addEventListener;

    const listas = $$('li');  
    listas.forEach(lista => lista.style.color = 'blue');

    const botao = $('[type="button"]');
      botao.on('click', () => alert(`Olá, ${botao.value}`));

    </script>
</body>

</html>
por João Lino Adão Manuel
| 91.6k xp | 73 posts
Chief Operations Officer

Olá Luis, que bom que gostou da ideia e que lhe impirou a fazer do seu jeito também, é top demais. Se quiser pode mandar o log de erro para vermos a razão de não ter funcionado contigo.

Vou chamar você no LinkedIn.

por Luis Dias
| 2590.6k xp | 2182 posts
Developer PHP (⌐■_■)

João, deu certo

mas tem que corrigir o seu exemplo

O correto é sem aspas em document, como vc mostra na explicação

// mode correto
const $ = document.querySelector.bind(document);
por João Lino Adão Manuel
| 91.6k xp | 73 posts
Chief Operations Officer

Show, Isso mesmo Luis,

Foi um erro de escrita, o correto é escrever sem as aspas por se tratar de uma palavra reservada da linguagem e não de uma string.