## 前言

在前端开发中，一些实用的小技巧能大幅提升开发效率。今天分享 3 个我日常高频使用的技巧，每个都能帮你节省时间。

## 技巧一：CSS Grid 快速居中

别再写 margin: auto 了，Grid 一行搞定：

“`css
.parent {
display: grid;
place-items: center;
}
“`

这行代码同时实现水平和垂直居中，比 flexbox 更简洁。适用于弹窗、加载动画等场景。

## 技巧二：JavaScript 防抖函数

搜索框输入时，避免频繁请求 API：

“`javascript
function debounce(fn, delay = 300) {
let timer = null;
return function(…args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}

// 使用示例
const searchInput = document.querySelector(‘#search’);
searchInput.addEventListener(‘input’, debounce((e) => {
fetch(‘/api/search?q=’ + e.target.value);
}, 500));
“`

用户停止输入 500ms 后才触发请求，大幅减少服务器压力。

## 技巧三：CSS 变量实现主题切换

用 CSS 变量轻松实现暗黑模式：

“`css
:root {
–bg-color: #ffffff;
–text-color: #333333;
}

[data-theme=’dark’] {
–bg-color: #1a1a1a;
–text-color: #ffffff;
}

body {
background: var(–bg-color);
color: var(–text-color);
transition: all 0.3s ease;
}
“`

“`javascript
// 切换主题
document.documentElement.setAttribute(‘data-theme’, ‘dark’);
“`

只需切换一个属性，全站主题瞬间改变。

## 结语

这些技巧看似简单，但能解决日常开发中的常见问题。收藏起来，下次遇到类似场景直接用！

**记住：好的代码不是写得更多，而是写得更巧。**