在日常前端开发中，掌握一些实用技巧能让你的工作效率大幅提升。今天分享 5 个我常用的 HTML/CSS/JavaScript 实战技巧，每个都经过项目验证。

## 1. CSS 变量实现主题切换

别再写死颜色值了！使用 CSS 变量可以轻松实现深色/浅色主题切换：

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

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

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

// 一键切换主题
document.documentElement.setAttribute(
  'data-theme', 
  localStorage.getItem('theme') || 'light'
);

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

## 2. 防抖节流，优化性能

搜索框实时搜索？滚动监听？必须上防抖节流！

// 防抖：n 秒内只执行最后一次
function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：n 秒内只执行一次
function throttle(fn, interval = 300) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// 使用示例
searchInput.addEventListener('input', debounce(handleSearch, 500));
window.addEventListener('scroll', throttle(handleScroll, 200));

## 3. 现代 CSS Grid 布局

告别 float 和复杂的 flex 嵌套，Grid 让布局更简单：

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

.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

一行代码实现响应式卡片布局，无需媒体查询！

## 4. 异步请求的优雅处理

async/await + try/catch 让异步代码像同步一样清晰：

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP 错误：${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取用户数据失败:', error);
    showErrorToast('加载失败，请重试');
    return null;
  }
}

// 并发请求多个接口
const [user, posts, comments] = await Promise.all([
  fetchUserData(1),
  fetchPosts(1),
  fetchComments(1)
]);

## 5. 本地存储封装

封装 localStorage，处理 JSON 和过期时间：

const storage = {
  set(key, value, expireMinutes) {
    const data = {
      value,
      expire: expireMinutes ? Date.now() + expireMinutes * 60000 : null
    };
    localStorage.setItem(key, JSON.stringify(data));
  },
  
  get(key) {
    const raw = localStorage.getItem(key);
    if (!raw) return null;
    
    const { value, expire } = JSON.parse(raw);
    if (expire && Date.now() > expire) {
      localStorage.removeItem(key);
      return null;
    }
    return value;
  },
  
  remove(key) {
    localStorage.removeItem(key);
  }
};

// 使用：缓存 30 分钟
storage.set('userInfo', userData, 30);
const cached = storage.get('userInfo');

## 结语

这些技巧看似简单，但在实际项目中能显著提升开发效率和代码质量。建议收藏并在下一个项目中实践！

**你还有哪些私藏的前端技巧？欢迎在评论区分享！**