Conhecimentos essenciais de JavaScript para quem já usa jQuery

20/01/2014

9min para ler

Já foi publicado aqui no desenvolvimento para web um artigo com equivalentes nativos de JavaScript para funções jQuery, com dicas sobre manipulação de DOM, classes CSS e modificação de propriedades com JavaScript nativo.

Tal como um complemento àquele, este artigo também aborda algumas soluções com “vanilla JS” (como também é chamado o JavaScript nativo ou puro, sem o uso de bibliotecas) que, certamente, são de grande ajuda e fazem muitos projetos dispensarem o uso de jQuery em detrimento a uma solução nativa mais rápida e igualmente eficiente.

jQuery tem sido uma dádiva para, praticamente, todos nós desenvolvedores front-end desde seu lançamento, com seus métodos intuitivos e funções fáceis. JavaScript é difícil, é difícil de “entrar” e é muito mais difícil do que jQuery. Mas o tempo não pára e “ser nativo” pode ser o futuro de front-end: HTML5.

HTML5 não significa apenas alguns elementos HTML extras; HTML5 abrange uma grande “massa” de tecnologia e, também, junto com ele vem ECMAScript 5, o futuro do JavaScript. Combinando APIs HTML5 que necessitam de JavaScript, em sua maioria, precisamos adotar uma estrutura mais nativa de trabalhar a cada dia em que jQuery e afins se tornam menos importantes.

Este artigo apresenta o amante de jQuery a alguns dos mais duros e mais incompreendidos métodos JavaScript, funções e muito mais para mostrar como a tecnologia nativa não é tão difícil quanto parece e que o JavaScript nativo provavelmente vai bater em você como um tijolo no rosto muito em breve - se isso já não aconteceu. Este artigo serve para mostrar a qualquer um que é possível mergulhar em desenvolvimento nativo de JavaScript em detrimento a jQuery e, quem sabe, abrir algumas portas para o futuro da (sua) codificação.

Seletores

Seletores são o grande vendedor de jQuery. Não é preciso, sequer, pensar nisso: a seleção de elementos com jQuery é feita sem pensar, é super simples. jQuery usa Sizzle, um motor também criado pela Fundação jQuery (mas disponível standalone) para usar como motor de seleção. O poderoso código por trás do Sizzle vai fazer você pensar duas vezes antes de complicar seus seletores e a alternativa JavaScript crua vai fazer você pensar duas vezes sobre jQuery completamente!

Seletores de classe

JavaScript não tinha método nativo className para pegar elementos com classes até recentemente, o que dificultou sua popularidade desde o início. Classes são as melhores para o desenvolvimento HTML/CSS, mas não foram bem suportadas com JavaScript nativo. Até agora.

Dê uma olhada nas opções:

// jQuery
$('.myClass');

// JavaScript
document.getElementsByClassName('myClass');

Isso retorna um NodeList. Um Nó é um termo JavaScript para o elemento Object e um NodeList é uma lista ordenada de Nós.

A diferença entre jQuery e JavaScript nativo quando usando seletores como esses, é que eles retornam um NodeList e, então, você tem que lidar com ele. jQuery cuida de tudo isso para você, encobrindo o que realmente está acontecendo; mas é muito importante saber o que está acontecendo.

Seletores de ID

O mais fácil do pacote:

// jQuery
$('#myID');

// JavaScript
document.getElementById('myID');

Retorna um Nó simples.

`querySelector`/`querySelectorAll`

Quando entramos em querySelector, as coisas começam a esquentar. Se não fosse pela jQuery, querySelector poderia hoje não existir em JavaScript e ser tão rápido e/ou tão eficiente quanto o é e, por isso, temos muito o que agradecer à jQuery!

A mágica por trás de querySelector é impressionante, é uma ferramenta nativa multiuso que pode ser usada em vários casos - e isso é JavaScript puro. Existem dois tipos de querySelector: o primeiro que é document.querySelector() retorna o primeiro Nó do NodeList, independentemente de quantos Objetos-Nó possam ser encontrados; o segundo é document.querySelectorAll(), que retorna um NodeList toda vez.

Veja alguns exemplos (leia os comentários para entender melhor):

/*
 * Classes
 */
// Pega o primeiro nome de classe .myClass
document.querySelector('.myClass');

// Retorna um NodeList com todas instâncias de .myClass
document.querySelectorAll('.myClass');

/*
 * ID
 */
// Pega o ID myID
document.querySelector('#myID');

/*
 * Tags
 */
// Retorna um NodeList com todas instâncias de 'div'
document.querySelectorAll('div');

querySelectorAll é poderoso, e, definitivamente, o futuro. Ele também suporta seletores mais complicados:

// Pega o último Nó de lista de .someList
document.querySelector('ul.someList li:last-child');

// Pega algum atributo data-*
document.querySelectorAll('[data-toggle]');

Também é possível criar uma função wrapper inteligente para isso, para evitar de ficar digitando document.querySelectorAll() toda vez:

var _ = function( elem ) {
    return document.querySelectorAll( elem );
}
// Uso
var myClass = _('.myClass');

Também é possível usar o símbolo $ em vez de um sublinhado, isso é com você. Não é o ideal começar uma expressão de função com um sublinhado, mas isso foi para mostrar que também é possível e aceito.

IE8 suporta seletores CSS2 para querySelector, mas, idealmente, você deve usar nomes de classes eficientes e seletores mínimos.

Manipulação de classe

É possível estender JavaScript usando um método de herança por prototipagem, que é o que jQuery faz nos bastidores. HTML5, porém, é o futuro, e está crescendo enquanto navegadores antigos estão rapidamente diminuindo. É hora de começar a usar métodos nativos de JavaScript para classes, como o novo recurso de HTML5 classList. Vamos a algumas comparações com jQuery.

Adicionar classe

Adicionar uma classe é fácil com jQuery, ela faz tudo para você, cuidando do array de NodeList também.

// jQuery
$('div').addClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.add('myClass');

Remover classe

Assim como o exemplo anterior, super simples:

// jQuery
$('div').removeClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.remove('myClass');

Alternar classe

Alternar é algo realmente importante para a linguagem e, muitas vezes, difícil de fazer através de métodos prototype. Felizmente, aqui está:

// jQuery
$('div').toggleClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.toggle('myClass');

Arrays

Agora vamos entrar num dos aspectos mais avançados de JavaScript: Arrays. Arrays são usados