前端最佳实践

编写高质量、可维护的前端代码的建议和技巧。

代码组织

项目结构

src/
├── components/     # 可复用组件
├── pages/         # 页面组件
├── composables/   # 组合函数
├── utils/         # 工具函数
├── types/         # TypeScript 类型
├── styles/        # 全局样式
└── main.js        # 入口文件

命名规范

// ✅ 好的命名
const getUserProfile = () => {}
const isLoading = ref(false)
const MAX_RETRIES = 3

// ❌ 避免
const gup = () => {}        // 含义不清
const loading = ref(false)  // 单词含义模糊
const retry_max = 3         // 混合命名风格

组件设计

单一职责原则

<!-- ✅ 好的组件 -->
<!-- UserCard.vue: 只负责显示用户信息 -->
<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<!-- ❌ 避免：组件做太多事情 -->
<template>
  <div>
    <!-- 显示用户 -->
    <h2>{{ user.name }}</h2>
    <!-- 编辑用户 -->
    <input v-model="user.name" />
    <!-- 删除用户 -->
    <button @click="deleteUser">删除</button>
    <!-- 发送邮件 -->
    <button @click="sendEmail">发送邮件</button>
  </div>
</template>

Props 验证

export default {
  props: {
    userId: {
      type: Number,
      required: true,
      validator: (value) => value > 0
    },
    status: {
      type: String,
      enum: ['active', 'inactive', 'pending']
    }
  }
}

性能优化

防止不必要的重新渲染

import { computed } from 'vue'

export default {
  setup() {
    const items = ref([...])

    // 使用 computed 而不是方法
    const filteredItems = computed(() => {
      return items.value.filter(item => item.active)
    })
  }
}

懒加载组件

import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

错误处理

使用 try-catch

const fetchData = async () => {
  try {
    const response = await fetch('/api/data')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    return data
  } catch (error) {
    console.error('获取数据失败:', error)
    // 返回默认值或抛出错误
    throw error
  }
}

可访问性 (A11y)

语义化 HTML

<!-- ✅ 好的语义 -->
<nav>导航菜单</nav>
<main>主要内容</main>
<article>文章</article>
<footer>页脚</footer>

<!-- ❌ 避免 -->
<div class="nav">导航菜单</div>
<div class="main">主要内容</div>

ARIA 属性

<button aria-label="关闭菜单" @click="closeMenu">
  ✕
</button>

<div role="alert">错误信息</div>

测试

单元测试示例

import { describe, it, expect } from 'vitest'
import { add } from './math.js'

describe('math', () => {
  it('应该正确计算加法', () => {
    expect(add(2, 3)).toBe(5)
  })
})

最佳实践检查清单

• ✅ 遵循代码规范和命名约定
• ✅ 编写清晰的代码注释
• ✅ 使用 TypeScript 获得类型安全
• ✅ 定期审查和重构代码
• ✅ 编写测试用例
• ✅ 监测性能和用户体验
• ✅ 遵循可访问性标准

推荐工具

• ESLint - 代码质量检查
• Prettier - 代码格式化
• TypeScript - 类型检查
• Vitest - 快速单元测试
• Playwright - 端到端测试

---

更新日期: 2025-11-11 阅读时间: 6 分钟