我从没做过专业的前端开发人员，因此，即使我已经为小型项目编写HTML / CSS / JS已有15年了，但所有项目都非常小，有时我不为它编写任何Javascript多年之间，我常常不太想知道自己在做什么。
部分原因是因为我非常依赖图书馆！十年前，我曾经使用jQuery，并且自2017年以来，我一直在我的小Javascript项目中使用大量vue.js.
但是上周，这是一段时间以来的第一次，我写了一些没有库的纯Javascript，它很有趣，所以我想谈一谈！
用普通的Javascript进行实验
我真的很喜欢Vue。但是上周，当我开始构建，我的约束比平常略有不同–我想使用相同的HTML生成PDF（与 Prince一起使用）并制作交互式版本的问题。
我真的看不到它如何与Vue一起工作（因为Vue想要创建所有HTML本身），并且因为这是一个小项目，所以我决定尝试使用不带库的纯Javascript编写它–只编写一些HTML / CSS并添加一个<script src="js/script.js"> </script>。
我好一阵子没做过了，在此过程中我学到了一些东西，这些东西比起我开始时想象的要容易。
通过添加和删除CSS类来执行几乎所有操作
我决定通过添加和删除CSS类，并在要为过渡设置动画时使用CSS过渡来实现几乎所有UI 。
这是一个小示例，单击“下一步”问题按钮将“完成”类添加到父div。
div.querySelector('.next-question').onclick = function () {
show_next_row();
this.parentElement.parentElement.classList.add('done');}这工作得很好。我的CSS总是一团糟，但感觉很容易管理。
添加/删除CSS类 .classList
我从编辑这样的类开始：x.className = 'new list of classes'。但是，这有点混乱，我想知道是否有更好的方法。那里！
您还可以添加CSS类，如下所示：
let x = document.querySelector('div');x.classList.add('hi');x.classList.remove('hi');element.classList.remove('hi') 比我以前做的要干净。
用找到元素 document.querySelectorAll
当我开始学习jQuery时，我记得曾经想过，如果您想轻松地在DOM中找到某些内容，则必须使用jQuery（例如$('.class')）。我本周刚刚了解到，您可以实际编写 document.querySelectorAll('.some-class')，而不必依赖任何库！
我对何时querySelectorAll推出感到好奇。我在Google上搜索了一下，看起来[Selectors API是在2008年至2013年之间构建的–我发现jQuery作者在2008年讨论了拟议的实现，并在2011年发布了博客， 称该代码已在所有主要浏览器中使用。然后，所以当我开始使用jQuery时它可能不存在，但肯定已经存在了很长时间了：）
组 .innerHTML
在一个地方，我想更改按钮的HTML内容。使用创建DOM元素document.createElement非常烦人，因此我尝试尽可能少地这样做，而是将其设置.innerHTML为所需的HTML字符串：
button.innerHTML = `<i class="icon-lightbulb"></i>I learned something! <object data="/confetti.svg" width="30" height = "30"> </object> `;
滚动浏览页面 .scrollIntoView
我了解到的最后一件有趣的事情是.scrollIntoView–当某人单击“下一个问题”时，我想自动向下滚动到下一个问题。原来这只是一行代码：
row.classList.add('revealed');row.scrollIntoView({behavior: 'smooth', block: 'center'});另一个普通的JS示例：peekobot
我认为不错的普通JS库的另一个小示例是 peekobot，它是一个小的chatbot接口，包含100行JS / CSS。
看一下它的Javascript，它使用了一些相似的模式–很多.classList.add，一些为DOM添加元素，有些.querySelectorAll。
我从阅读peekobot的源代码中学到了 .closest ，它找到与给定选择器匹配的最接近的祖先。似乎这是摆脱.parentElement.parentElement 我在Javascript中编写的某些脚本的好方法，这感觉有些脆弱。
普通的Javascript可以做很多事情！
仅仅使用普通的JS就可以完成多少工作，我感到非常惊讶。我最终写了大约50行JS来完成我想做的所有事情，再加上一些额外的收集有关人们正在学习的内容的匿名指标。
像往常一样，在我的前端文章中，这并不意味着是认真的前端工程建议-我的目标是能够编写很少使用少于200行Javascript且能正常工作的网站。如果您还在前端区域四处闲逛，希望对您有所帮助！
