java鼠标指针锤子,写个锤子JS！它应该是你最后的选择

本文翻译自：

https://dev.to/olpeh/javascript-should-be-your-last-resort-5dje

在进行现代化Web前端开发时，使用着自己最爱的框架，有时候可能会情不自禁地用JavaScript解决所有的问题。很多时候这是无意识的，因为你日复一日的开发工作使用的正是JS。

这类似于亚伯拉罕·马斯洛(Abraham Maslow)在1966年描述的情况：

如果你仅有的工具是锤子，那么你就会不自禁地把所有东西都当作钉子。

——维基百科：Law of the instrument

图片来自Unsplash，作者FaustoMarqués

注意：在这篇文章中，我只谈论JS，尽管我在项目中使用的主要是TS——但最终，在编译后，都变成了JS。

实现UI时要考虑的因素

在所有情况下都使用JS的这种思维方式会产生不必要的处理负担，这些额外的JS操作都需要在最终用户的设备上运行。网站上的所有JS资源都需要通过网络浏览器下载、解析和执行。这通常是导致低端移动设备上的网站速度变慢和无响应，或使得网络速度变慢的原因。

那么我们应该如何走出思维困局：

是否可以用HTML完成？

如果不能，那么用HTML + CSS可以解决吗？

如果其他都没有效果，那么解决方案除了HTML和CSS之外，可能需要少量的JS。

这种思维方式对开发人员来说并不是一件易如反掌的事。可能你是一个关注JavaScript的前端开发人员，那么用这种方式解决大多数问题对你来说像呼吸一样自然。但是，你还得考虑你的最终用户。当涉及到Web性能时，客户端JS作为最大的问题一骑绝尘。

1. 是否可以用HTML完成？

计划和实现功能的基本结构和语义，先考虑是否可以使用纯HTML，而无需任何额外的样式和使用本机HTML元素和功能。如果需要一些其他样式或功能，则转到步骤2。

2.尝试使用HTML + CSS解决

使用CSS来应用所需的其他样式或动画，同时在脑海中谨记语义和可访问性。如果你要构建的特定UI片段中需要有一些额外的互动，则转到步骤3。

3.使用HTML + CSS + JS

添加满足要求所需的最少JS代码量。请记住，如果不用JS就可以解决问题，那么就应该不要用到JS。

完成后，向同事展示代码，让他们进行审核。这样的话，如果代码中还有些不必要的部分，那么就可以解决这些问题而不给用户增加客户端JS成本。

举个简单的例子

所举的这个例子，发生于Web前端开发中的几乎所有部分，但此处是一个简单的示例，用来证明我的观点。

假设你正在开发一个React项目，而你正在开发的功能具有一些UI部件，这些UI部件只有在一定的延迟(例如2秒)之后才可见。

使用React Hooks

如果.........