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/m1vvrtyq0a6ca1t7mjba-signature-0ea15835bc7cd0b90c17b8226b4e9e6461a8b121d8cdc6bc8f55c9da143c6f96-poli-161028123143/85/Vanilla-js-7-320.jpg)
Carregado porJackson Veroneze
Vanilla js
O documento discute o conceito de 'vanilla JS' como JavaScript puro e traz uma crítica à proliferação de frameworks, destacando que o uso do vanilla JS pode oferecer melhor desempenho e compreensão da linguagem, mas com algumas desvantagens em termos de facilidade de uso. Ele sugere situações em que o jQuery é uma boa escolha e apresenta exemplos de código comparando diferenças entre jQuery e vanilla JS. Por fim, menciona referências para mais informações sobre o tema.
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.