6.3 KiB
A little bit of plain Javascript can do a lot
I’ve never worked as a professional frontend developer, so even though I’ve been writing HTML/CSS/JS for 15 years for little side projects, all of the projects have been pretty small, sometimes I don’t write any Javascript for years in between, and I often don’t quite feel like I know what I’m doing.
Partly because of that, I’ve leaned on libraries a lot! Ten years ago I used to use jQuery, and since maybe 2017 I’ve been using a lot of vue.js for my little Javascript projects (you can see a little whack-a-mole game I made here as an intro to Vue).
But last week, for the first time in a while, I wrote some plain Javascript without a library and it was fun so I wanted to talk about it a bit!
experimenting with just plain Javascript
I really like Vue. But last week when I started building https://questions.wizardzines.com, I had slightly different constraints than usual – I wanted to use the same HTML to generate both a PDF (with Prince) and to make an interactive version of the questions.
I couldn’t really see how that would work with Vue (because Vue wants to create all the HTML itself), and because it was a small project I decided to try writing it in plain Javascript with no libraries – just write some HTML/CSS and add a single <script src="js/script.js"> </script>.
I hadn’t done this in a while, and I learned a few things along the way that made it easier than I thought it would be when I started.
do almost everything by adding & removing CSS classes
I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.
here’s a small example, where clicking the “next” question button adds the “done” class to the parent div.
div.querySelector('.next-question').onclick = function () {
show_next_row();
this.parentElement.parentElement.classList.add('done');
}
This worked pretty well. My CSS as always is a bit of a mess but it felt manageable.
add/remove CSS classes with .classList
I started out by editing the classes like this: x.className = 'new list of classes'. That felt a bit messy though and I wondered if there was a better way. And there was!
You can also add CSS classes like this:
let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');
element.classList.remove('hi') is way cleaner than what I was doing before.
find elements with document.querySelectorAll
When I started learning jQuery I remember thinking that if you wanted to easily find something in the DOM you had to use jQuery (like $('.class')). I just learned this week that you can actually write document.querySelectorAll('.some-class') instead, and then you don’t need to depend on any library!
I got curious about when querySelectorAll was introduced. I Googled a tiny bit and it looks like the [Selectors API was built sometime between 2008 and 2013 – I found a post from the jQuery author discussing the proposed implementation in 2008, and a blog post from 2011 saying it was in all major browsers by then, so maybe it didn’t exist when I started using jQuery but it’s definitely been around for quite a while :)
set .innerHTML
In one place I wanted to change a button’s HTML contents. Creating DOM elements with document.createElement is pretty annoying, so I tried to do that as little as possible and instead set .innerHTML to the HTML string I wanted:
button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
<object data="/confetti.svg" width="30" height = "30"> </object>
`;
scroll through the page with .scrollIntoView
The last fun thing I learned about is .scrollIntoView – I wanted to scroll down to the next question automatically when someone clicked “next question”. Turns out this is just one line of code:
row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});
another vanilla JS example: peekobot
Another small example of a plain JS library I thought was nice is peekobot, which is a little chatbot interface that’s 100 lines of JS/CSS.
Looking at its Javascript, it uses some similar patterns – a lot of .classList.add, some adding elements to the DOM, some .querySelectorAll.
I learned from reading peekobot’s source about .closest which finds the closest ancestor that matches a given selector. That seems like it would be a nice way to get rid of some of the .parentElement.parentElement that I was writing in my Javascript, which felt a bit fragile.
plain Javascript can do a lot!
I was pretty surprised by how much I could get done with just plain JS. I ended up writing about 50 lines of JS to do everything I wanted to do, plus a bit extra to collect some anonymous metrics about what folks were learning.
As usual with my frontend posts, this isn’t meant to be Serious Frontend Engineering Advice – my goal is to be able to write little websites with less than 200 lines of Javascript that mostly work. If you are also flailing around in frontend land I hope this helps a bit!
via: https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/
作者：Julia Evans 选题：lujun9972 译者：译者ID 校对：校对者ID