mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-29 21:41:00 +08:00
116 lines
6.3 KiB
Markdown
116 lines
6.3 KiB
Markdown
[#]: collector: (lujun9972)
|
||
[#]: translator: ( )
|
||
[#]: reviewer: ( )
|
||
[#]: publisher: ( )
|
||
[#]: url: ( )
|
||
[#]: subject: (A little bit of plain Javascript can do a lot)
|
||
[#]: via: (https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/)
|
||
[#]: author: (Julia Evans https://jvns.ca/)
|
||
|
||
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][1]).
|
||
|
||
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][2]) 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][3] 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][4], and [a blog post from 2011][5] 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][6], which is a little chatbot interface that’s 100 lines of JS/CSS.
|
||
|
||
Looking at [its Javascript][7], 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][8] 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][a]
|
||
选题：[lujun9972][b]
|
||
译者：[译者ID](https://github.com/译者ID)
|
||
校对：[校对者ID](https://github.com/校对者ID)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]: https://jvns.ca/
|
||
[b]: https://github.com/lujun9972
|
||
[1]: https://jvns.ca/blog/2017/06/26/vue-js-fun/
|
||
[2]: https://www.princexml.com/
|
||
[3]: https://3dtransforms.desandro.com/card-flip
|
||
[4]: https://johnresig.com/blog/thoughts-on-queryselectorall/
|
||
[5]: https://tiffanybbrown.com/2011/08/12/meet-the-selectors-api/
|
||
[6]: https://peekobot.github.io/peekobot/
|
||
[7]: https://github.com/Peekobot/peekobot/blob/master/peekobot.js
|
||
[8]: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
|