值得一看的前端代码片段

日常开发中，我们都会积累一些常用的代码片段，可以直接复制粘贴到各种项目中使用，非常方便。如果你接手过别人的项目，可能会注意到一些项目中存在相同的工具方法，这些就是之前开发者积累的常用代码片段。

如今前端社区发展成熟，lodash、dayjs 等优秀库能满足我们处理数组、日期等的需求，本文不会重复这些常见的片段。

1. 检测元素外部点击

隐藏弹出框或收起下拉菜单时，使用 contains 方法代替逐层检查。

<code class="language-javascript">// 代码示例 (此处省略)</code>

2. 快速打开官方网站

查看第三方库的首页或代码仓库，可以使用这些 npm 命令：

打开首页

npm home PACKAGE_NAME

例如，对于 React

npm home react

打开代码仓库

npm repo PACKAGE_NAME

例如，对于 React

npm repo react

3. 一次性事件监听器

除了在事件函数中移除监听器，还可以使用 once 参数。

<code class="language-javascript">// 代码示例 (此处省略)</code>

4. 将秒格式化为 HH:mm:ss

在显示音频/视频时长等场景下，可以这样格式化秒数：

<code class="language-javascript">const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
const seconds = 3661;
console.log(formatSeconds(seconds));</code>

要显示类似“刚刚”的相对时间，可以尝试 timeago.js 库。

5. 将 URL 参数转换为对象

无需使用 query-string 库，直接使用 URLSearchParams API：

<code class="language-javascript">const getUrlParams = (query) =>
  Array.from(new URLSearchParams(query)).reduce(
    (p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),
    {}
  );
const query = "?a=1&b=2&a=3";
console.log(getUrlParams(query));</code>

6. 打开新标签页

打开外部链接时，设置 rel="noopener noreferrer" 以避免安全风险。

<code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

<code class="language-javascript">function openNewTab() {
  window.open("https://example.com", "newTab", "noopener,noreferrer");
}</code>

7. 显示上传的图片

使用 FileReader API 的 readAsDataURL 方法显示上传的图片。

<code class="language-javascript">// 代码示例 (此处省略)</code>

8. 文件下载

使用 标签的 download 属性可以触发下载，但它有一些限制。

<code class="language-html"><a download="" href="https://www.php.cn/link/8b89afaf8e00e0a46ea4d76ac473b1a2">下载</a></code>

<code class="language-javascript">function download(url) {
  const link = document.createElement("a");
  link.download = "file name";
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}</code>

你也可以在服务器端设置响应头，或者在浏览器端使用 Blob 和 createObjectURL。

<code class="language-javascript">const data = JSON.stringify({ message: "Hello" });
const blob = new Blob([data], { type: "application/json" });
const url = window.URL.createObjectURL(blob);
download(url);
window.URL.revokeObjectURL(url);</code>

9. 缓存结果

为复杂的计算缓存函数结果。

<code class="language-javascript">const memoize = (fn) =>
  (
    (cache = Object.create(null)) =>
    (arg) =>
      cache[arg] || (cache[arg] = fn(arg))
  )();
// 代码示例 (此处省略)</code>

10. 多行省略号

使用 CSS 将文本截断为省略号，适用于单行或多行。

<code class="language-css">.truncate-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}</code>

11. 选择最后几个元素

使用 CSS 选择器定位特定元素。

<code class="language-css">li:nth-child(-n + 3) {
  text-decoration: underline;
}
// 代码示例 (此处省略)</code>

12. 滚动条样式

使用 CSS 或 better-scroll 等第三方库自定义滚动条样式。

<code class="language-javascript">// 代码示例 (此处省略)</code>

13. 百分比计算-最大余数法

使用最大余数法确保百分比总和等于 1。

<code class="language-javascript">// 代码示例 (此处省略)</code>

14. 限制并发

在进行大量请求时，限制并发请求数。

<code class="language-javascript">const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
const seconds = 3661;
console.log(formatSeconds(seconds));</code>

15. UUID 生成

使用此代码生成唯一标识符。

<code class="language-javascript">const getUrlParams = (query) =>
  Array.from(new URLSearchParams(query)).reduce(
    (p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),
    {}
  );
const query = "?a=1&b=2&a=3";
console.log(getUrlParams(query));</code>

16. 打开模态框并阻止 body 滚动

打开模态框时阻止 body 滚动。

<code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

原文链接：https://www.php.cn/link/d9d838896ca0a5e16e7efa2439943fbd

以上是值得一看的前端代码片段的详细内容。更多信息请关注PHP中文网其他相关文章！