9 个节省时间的 Web 开发小妙招

修复这些隐藏的错误，以免浪费你的更多时间

让我们切入正题——大多数开发人员（即使是聪明的开发人员）也会浪费时间去解决已经有更好解决方案的问题。

你还在苦苦追寻 bug，一遍又一遍地编写相同的代码，甚至还在用胶带修补代码，因为你不知道还有更简洁的方法。所以，这里有9 个巧妙的修复方法，能让你 Web 开发工作更加轻松快捷。

1. 还在到处写作document.querySelector？那就用快捷方式吧！

别再像鹦鹉一样重复自己的话了。创建你自己的选择器简写：

const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);

现在$('#app')就像 jQuery 一样工作了——但你仍然在使用原生 JavaScript。太棒了。

2. 流畅的 UI 动画无需框架

本土人Element.animate()被严重低估：

element.animate([
  { opacity: 0 },
  { opacity: 1 }
], {
  duration: 500,
  easing: 'ease-in'
});

无需 CSS 类、外部库、甚至无卡顿即可实现流畅的动画。

3. HTML 有内置对话框元素。快用起来！

而不是拼凑模态窗口：

<dialog id="myModal">Hello!</dialog>
document.getElementById('myModal').showModal();

Boom——即时模态框，原生于 HTML。简洁易用，无需额外库。

4. 停止使用本地存储

是的，localStorage 很简单。但它是同步的，会阻塞主线程。

如果您要保存更大或更复杂的数据：

使用IndexedDB（或类似的包装器idb-keyval）

或者尝试静态数据的cachesAPI - 最初用于服务工作者，但也可用于客户端逻辑。

5. 添加“type=module”并立即import在浏览器中使用

不想使用 Webpack/Vite 只是为了尝试模块？

<script type="module">
  import { hello } from './utils.js';
  hello();
</script>

是的，这在浏览器中有效。开发变得简单多了。

6. 仅使用 CSS + a 实现无 BS Toast 通知<template>

你不需要一个完整的 UI 库来处理 Toast 消息。试试这个：

<template id="toast">
  <div class="toast">Copied!</div>
</template>
const toast = document.importNode(toastTemplate.content, true);
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);

添加最少的 CSS，就好了。可重复使用，而且速度很快。

7. 使用rel="noopener"外部链接或被黑客入侵

像这样打开链接？

<a href="https://external.com" target="_blank">Open</a>

添加此项或冒着暴露window.opener给攻击者的风险：

<a href="https://external.com" target="_blank" rel="noopener">Open</a>

简单的修复，大不了的事。

8. 无需 JavaScript 自动延迟加载图像

只需添加这个：

<img src="cat.jpg" loading="lazy" />

现代浏览器原生延迟加载。无需编写额外的脚本，让 HTML 轻松搞定一切。

9.始终在标签defer上使用<script>

您可能已经知道async，但是对于依赖于 DOM 准备就绪的脚本，请始终使用：

<script src="main.js" defer></script>

它避免了渲染阻塞，并保持了执行顺序的一致性。基本上，它是“正常工作”的版本。