Vanilla JS“Pode ser que você não precise de jQuery”
Jackson VeronezeSoftware Developer
[email protected]://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze
Autores
Mario MendonçaSoftware Developer
[email protected]://br.linkedin.com/in/mario-mendonca
O que é Vanilla JSÉ JavaScript puro.
A forma apresentada, para parecer como um framework, talvez seja proposital como forma de piada já que há uma crítica sobre a proliferação de frameworks que em geral pouco agrega de fato.
VantagensO benefício mais objetivo de usar JavaScript puro ou Vanilla JS é o melhor desempenho. Outro benefício é uma melhor compreensão da linguagem que você ganha ao escrever códigos em Vanilla JS.
DesvantagensA desvantagem de usar Vanilla JS é que é mais fácil cometer erros ou perder alguma coisa, é menos amigável (que jQuery), e pode exigir desenvolver mais código para atingir objetivos que levaria menos tempo com jQuery.
Como escolherJQuery é uma boa escolha nas seguintes situações:
Para pequenos projetos, onde a performance não é um problema
Projetos simples, com prazo apertado
Grandes projetos que usam uma biblioteca ou estrutura que tem jQuery como dependência
Onde não usar jQuery incluem:
Adquirir conhecimento intermediário e avançado em JavaScript
Aplicações Web complexas
Desenvolver sua própria biblioteca
Aplicações do lado do servidor com Node.js
Events// jQuery$(document).ready(function() { // code})
// jQuery$('a').click(function() { // code…})
// Vanilladocument.addEventListener('DOMContentLoaded', function() { // code})
// Vanilla[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… })})
Attributes// jQuery$('img').filter(':first').attr('alt', 'My image')
// Vanilladocument.querySelector('img').setAttribute('alt', 'My image')
Classes// jQuerynewDiv.addClass('foo')
// jQuerynewDiv.toggleClass('foo')
// VanillanewDiv.classList.add('foo')
// VanillanewDiv.classList.toggle('foo')
Selectors// jQueryvar divs = $('div')
// jQueryvar newDiv = $('<div/>')
// Vanillavar divs = document.querySelectorAll('div')
// Vanillavar newDiv = document.createElement('div')
Ajax// jQuery$.get('//example.com', function (data) { // code})
// Vanillavar httpRequest = new XMLHttpRequest()httpRequest.onreadystatechange = function (data) { // code}httpRequest.open('GET', url)httpRequest.send()
Comparação de Velocidade
Comparação de Velocidade
Referênciashttp://pt.stackoverflow.com/questions/46983/o-que-%C3%A9-o-vanilla-js
https://gist.github.com/liamcurry/2597326
http://vanilla-js.com/
http://youmightnotneedjquery.com/