Back to Details

senior

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Senior Frontend Practices

资深前端开发实践

Production-quality frontend development standards.
生产级前端开发标准。

Instructions

说明

1. Accessibility (a11y)

1. 可访问性（a11y）

tsx
// ✅ Semantic HTML
<button type="button">Click me</button>  // Not <div onClick>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

// ✅ ARIA labels
<button aria-label="Close modal" onClick={onClose}>
  <XIcon />
</button>

// ✅ Focus management
<input 
  ref={inputRef}
  aria-describedby="email-error"
/>
{error && <span id="email-error" role="alert">{error}</span>}
tsx
// ✅ 语义化HTML
<button type="button">Click me</button>  // 不要使用<div onClick>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

// ✅ ARIA 标签
<button aria-label="Close modal" onClick={onClose}>
  <XIcon />
</button>

// ✅ 焦点管理
<input 
  ref={inputRef}
  aria-describedby="email-error"
/>
{error && <span id="email-error" role="alert">{error}</span>}

2. Keyboard Navigation

2. 键盘导航

tsx
// ✅ Handle keyboard events
function Modal({ onClose }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);
}

// ✅ Focus trap
<FocusTrap>
  <div role="dialog" aria-modal="true">
    ...
  </div>
</FocusTrap>
tsx
// ✅ 处理键盘事件
function Modal({ onClose }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);
}

// ✅ 焦点捕获
<FocusTrap>
  <div role="dialog" aria-modal="true">
    ...
  </div>
</FocusTrap>

3. Responsive Design

3. 响应式设计

css
/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 640px) {
  .container { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding: 2rem; }
}
tsx
// ✅ Responsive component
function ResponsiveLayout() {
  return (
    <div className="flex flex-col lg:flex-row gap-4">
      <aside className="w-full lg:w-64">Sidebar</aside>
      <main className="flex-1">Content</main>
    </div>
  );
}
css
/* 移动端优先方案 */
.container {
  padding: 1rem;
}

@media (min-width: 640px) {
  .container { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding: 2rem; }
}
tsx
// ✅ 响应式组件
function ResponsiveLayout() {
  return (
    <div className="flex flex-col lg:flex-row gap-4">
      <aside className="w-full lg:w-64">Sidebar</aside>
      <main className="flex-1">Content</main>
    </div>
  );
}

4. Micro-interactions

4. 微交互

tsx
// ✅ Button feedback
<button className="
  transition-all duration-200
  hover:scale-105 hover:shadow-lg
  active:scale-95
  focus:ring-2 focus:ring-offset-2
">
  Submit
</button>

// ✅ Loading states
<button disabled={isLoading}>
  {isLoading ? <Spinner /> : 'Submit'}
</button>
tsx
// ✅ 按钮反馈
<button className="
  transition-all duration-200
  hover:scale-105 hover:shadow-lg
  active:scale-95
  focus:ring-2 focus:ring-offset-2
">
  Submit
</button>

// ✅ 加载状态
<button disabled={isLoading}>
  {isLoading ? <Spinner /> : 'Submit'}
</button>

5. Error States

5. 错误状态

tsx
// ✅ User-friendly error messages
function FormField({ error }) {
  return (
    <div>
      <input 
        aria-invalid={!!error}
        className={error ? 'border-red-500' : 'border-gray-300'}
      />
      {error && (
        <p className="text-red-500 text-sm mt-1" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}
tsx
// ✅ 友好的用户错误提示
function FormField({ error }) {
  return (
    <div>
      <input 
        aria-invalid={!!error}
        className={error ? 'border-red-500' : 'border-gray-300'}
      />
      {error && (
        <p className="text-red-500 text-sm mt-1" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

6. Code Quality Checklist

6. 代码质量检查清单

Before submitting code:
  • Semantic HTML used
  • ARIA labels on interactive elements
  • Keyboard navigation works
  • Mobile responsive
  • Loading states implemented
  • Error states handled
  • Focus visible on all interactive elements
  • Color contrast passes WCAG AA
提交代码前请确认：
  • 使用了语义化HTML
  • 交互元素添加了ARIA标签
  • 键盘导航功能正常
  • 适配移动端响应式
  • 实现了加载状态
  • 处理了错误状态
  • 所有交互元素的焦点可见
  • 颜色对比度符合WCAG AA标准

References

参考资料