Clever Geek Handbook

一些简单的Javascript可以做很多事情

我从没做过专业的前端开发人员，尽管我为小型副项目编写HTML / CSS / JS已有15年了，但这些项目都非常小。碰巧的是，我在这些项目之间已经有好多年没有用Java脚本编写了，而且常常不确定我是否做对了所有事情。



这就是为什么我经常使用库的部分原因！十年前，我使用jQuery，自2017年以来，我在小型项目中经常使用vue.js（您可以查看我作为Vue简介而制作的小工具游戏）。



但是上周，很长时间以来，我第一次写了没有库的简单Javascript，而且很有趣，所以我想谈一谈！



试验纯Javascript



我真的很喜欢Vue。但是上周，当我开始开发https://questions.wizardzines.com时，我的限制与平时略有不同-我想使用相同的HTML来创建PDF（使用Prince）并创建交互式版本问题。



我真的不知道Vue怎么可能（因为Vue希望自己创建所有HTML），并且由于这是一个小项目，我决定尝试使用不带库的纯Javascript编写它-只需编写一些HTML / CSS并添加一个即可<script src="js/script.js"> </script>。



我已经有一段时间没有这样做了，一路上我学到了一些东西，这些东西比起初我想的要容易。



我们几乎通过添加和删除CSS类来做所有事情



我决定通过简单地添加和删除CSS类并使用CSS过渡（如果我想为过渡设置动画）来实现几乎整个用户界面。



这是一个小示例，其中单击next问题按钮可以将一个类添加done到父div。 



div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}


效果很好。和往常一样，我的CSS有点混乱，但是似乎可以管理。



使用.classList添加/删除CSS类



我开始进行类编辑，如下所示：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，它是一个小型的聊天机器人接口，由100行JS / CSS组成。



从Javascript可以看出，它使用了几种相似的模式-很多.classList.add，有些在DOM中添加元素，有些.querySelectorAll。



从peekobot资料中，我了解了.closest元素，该元素查找与给定选择器匹配的最接近的祖先。看来这是摆脱.parentElement.parentElement我在Javascript中写的似乎有些脆弱的一些好方法。



简单的Javascript可以做很多事情！



我对使用简单的JS所做的事情感到非常惊讶。结果，我写了大约50行JS，完成了我想做的所有事情，还多写了一些收集有关用户培训的匿名指标。



和我的前端帖子一样，这不应该是有关前端开发的严肃建议。我的目标是编写使用少于200行Javascript的小型网站，而这些行之有效。如果您也在前端世界中，希望对您有所帮助！


More articles:


All Articles