编码规范（自用习惯）

老君-hjs

已于 2024-01-09 14:36:40 修改

阅读量500

点赞数 7

文章标签：前端

于 2024-01-09 10:08:48 首次发布

本文链接：https://blog.csdn.net/qq_43072786/article/details/135473231

版权

规范文档

- 代码规范

代码规范

代码规范是软件开发中至关重要的一部分，它涵盖了代码的编码风格、代码结构、命名规范、注释规则等方面的准则。

命名规范

命名规范按照类型 Number、String、Boolean、Object、Array、Function、Date、RegExp、Error、undefined、Null、Symbol、Set、Map
将 类型首字母 与 变量名 结合例如 nAge 代表 n + age 意为年龄是number类型

变量命名（目前Number、String、Boolean、Object、Array, Ref, temporary：临时）

// 例如
const sName = '大娃';
const name = '大娃'; // 字符串声明变量可以省略s

const nAge = 18;
const oGrade = {
  subject: '数学',
  score: 99
}; // ❗注意：对象内部的值一般不需要使用规范
const aHobby = ['打游戏','学习'];
const bGoodBoy = true;

// 如果是绑定dom节点的变量前缀用 ref+变量名
<el-form ref="refForm" />
const refForm = ref<FormInstance>();

// 临时变量
function () => {
  let tName = '大娃'; // 函数内部声明数组 t + 变量名
  let tAge = 18; // 如果声明的是临时的number类型，规范写法是 tnAge，但是可以优先使用 t，因为局部使用该变量比较好找。
}

// 特殊变量
let const_name = '大娃'; // 表示常量，也可以使用 NAME = '大娃'
let dict_type = []; // 表示字典，默认数组格式
let options_type = []; // 表示选项，默认数组格式
// 如果定义了其他的特殊变量请补充到这里

函数命名(Function)

内部函数 f + 方法名
外部函数 fn + 方法名
参数 p + 参数名 更规范一点就是 p + 类型首字母 + 参数名
f：Function，p：Param参数

const fEat = () => {};
// 引用外部函数时
import { fnEat } from '@/utils/utils';
const fnEat = () => {}; 
// 参数
const fEat = (pFood, pnPrice) => {};
// 接口参数 res
api((res) => {});
// 循环函数 item, index
arr.forEach((item, index) => {});

组件中的命名

组件引用使用 功能组件：cp+组件名 业务组件：dom+组件名
传值变量定义使用 prop + 变量名
子组件调用父组件的方法使用 parent + 方法名
组件name属性使用文件路径驼峰拼接 src\views\resource\collect\index.vue => resourceCollectIndex
组件名称尽量语义化 index 表格，add新增，edit编辑，detail详情，addCustom客户新增-业务组件...

import cpTable from '@/cpTable.vue'
import domChild from '@/child.vue'
<cp-table />
// vue 中 子组件绑定函数
<dom-child :propConfig="oGrade" @parentAdd="fAdd" />

name: 'resourceCollectIndex'

类似命名解决
当页面中出现多个类似的变量 前缀 + By + 后缀

const oConfigByPerson = {... }; // 代表人员_配置项_对象类型
const oConfigByCustom = {... }; // 代表客户_配置项_对象类型

import { apiOptions as apiOptionsBySysStaff } from "@/api/inspectionSystem/sysStaff";
import { apiOptions as apiOptionsByInspProdType } from "@/api/inspectionManage/inspProdType";

api命名

文件创建按照后端的接口地址 '/inspection-system/sysStaff/loginStaffInfo'
创建 inspectionSyste 的文件夹
在 inspectionSyste 文件夹下创建 sysStaff 文件
通常情况 api方法 的命名是 api + 接口地址的最后一段 apiLoginStaffInfo

  export const apiList = (data: any) => {};
  export const apiAdd = (data: any) => {};
  export const apiDelete = (data: any) => {};
  export const apiDetail = (data: any) => {};
  export const apiExport = (data: any) => {};
  export const apiSave = (data: any) => {};

css命名

全局css app + 名称
组件css cp + 名称
组件内命名按照 文件名称 + _ + 变量
非必要情况一定一定一定不要使用 deep

.appPeople {} // 全局的人员class定义
.appW100_100 {} // 宽 100%
.appW100 {} // 宽 100px
.appMargin20 {} // margin 设置 上下左右20

.cpTable {} // table 组件

.user_top {} // user文件中top容器

images命名

规定每个成员的序号首字母不同，以及末尾递增
成员a img + 0001 img + 0002 img + 0003 …
成员b img + 1001 img + 1002 img + 1003 …
成员c img + 2001 img + 2002 img + 2003 …
优点确保名称唯一性，防止提交命名重复

编码风格

vue文件

// 引用顺序 vue -> 路由 -> ui框架 -> 组件 -> vuex -> 方法 -> ts -> 接口
// ❗注意：引用一定要放到最上面
<script setup lang='ts'></script>
import { reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { FormInstance, ElMessageBox, ElMessage } from 'element-plus';
import cpTable from '@/components/cpTable.vue';
import { useUserStoreWithOut } from '@/stores/modules/user'
import { dict_tf } from '@/utils/dict';
import { apiAdd } from "@/api/inspectionResource/resDeviceGet";

// 变量声明或者 方法调用 尽量按照业务模块与业务方法划分到一起
// 变量声明也可以全都放至上方
const userStore = useUserStoreWithOut();
const dictStore = useDictStoreWithOut();
const router = useRouter();
const refForm = ref<FormInstance>();
const userInfo = computed(() => userStore.userInfo || {});

// 方法顺序
// 获取字典 -> 业务方法 -> 详情 -> 关闭 -> 提交