一点普通的JavaScript就可以做很多事情

2020-06-21 11:38:55

我从来没有做过专业的前端开发人员,所以即使我已经为一些小的副业编写了15年的HTML/CSS/JS,但是所有的项目都非常小,有时我会在其间几年没有编写任何Javascript,而且我经常感觉自己不太知道自己在做什么。

部分正因为如此,我对图书馆有很大的依赖!十年前我使用了jQuery,也许从2017年开始我就在我的小Javascript项目中使用了很多vue.js(你可以看到我在这里制作的一个小小的打鼹鼠游戏,作为Vue的介绍)。

但是上周,这是一段时间以来的第一次,我在没有库的情况下编写了一些普通的Javascript,它很有趣,所以我想谈谈它!

我真的很喜欢维。但上周,当我开始构建https://questions.wizardzines.com,时,我的约束条件与往常略有不同--我想使用相同的HTML语言(与Prince一起)来生成一个pdf,并制作一个问题的交互式版本。

我真的看不出这对Vue有什么用(因为Vue想要创建所有的HTML本身),而且因为它是一个小项目,所以我决定尝试用没有库的普通Javascript编写它-只需编写一些HTML/CSS并添加一个<;脚本src=";js/script.js&34;>;<;/script>;。

我已经有一段时间没有这样做了,在这过程中我学到了一些东西,这些东西让我开始做这件事时比我想象的要容易。

我决定通过添加&;删除CSSclass并使用CSS转换来实现几乎所有的UI,如果我想要设置转换动画的话。

下面是一个小示例,单击“Next”问题按钮将“Done”类添加到父div。

这很管用。我的CSS一如既往地有点乱七八糟,但感觉还可以管理。

我首先编辑类,如下所示:x.className=#39;新的类列表。不过,这感觉有点乱,我想知道是否有更好的方法。确实有!

当我开始学习jQuery时,我记得我曾经想过,如果您想在DOM中轻松地找到一些东西,就必须使用jQuery(比如$(';.class';))。我这周才了解到,您实际上可以编写document.querySelectorAll(';.some-class';),这样您就不需要依赖任何库了!

我很好奇querySelectorAll是什么时候介绍的。我在谷歌上搜索了一下,看起来[选择器API是在2008到2013年间的某个时候创建的--我发现jQuery作者在2008年发表了一篇文章,讨论了这个建议的实现方案,2011年的一篇博客文章说,到那时,它已经在所有主要浏览器中使用了,所以当我开始使用jQuery时,它可能还不存在,但它肯定已经存在了很长一段时间:)。

在一个地方,我想更改按钮的HTML内容。使用Docent.createElement创建DOM元素相当烦人,所以我尝试尽可能少地这样做,而是将.innerHTML设置为我想要的HTML字符串:

我学到的最后一件有趣的事情是.scroll IntoView-当有人点击“下一个问题”时,我想自动向下滚动到下一个问题。结果发现这只是一行代码:

另一个我认为不错的普通JS库的小示例是peekobot,它是一个由100行JS/CSS组成的小聊天机器人界面。

看看它的Javascript,它使用了一些类似的模式-大量的.classList.add,一些向DOM添加元素,一些.querySelectorAll。

我从Peekobot的资源中了解到,.closest可以找到与给定选择器匹配的最接近的祖先。这似乎是一个很好的去掉我用Javascript编写的.parentElement.parentElement的好方法,它感觉有点脆弱。

我很惊讶我能用普通的JS做这么多事情。我最后写了大约50行JS来做我想做的一切,外加一点额外的内容来收集一些关于人们正在学习的匿名度量。

和我的前端帖子一样,这并不是什么严肃的FrontendEngineering建议--我的目标是能够用少于200行的Javascript来编写小网站,大部分都能用。如果你也在前场挥舞,我希望这会对你有所帮助!