Web前端开发备忘录 - 开发者速查手册

语义化HTML5结构

使用HTML5语义化标签构建清晰的页面结构

HTML

<header>
  <nav></nav>
</header>
<main>
  <article>
    <section></section>
  </article>
  <aside></aside>
</main>
<footer></footer>

提示：语义化标签有助于SEO优化和屏幕阅读器理解页面结构

Flexbox居中布局

使用Flexbox实现完美的元素居中

CSS

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.center-item {
  padding: 20px;
  background: #61dafb;
}

提示：这是最简单可靠的居中方案，兼容现代浏览器

防抖与节流

优化高频事件处理，提升性能

JavaScript

// 防抖 - 延迟执行
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流 - 限制执行频率
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

应用场景：搜索框输入、滚动事件、窗口resize等

CSS Grid响应式布局

使用CSS Grid创建复杂的响应式布局

CSS

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

.grid-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 10px;
  color: white;
}

优势：自动适应屏幕尺寸，无需媒体查询

Promise异步处理

优雅地处理异步操作和错误

JavaScript

// async/await 方式
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Promise.all 并发请求
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
]);

React Hooks常用模式

使用Hooks简化状态管理和副作用

React

import { useState, useEffect, useCallback } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  const decrement = useCallback(() => {
    setCount(c => c - 1);
  }, []);
  
  return { count, increment, decrement };
}

Vue3 Composition API

使用Composition API组织逻辑

Vue

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    const doubled = computed(() => count.value * 2);
    
    const increment = () => {
      count.value++;
    };
    
    onMounted(() => {
      console.log('Component mounted');
    });
    
    return { count, doubled, increment };
  }
}

ESLint配置

统一的代码风格和规范

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always']
  }
};