作为一名前端开发者，我们每天都在与 HTML、CSS 和 JavaScript 打交道。今天分享 3 个实用技巧，帮你写出更优雅、高效的代码。

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

CSS 变量让主题切换变得异常简单。只需定义一套变量，通过修改变量值即可实现日间/夜间模式切换。

**代码示例：**

:root {
    --primary-color: #3498db;
    --bg-color: #ffffff;
    --text-color: #333333;
}

[data-theme="dark"] {
    --primary-color: #2980b9;
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

.btn {
    background: var(--primary-color);
}

**切换主题：**

function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme');
    document.documentElement.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
}

## 技巧二：使用 Intersection Observer 实现懒加载

别再监听 scroll 事件了！Intersection Observer 性能更好，代码更简洁。

**代码示例：**

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
}, { threshold: 0.1 });

images.forEach(img => observer.observe(img));

**HTML 结构：**

<img data-src="image.jpg" alt="描述" loading="lazy">

## 技巧三：防抖节流优化事件处理

频繁触发的事件（如输入、滚动）需要防抖节流，避免性能问题。

**防抖函数（延迟执行）：**

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

// 使用示例
searchInput.addEventListener('input', debounce((e) => {
    console.log('搜索:', e.target.value);
}, 500));

**节流函数（限制频率）：**

function throttle(fn, limit = 1000) {
    let inThrottle = false;
    return function(...args) {
        if (!inThrottle) {
            fn.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
    console.log('滚动位置:', window.scrollY);
}, 200));

## 总结

这 3 个技巧看似简单，但能显著提升代码质量和用户体验：

1. **CSS 变量**让主题维护成本降低 80%
2. **Intersection Observer**比 scroll 监听性能提升 10 倍
3. **防抖节流**避免不必要的重复计算

前端开发不仅是实现功能，更要追求优雅和效率。把这些技巧用到你的项目中，代码会变得更加干净、高效。

**实践建议：** 选一个技巧，今天就在你的项目中尝试一下。实践出真知，用多了自然成为肌肉记忆。

—

_关注我，获取更多前端开发实战技巧_