¡Esto es en parte por qué usé muchas bibliotecas! Hace diez años, usé jQuery, y desde 2017, he estado usando vue.js mucho para mis pequeños proyectos (puedes ver un pequeño juego de zapadores que hice como introducción a Vue).
Pero la semana pasada, por primera vez en mucho tiempo, escribí Javascript simple sin biblioteca, y fue divertido, ¡así que quería hablar un poco sobre eso!
Experimentando con Javascript simple
Realmente me gusta Vue. Pero la semana pasada, cuando comencé a desarrollar https://questions.wizardzines.com , tenía limitaciones ligeramente diferentes a las habituales: quería usar el mismo HTML para crear un PDF (con Prince ) y crear una versión interactiva preguntas
Realmente no vi cómo esto es posible con Vue (porque Vue quiere crear todo el HTML por sí mismo) y, dado que era un proyecto pequeño, decidí intentar escribirlo en Javascript sin bibliotecas, simplemente escribí algo de HTML / CSS y agregué uno
<script src="js/script.js"> </script>.
No he hecho esto por un tiempo, y en el camino aprendí algunas cosas que harían el proceso más fácil de lo que pensaba cuando comencé.
Haga casi todo, agregando y eliminando clases CSS
Decidí implementar casi toda la interfaz de usuario simplemente agregando y eliminando clases CSS y usando transiciones CSS si quiero animar la transición.
Aquí hay un pequeño ejemplo en el que al hacer clic en un botón
nextpara una pregunta se agrega una clase doneal div principal.
div.querySelector('.next-question').onclick = function () {
show_next_row();
this.parentElement.parentElement.classList.add('done');
}Funcionó bastante bien. Mi CSS, como siempre, es un poco caótico, pero parece manejable.
Agregar / Eliminar Clases CSS Usando .classList
Empecé con clases edición de la siguiente manera:
x.className = 'new list of classes'. Sin embargo, es un poco desordenado y me preguntaba si hay una mejor manera. ¡Y él fue!
Las clases CSS se pueden agregar así:
let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');element.classList.remove('hi') Es mucho más limpio que mi método anterior.
Encuentre elementos usando document.querySelectorAll
Cuando comencé a aprender jQuery, recuerdo haber pensado que si necesita encontrar fácilmente algo en el DOM, debe usar jQuery (por ejemplo
$('.class')). ¡Acabo de enterarme esta semana que puedes escribir en su lugar document.querySelectorAll('.some-class'), y luego no tienes que depender de ninguna biblioteca!
Tenía curiosidad cuando me presentaron
querySelectorAll. Busqué en Google un poco, y parece que la API de selectores se creó en algún momento entre 2008 y 2013: encontré un mensaje del autor de jQuery discutiendo la implementación propuesta en 2008, y una publicación de blog de 2011, que decía que Estaba en todos los principales navegadores de la época, por lo que puede no haber existido cuando comencé a usar jQuery, pero definitivamente existió durante bastante tiempo :)
Instalar .innerHTML
En un lugar, quería cambiar el contenido HTML de un botón. Crear elementos DOM con es
document.createElementbastante tedioso, por lo que traté de mantener el trabajo al mínimo y en su lugar establecí la .innerHTMLlínea HTML que necesitaba:
button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
<object data="/confetti.svg" width="30" height = "30"> </object>
`;Desplazarse por la página con .scrollIntoView
La última cosa divertida que descubrí es esto
.scrollIntoView. Quería desplazarme automáticamente a la siguiente pregunta cuando alguien hace clic en el botón "Siguiente pregunta". Resulta que esta es solo una línea de código:
row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});Otro ejemplo de vanilla JS: peekobot
Otro pequeño ejemplo de una biblioteca JS simple que pensé que era buena es peekobot , que es una pequeña interfaz de chatbot que consta de 100 líneas de JS / CSS.
Como puede ver en su Javascript , usa varios patrones similares, muchos
.classList.add, algunos agregan elementos al DOM, otros .querySelectorAll.
De las fuentes de peekobot, aprendí sobre el elemento .closest , que encuentra el antepasado más cercano que coincide con el selector dado. Parece que esta sería una buena manera de deshacerse de algunos de los
.parentElement.parentElementque escribí en mi Javascript, que parecían un poco frágiles.
¡Javascript simple puede hacer mucho!
Me sorprendió mucho la cantidad de trabajo que se podría hacer usando JS simple. Como resultado, escribí unas 50 líneas de JS que hicieron todo lo que quería hacer, y un poco más para recopilar algunos indicadores anónimos sobre la capacitación de los usuarios.
Como es habitual con mis publicaciones de front-end, esto no tiene que ser un consejo serio de desarrollo de front-end. Mi objetivo es escribir sitios web pequeños con menos de 200 líneas de Javascript que funcionen principalmente. Si también estás en el mundo frontend, ¡espero que esto ayude un poco!