写个锤子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资源都需要通过网络浏览器下载、解析和执行。这通常是导致低端移动设备上的网站速度变慢和无响应，或使得网络速度变慢的原因。

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

  1. 是否可以用HTML完成？
  2. 如果不能，那么用HTML + CSS可以解决吗？
  3. 如果其他都没有效果，那么解决方案除了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

如果你习惯于使用React和Hooks解决问题，那么最初的解决方案可能是这样的：

const [thingVisible, setThingVisible] = useState(false);

useEffect(() => {
  const timeoutId = setTimeout(() => {
    setThingVisible(true);
  }, 2000);

  return function cleanup() {
    clearTimeout(timeoutId);
  };
}, []);

return thingVisible ? <section>Here's a thing for you!</section> : null;

代码不错，且有效。也许你在功能强大的开发机器上都没有发现性能差异。甚至在这个示例中，可能也没有实际的性能问题。但是想象一下，如果这些堆积起来，突然之间，有数十或数百个类似的不必要的JS计算将在客户端运行，亦或者客户端正在执行一些更大、更长的执行。

使用HTML + CSS动画

使用CSS，你可以使用CSS动画和animation-delay对内容进行动画处理，以使其延迟显示在页面上。所有浏览器都支持此功能，甚至可以提供更好的终端用户体验，因为你可以淡入内容或使用任何其他方式使内容显现得更顺畅。

HTML：

<section class="fade-in">Here's a thing for you!</section>

CSS：

.fade-in {
  opacity: 0;
  animation: fadeIn 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

可以使用HTML处理，就不用CSS

同理，如果是可以或应该用HTML处理的一些内容，那么就不要使用CSS进行操作。

一个极端的例子是，假设我们不小心使用边距隔离两个单词，而不是在单词之间使用空格！这显然不是一个好主意，至少从以下几个方面来看：

  • 可能不遵循字体大小，字母间距等。
  • 没有必要，浪费精力
  • 如果有人需要复制文本，那么单词之间会没有空格

前端开发并不容易

Web前端开发不是一个容易掌握的主题。快速入门可以，但是要掌握它则需要一定程度的经验和学习的积累，才能够使用正确的工具，在恰当的水平上解决正确的问题。解决前端中的问题时会涉及到很多层次和细节。

此外，由于各种原因（例如性能，可用性或可维护性等），你需要了解何时应该在后端而不是在前端解决问题。

总而言之，请记住，有时候我们无需绞尽脑汁地寻求完美的解决方案，可能一些可行的方案就足以应付生产发布和供终端用户使用。

（文本完）

 

 

每日分享前端插件和前端开发教程，欢迎扫码关注我的公众号：前端新世界

posted @ 2021-03-12 18:30  前端新世界  阅读(951)  评论(0)  编辑  收藏  举报