JavaScript 应该是你的最后手段

JS 是你的锤子

在进行现代前端 Web 开发时，使用你最喜欢的框架，有时你可能会忍不住用 JavaScript 解决所有问题。有时这种情况会不自觉地发生，因为你在日常开发工作中最常用的就是 JavaScript。

这与亚伯拉罕·马斯洛在 1966 年描述的情况类似：

我想，如果你唯一的工具是一把锤子，那么你就会忍不住把所有东西都当成钉子来对待。

–维基百科：工具法

注意：在这篇博文中，我只讨论 JS，尽管我主要在项目中使用 TS——无论如何，编译后它最终还是 JS。

实现 UI 时需要考虑的事项

这种“一切皆用 JS”的思维模式会导致不必要的处理，这些处理需要以客户端 JS 的形式在最终用户的设备上运行。网站上的所有 JS 资源都需要由 Web 浏览器下载、解析和执行。这通常是导致网站在低端移动设备上加载缓慢、响应迟钝或网速缓慢的原因。

你应该如何思考：

这可以用 HTML 实现吗？
如果没有的话，可以用HTML+CSS解决吗？
如果没有其他办法，解决方案可能除了 HTML 和 CSS 之外还需要少量的 JS

这种思维方式并非针对开发者最容易做到的事情。你可能是一位专注于 JavaScript 的前端开发者，用 JavaScript 解决大多数问题对你来说似乎轻而易举。然而，你应该考虑你的最终用户。客户端 JS 是 Web 性能面临的最大问题。你可以从我的其他博客文章中阅读我关于 Web 性能的一些想法。你可以在我的个人博客的本文底部找到一些链接。

1. 这可以用 HTML 实现吗？

规划并实现该功能的基本结构和语义，使用纯 HTML 代码，无需任何额外的样式，并使用原生 HTML 元素和功能。如果需要一些额外的样式或功能，请转到步骤 2。

2.尝试用HTML + CSS解决

使用 CSS 来添加所需的额外样式或动画，同时确保语义和可访问性。如果您正在构建的某个 UI 部分需要一些额外的交互性，请转到步骤 3。

3.使用HTML + CSS + JS

添加满足要求所需的最少 JS 代码量。记住，不用 JS 就能解决的问题，或许也应该不用 JS 就能解决。

完成后，请将代码展示给同事，让他们审核。代码中可能还存在一些不必要的部分，可以通过修改来解决，而无需增加客户端 JS 的开销。

简单示例

这个问题几乎适用于 Web 前端开发中的任何情况，但这里有一个简单的实际示例可以帮助我证明我的观点。

想象一下，您正在开发一个 React 项目，并且您正在开发一项功能，该功能具有一些 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;
  }
}

不要用 CSS 来做 HTML 能做的事情

同样，不要用 CSS 做一些你可以而且应该用 HTML 做的事情。

一个极端的例子是，我们意外地使用边距将两个单词彼此分开，而不是在单词之间使用空格！

至少从以下角度来看，这显然不是一个好主意：

它可能不符合字体大小、字母间距等。
不需要，浪费精力和处理
如果有人需要复制文本，那么单词之间就没有空格

前端开发并不容易

Web 前端开发并非易事。虽然入门很快，但要精通它需要一定的经验和对全局的理解，才能使用合适的工具在合适的层面上解决合适的问题。解决前端问题涉及多个层面和细节。

此外，您需要了解何时应该在后端而不是前端解决问题，原因包括性能、可用性或可维护性等。

但是，请记住，有时您不需要尝试寻求完美的解决方案，一些有效的解决方案可能足以投入生产并供最终用户使用。

文章来源：https://dev.to/olpeh/javascript-should-be-your-last-resort-5dje