{SITE_TITLE}

前端开发中的五个实用技巧

2026-05-25 分类：技术

日常开发中积累了一些小技巧，谈不上高深，但每个都帮我省过不少时间。整理五个分享出来。

1. 使用 CSS Grid 实现响应式布局

过去做栅格布局常用 Flexbox 配合媒体查询，每档宽度都要手动计算。CSS Grid 的 auto-fill 和 minmax 组合可以几行搞定：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

这样每个卡片最小 280px，空间够就自动加列，不够就折行，完全不需要媒体查询。

2. Console 的高级用法

console.log 大家都用，但还有几个更实用的方法：

  • console.table() —— 打印数组或对象表格，比 log 清晰得多
  • console.time() / timeEnd() —— 精确测量代码段执行时间
  • console.group() —— 分组折叠日志，适合调试复杂逻辑

3. 解构赋值的实用场景

解构不仅用于提取对象属性，还可以用来交换变量、设置默认值、忽略不需要的返回值：

// 交换变量
[a, b] = [b, a];

// 函数参数默认值
function createUser({ name, age = 18, role = 'user' }) { ... }

// 忽略某些返回值
const [first, , third] = arr;

4. 善用 :empty 和 :has 选择器

:empty 可以选中没有任何子元素的空标签，很适合处理「暂无数据」的场景。:has() 更是被称为「CSS 的父选择器」，可以根据子元素的存在来影响父元素的样式：

/* 当 card 内有图片时改变布局 */
.card:has(img) {
  grid-template-columns: 1fr 2fr;
}

/* 空状态提示 */
.empty-state:empty::after {
  content: '暂无数据';
  color: #999;
}

5. 用 AbortController 取消请求

当用户在搜索框中快速输入时，前一个请求还没返回就要发新的。用 AbortController 可以优雅地取消未完成的请求，避免竞态：

let controller;

function search(query) {
  controller?.abort();
  controller = new AbortController();
  return fetch(`/api/search?q=${query}`, { signal: controller.signal });
}

以上就是五个小技巧。前端的工具链日新月异，但这些基础能力的打磨永远不会过时。

« 返回首页