From jQuery to DOM and ES6

Olhando para trás, jQuery foi criado para dar conta das diferenças de implementação do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!

Olhando para trás, jQuery foi criado para dar conta das diferenças de implementação do JavaScript nos diferentes navegadores. O grande culpado atende pelo nome de Internet Explorer, que ficava sempre atrasado em relação ao Mozilla Firefox e mais tarde ao Google Chrome. Uma solução fácil de usar, jQuery foi amplamente adotada por desenvolvedores também por iniciantes que muitas vezes tiveram seu primeiro contato com JavaScript através dessa biblioteca.

Em 2017, o uso do IE8 ao IE11 caiu a ponto de o navegador poder ser ignorado com segurança. Isso significava que nós desenvolvedores já podíamos abandonar completamente o jQuery e contar apenas com o standard DOM e algumas pitadas de ES6. Velocidade sendo um dos principais critérios para SEO (e também para usuários!), evitar que seu navegador tenha que carregar toda uma biblioteca antes de processar o seu código é uma vantagem que não pode ser ignorada!

Selecionando os elementos no DOM

Imagine o seguinte código HTML:

<div id="lead">lorem ipsum</div> <ul>   <li class="green">First item</li>   <li class="red">Second item</li>   <li class="green">Third item</li>   <li class="red">Last item</li> </ul> <p class="green status">A great status</p>

No jQuery você pode usar a função $() em combinação com algum seletor CSS para ir buscar elementos no DOM.

var lead = $('#lead'); var firstRedItem = $('.red').eq(0); var greenListItems = $('li.green');  // Adding `li` not to select the `p`.

Mas agora temos como alternativa os três médotos abaixo:

const lead = document.getElementById('lead');  // ⚠️ no # const firstRedItem = document.querySelector('.red'); const greenListItems = document.querySelectorAll('li.green');

Os olhares mais atentos perceberam que usamos const em vez de var. No ES6, em vez de var, usamos const ou let. Usaremos let quando quisermos mudar o valor de uma variável, e const para os outros casos:

let name = "George"; name = name + " Abitbol"; // `name` is being re-assigned.console.log(name);

Você pode ler mais sobre isso em let and const

Inserindo um elemento no DOM

Um uso clássico do JavaScript seria inserir um novo elemento no DOM. Em um blog por exemplo, uma sessão de comentários em AJAX iria inserir um comentário sem precisar recarregar a página.

<div id="comments">     <p class="comment">This was great!</p>   <p class="comment">I loved it :)</p> </div>  <form>     <textarea id="commentContent"></textarea>   <button>Post comment</button> </form>

Usando jQuery, faríamos da seguinte maneira:

var commentContent = $('#commentContent').val(); // Skipping AJAX part $('#comments').append('<p class="comment">' + commentContent + '</p>');

Agora podemos contar com Element#insertAdjacentHTML e com ES6 template literals:

const commentContent = document.getElementById('commentContent').value; const comments = document.getElementById('comments');  comments.insertAdjacentHTML('beforeend', `<p class="comment">${commentContent}</p>`);

Atualizando classes CSS

Adicionando, removendo ou modificando uma classe CSS em um elemento do DOM é algo bem comum em um app usando JavaScript. Com o jQuery, usaríamos:

$(selector).addClass('bold'); $(selector).removeClass('bold'); $(selector).toggleClass('bold');

E isso seria aplicado em todos os elementos que correspondem a um dado seletor CSS:

Sem o jQuery, você pode usar classList:

// For one element selected with `getElementById` or `querySelector` element.classList.add('bold'); element.classList.remove('bold'); element.classList.toggle('bold');  // For multiple elements selected with `querySelectorAll`: elements.forEach((element) => {     element.classList.add('bold');   // etc. });

Percebeu? Aqui usamos o Array.forEach!

Event listeners

JavaScript permite que a gente tenha comportamentos dinâmicos em uma página web. O mais simples exemplo que consigo pensar é ter um alerta pop-up quando o usuário clica em um botão.

<button id="useless-btn">Click me!</button>

Com jQuery, a gente usaria o método .on() (ou um de seus atalhos):

$('#useless-btn').on('click', function(event) {     alert('Thanks for clicking!'); });

Mas no DOM a gente pode brincar com o addEventListener:

const button = document.getElementById('useless-btn'); button.addEventListener('click', (event) => {     alert('Thanks for clicking!'); });

Para buscar informação sobre um elemento clicado, você pode aplicar um call back em um evento event.target. Mas o que é esse =>? Bom, isso é uma arrow function. Isso serve para a gente ser capaz de preservar uma variável e não precisar fazer aquela gambiarra do variável1 = variável2. Wes Bos tem um ótimo post e video sobre o assunto.

AJAX

Quando falamos de AJAX, a implementação original se apoia no XMLHttpRequest, mas ninguém quer usar aquilo! jQuery resolveu este problema há 10 anos com o método $.ajax e seus dois atalhos $.get e $.post:

// GET request $.ajax({     url: "https://swapi.co/api/people/",     type: "GET"     success: function(data) {        console.log(data);     } });  // POST request  const data = { name: "a name", email: "an@email.com" };  $.ajax({     url: url,     type: "POST",     data: data,     success: function(data) {         console.log(data);     } });

Nos navegadores atuais, podemos contar com o fetch que fornece uma API melhor que a do basição XMLHttpRequest.

// GET request fetch("https://swapi.co/api/people/")     .then(response => response.json())     .then((data) => {         console.log(data);     });  // POST requestconst  data = { name: "a name", email: "an@email.com" }; fetch(url, {     method: 'POST',     headers: { "Content-Type": "application/json" },     body: JSON.stringify(data)})    .then(response => response.json())    .then((data) => {      console.log(data);    });

Perceba que o segundo argumento da função fetch() é um hash usando como chaves nomes que representam as partes de uma requisição HTTP: o método (ou verbo), os cabeçalhos (headers) e o corpo(body).