Quando comecei a carreira de desenvolvedor, fui apresentado a um tal de jQuery. Isso foi um divisor de águas na minha vida. Naquela época (2009), uma biblioteca que facilitava tanto a vida do Dev e entregava tanta coisa bacana em JavaScript... parecia mágica, e isso me ajudou por muitos anos mas me deixou "dependente" de suas facilidades, afinal, eu só precisava usar o incrível e fabuloso símbolo de $ e voilà.
Este post é para auxiliar minhas práticas de estudo avançado de JavaScript. Caso tenha alguma sugestão ou outro meio, sinta-se a vontade para contribuir.
Um (bom) tempo depois, senti a necessidade de me libertar dessa dependência. Observei que 70% da minha necessidade de utilizar jQuery era por conta do maravilhoso recurso de seletor. Mas e se fosse pra criar um método seletor no estilo jQuery, como seria?
Eis que é muito mais simples do que pode parecer e eu vou mostrar.
Vamos precisar de um seletor versátil, pois precisaremos selecionar tags, classes e IDs. Portanto utilizaremos o document.querySelector.
let $ = document.querySelector
Criamos uma variável com o nome de $ e atribuímos a função seletora a ela. Mas teremos um probleminha aí:
Uncaught TypeError: 'querySelector' called on an object that does not implement interface Document.
Isso acontece porque o contexto de document atribuído à variável é diferente do contexto document do DOM que queremos.
Para resolver isso, é bem simples. Basta atribuir o contexto document junto com a declaração da função através do .bind.
let $ = document.querySelector.bind(document)
Pronto. Agora temos algo extremamente simples mas parecido com o seletor do jQuery.
let $ = document.querySelector.bind(document)
$('.my-class').innerHTML = 'Mussum Ipsum, cacilds vidis litro abertis'
$('#my_id').classList.add('custom-class')
E é isso. Simples, não?
Este é o primeiro post de uma série onde pretendo aplicar meus estudos de JavaScript para soluções que atualmente resolvo com jQuery mas que podem ser substituídas por JavaScript Vanilla.
Top comments (0)