Baixar para ler offline
![Events
// jQuery
$(document).ready(function() {
// code
})
// jQuery
$('a').click(function() {
// code…
})
// Vanilla
document.addEventListener('DOMContentLoaded',
function() {
// code
})
// Vanilla
[].forEach.call(document.querySelectorAll('a'),
function(el) {
el.addEventListener('click', function() {
// code…
})
})](https://image.slidesharecdn.com/6m1dmnusxhzhbwn4fdas-signature-4fe3d510a8b56b490975f5af3eaa25e1e04fe13c8fc513e752fc5609e8b8096a-poli-161028123608/85/Vanilla-JS-7-320.jpg)
Carregado porMario Mendonça
Vanilla JS
O documento discute Vanilla JS versus jQuery, afirmando que Vanilla JS é JavaScript puro enquanto jQuery é uma biblioteca. Apresenta vantagens de Vanilla JS como melhor desempenho e compreensão da linguagem, mas desvantagens como ser mais propenso a erros. Recomenda escolher jQuery para pequenos projetos ou onde já é dependência, e Vanilla JS para aplicações complexas ou para aprender JavaScript avançado.
Vanilla JS
- 1. Vanilla JS “Pode serque você não precise de jQuery”
- 2. Jackson Veroneze Software Developer jackson@jacksonveroneze.com https://jacksonveroneze.com https://br.linkedin.com/in/jacksonveroneze Autores MarioMendonça Software Developer mario.mendonca@gmail.com https://br.linkedin.com/in/mario-mendonca
- 3. 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.
- 4. Vantagens O benefício maisobjetivo 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.
- 5. Desvantagens A desvantagem deusar 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.
- 6. Como escolher JQuery é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
- 7. Events // jQuery $(document).ready(function() { //code }) // jQuery $('a').click(function() { // code… }) // Vanilla document.addEventListener('DOMContentLoaded', function() { // code }) // Vanilla [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })
- 8. Attributes // jQuery $('img').filter(':first').attr('alt', 'Myimage') // Vanilla document.querySelector('img').setAttribute('alt', 'My image')
- 9. Classes // jQuery newDiv.addClass('foo') // jQuery newDiv.toggleClass('foo') //Vanilla newDiv.classList.add('foo') // Vanilla newDiv.classList.toggle('foo')
- 10. Selectors // jQuery var divs= $('div') // jQuery var newDiv = $('<div/>') // Vanilla var divs = document.querySelectorAll('div') // Vanilla var newDiv = document.createElement('div')
- 11. Ajax // jQuery $.get('//example.com', function(data) { // code }) // Vanilla var httpRequest = new XMLHttpRequest() httpRequest.onreadystatechange = function (data) { // code } httpRequest.open('GET', url) httpRequest.send()
- 12.
- 13.
- 14.