团队开发-代码风格指南

<script setup lang="ts">
// 一般情况下，引用类型使用 const 定义，基本类型使用 let 定义
const arr = []
const obj = {}
const fn = () => {
  console.log('123')
}

let num = 10
let str = 'abc'
let flag = false

// vue3 中 ref、reactive 返回的是一个引用类型
const loading = ref(false)
const person = reactive({ name: '张三', age: 20 })
</script>

<script setup lang="ts">
const loading = ref(false) // 加载
const visible = ref(false) // 显示隐藏
const showAddModal = ref(false) // 新增功能的模态框显示隐藏
const showAddDrawer = ref(false) // 新增功能的抽屉显示隐藏

// 或者 是否显示弹窗(是否的需要加 is 前缀)
const isShowModal = ref<boolean>(false)
const isLogin = ref(false) // 是否登录
const isVIP = ref(false) // 是否是VIP用户
const isDisabled = ref(true) // 是否被禁用

// 表单不建议 formData，直接最简
const form = reactive({
  name: '',
  phone: '',
  remark: ''
})

const userInfo = ref({}) // 用户信息
const tableData = ref([]) // 表格数据
const treeData = ref([]) // 树结构数据

// 对象数组 列表数据后面加 List
const companyList = ref([])
const checkedList = ref([])
const selectedList = ref([])
const addressList = ref([])
const userList = [
  { id: '01', name: '张三' },
  { id: '02', name: '李四' }
]
const tableData = []
const optionsList = [
  { label: '哈哈', value: 1 },
  { label: '嘻嘻', value: 2 }
]

// 非对象数组 在字母后面加s
const ids = []
const selectedIds = []
const activatedKeys = []
const nums = [3, 5, 6]
const strs = ['aaa', 'bbb', 'ccc']

// bad
// function getData() {
//   const arr = []
//   nums.forEach((item) => {
//     arr.push({ value: item })
//   })
// 	 return arr
// }

// good
function getData() {
  return nums.map(item => ({ value: item }))
}

async function getUserList() {
  try {
    const res = await Api.getUserPage()
    userList = res.data
  } catch (error) {
    console.error('Failed to fetch user list:', error)
  }
}

// ---------------------------------------- 方法 --------------------------------------------- //

// 编辑
function handleEdit() {}

// 新增
function handleAdd() {}

// 删除
// function delete() {} // 禁止，delete 是JS关键词
function handleDelete() {}

// 重命名
function handleRename() {}

// 批量删除
function handleMulDelete() {}

// 搜索
function handleSearch() {}

// 返回
function handleBack() {}

// 提交
function handleSubmit() {}

// 确认
function handleConfirm() {}
function handleOk() {}

// 取消
function handleCancel() {}

// 打开 | 关闭
function handleOpen() {}
function handleClose() {}

// 保存
function handleSave() {}

// 获取表格列表
function getTableData() {}
function getTableList() {}
</script>

<script setup lang="ts">
const isEdit = ref(false)

// bad
const title = computed(() => {
  return isEdit.value ? '编辑' : '新增'
})

// good 能一行就尽量写一行 注：三目仅限于单条件判断，禁止嵌套三目
const title = computed(() => (isEdit.value ? '编辑' : '新增'))
</script>

<script setup lang="ts">
// 表单建议使用 form 命名(简洁)，不必使用 formData, 同时使用 reactive
const form = reactive({
  name: '',
  phone: ''
})
</script>

<script setup lang="ts">
// 如果有重置 form 的需求，可以使用函数来返回一个新的初始对象，确保每次调用时都得到一个独立的对象
function getInitForm() {
  return {
    name: '',
    phone: '',
    email: '',
    sex: 1,
    age: '',
  }
}

const form = reactive(getInitForm())

// 重置form
function resetForm() {
  for (const key in form) {
    delete form[key]
  }
  Object.assign(form, getInitForm())
}
</script>

<script setup lang="ts">
import { useAppStore, useUserStore } from '@/stores'
import { useLoading } from '@/hooks'

// stores 或 hooks 的使用命名规则定义
const appStore = useAppStore()
const userStore = useUserStore()

const { loading, setLoading } = useLoading()
</script>

// bad
let isEdit = true
let title = ''
if (isEdit) {
  title = '编辑'
} else {
  title = '新增'
}

// good
let title = isEdit ? '编辑' : '新增'

// bad
if (type === 1 || type === 2 || type === 3) {
}

// good
if ([1, 2, 3].includes(type)) {
}

// bad
function add(num1, num2) {
  return num1 + num2
}

// good
const add = (num1, num2) => num1 + num2

// 比例进度条颜色 尽量减少 if else if
function getProportionColor(proportion) {
  if (proportion < 30) {
    return 'danger'
  }
  if (proportion < 60) {
    return 'warning'
  }
  return 'success'
}

// bad
const status = 200
const message = ''
if (status === 200) {
  message = '请求成功'
} else if (status === 404) {
  message = '请求出错'
} else if (status === 500) {
  message = '服务器错误'
}

// good：使用映射对象（messageMap）来简化条件判断的方式
// 注：仅适用于简单的状态映射场景

// 这种方法的优点包括：
// 简洁：代码更加简洁，避免了冗长的条件判断。
// 可维护：添加或修改状态码与消息的映射关系更加方便，只需修改 messageMap 对象即可。
// 性能：查表法在性能上通常优于多重条件判断，尤其是在状态码较多的情况下。
const status = 200
const messageMap = {
  200: '请求成功',
  404: '请求出错',
  500: '服务器错误'
}
const message = messageMap[status]

<script setup lang="ts">
function createUser(name, phone, age) {
  console.log('姓名', name)
  console.log('手机', phone)
  console.log('年龄', age)
}

// 这种方式在使用的时候可读性很差，扩展性差，而且不易于维护
createUser('张三', '178****2828', 20)

function createUser2({ name, phone, age }) {
  console.log('姓名', name)
  console.log('手机', phone)
  console.log('年龄', age)
}

// 以对象传参更直观，更好扩展和维护
createUser2({ name: '张三', phone: '178****2828', age: 20 })
</script>

import type * as T from './type'
import http from '@/utils/http'

/** 获取用户列表 */
export function getUserList() {
  return http.get<PageRes<T.UserItem[]>>('/user/list')
}

/** 获取用户详情 */
export function getUserDetail() {
  return http.get<T.UserDetail>('/user/detail')
}

/** 新增用户 */
export function addUser(data: any) {
  return http.post<T.UserAddResult>('/user/add', data)
}

/** 编辑用户 */
export function updateUser(data: any) {
  return http.post<T.UserUpdateResult>('/user/update', data)
}

/** 删除用户 */
export function deleteUser(data: { id: string }) {
  return http.post<T.UserDeleteResult>('/user/delete', data)
}

/** @desc 正则-手机号码 */
export const Phone = /^1[3-9]\d{9}$/

/** @desc 正则-邮箱 */
export const Email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

/** @desc 正则-6位数字验证码正则 */
export const Code_6 = /^\d{6}$/

/** @desc 正则-4位数字验证码正则 */
export const Code_4 = /^\d{4}$/

/** @desc 正则-16进颜色值 #333 #8c8c8c */
export const ColorRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

/** @desc 正则-只能是中文 */
export const OnlyCh = /^[\u4e00-\u9fa5]+$/gi

/** @desc 正则-只能是英文 */
export const OnlyEn = /^[a-zA-Z]*$/

/** @desc 登录注册-密码 6-16位大小写字母、数字的js正则 */
export const Password = /^[a-zA-Z0-9]{6,16}$/

<script lang="ts" setup>
import { reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
// 正则推荐一下导入方式
import * as Regexp from '@/utils/regexp'

const form = reactive({
  name: '',
  phone: ''
})

function handleSubmit() {
  if (!Regexp.Phone.test(form.phone)) {
    return Message.warning('请输入正确手机号格式')
  }
}
</script>