30 seconds of code: 前端开发者的代码片段宝库

作为前端或全栈开发者，你是否经常遇到这样的场景：需要一个特定的 JavaScript 函数，但懒得自己写，去搜索又觉得杀鸡用牛刀？30 seconds of code 正是来解决这个问题的——它收录了数百个精炼的、30 秒以内就能理解并使用的代码片段，覆盖 JavaScript、Python、React 等多种语言和框架。

项目简介

30 seconds of code 是一个由社区维护的高质量代码片段仓库，所有代码片段都遵循「30 秒以内理解」的原则：每个片段足够短小、足够专注、一目了然。项目在 GitHub 已积累超过 12.7 万颗星，拥有同名网站 30secondsofcode.org，支持在线搜索和浏览。网站上包含按标签、语言、功能等维度组织的代码片段集合，是你日常开发中的实用工具箱。

内容特色

• 极短极精：每个代码片段都控制在很短的行数内，30 秒即可读完并理解用法
• 覆盖全面：涵盖 JavaScript、Python、React、TypeScript、Bash/CSS 等多语言领域
• 分类清晰：按功能标签组织：Array、String、Date、Function、Object、Math 等，查找方便
• 即查即用：每个片段都有使用示例，拿过来直接复制到项目里就能用
• 持续更新：社区持续贡献新片段，内容与时俱进

热门代码片段示例

1. 数组扁平化

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
// flatten([1,[2,3,[4]]]) => [1,2,3,4]

2. 防抖函数

const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

3. 深拷贝对象

const deepClone = obj => JSON.parse(JSON.stringify(obj));
// 或用更完整的实现处理循环引用

4. UUID 生成

const uuid = () => crypto.randomUUID();
// 现代浏览器原生支持

5. 检测元素是否在视口内

const isInViewport = el => {
  const r = el.getBoundingClientRect();
  return r.top < window.innerHeight && r.bottom > 0;
};

如何使用

方式一：访问官方网站 https://30secondsofcode.org，通过搜索框或左侧导航栏按语言或标签查找需要的代码片段。

方式二：直接克隆 GitHub 仓库到本地，在本地查阅和搜索：

git clone https://github.com/Chalarangelo/30-seconds-of-code.git
cd 30-seconds-of-code
# 按语言在对应目录中查找 .md 文件

适用场景

• 日常开发中快速查找某个工具函数的实现方式
• 学习 JavaScript 新特性时作为参考示例
• 面试前快速过一遍常见手写实现（防抖、节流、深拷贝等）
• 前端代码重构时参考更优雅的实现方式
• 技术博客或教程中引用高质量代码示例

开源协议

所有代码片段采用 Creative Commons Attribution 4.0 International（CC-BY-4.0）协议，允许在署名来源的前提下自由使用和传播。

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。