前端代码规范
一、文件夹、文件命名(除 vue 组件外)
使用小写字母， - 连接符 例如： intelligence-analysis
二、组件命名
使用大驼峰命名 例如：文件命名： IntelligenceAnalysis.vue 组件命名： IntelligenceAnalysis
- 文件名称和组件名称相同
三、变量命名
- 使用
小驼峰命名，符合语义化 - 布尔类型可加前缀 can、has、is
- 复数加 s
私有变量：名称前加单个下划线_
四、常量命名
使用大写字母，下划线拼接，例如：TEST_DATA
五、函数命名
使用小驼峰命名 动词+名词 形式
尽量使用箭头函数
例如：getUserListhandleFormatTime构造函数使用
大驼峰函数方法常用的动词:
can/has/is/ 返回布尔值时使用
handle 处理
get 获取/set 设置,
add 增加/remove 删除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
六、类命名、类文件名
1、类命名（api 接口参考）
使用大驼峰命名
class PersonalCenterApi extends BaseAPI {
}
api 接口：
- 文件：业务 +Api.ts
- 类名： 业务 +Api
2、类文件名
PersonalCenterApi.ts
七、store、interface、enum 命名
1、store 命名
store 以 use 开头 + 业务名称 + store eg : useIntelligenceAnalysisStore
import {
defineStore } from 'pinia'
import type {
IStorePatentAnalysis } from './types'
export const usePatentAnalysisStore = defineStore({
id: 'patent-analysis',
state: (): IStorePatentAnalysis => ({
name: '',
}),
getters: {
},
actions: {
},
})
2、interface 命名
interface 以大写 I 开头 eg: IStorePatentAnalysis
export interface IStoreIntelligenceAnalysis {
name: string
}
3、enum 命名
enum 以 Enum 结尾 eg: RequestEnum
/**
* @description: request method
*/
export enum RequestEnum {
GET = 'GET',
POST = 'POST',
PUT = 'PUT',
DELETE = 'DELETE',
}
八、组件
建议代码尽量控制在 500 以内，具体视情况而定
建议通用组件使用
defineComponent方式编写组件；
<script lang="ts">
export default defineComponent({
name: 'demo',
props: ['data']
//...
setup(props, context){
return {
// ...
}
}
})
</script>
- 业务组件使用
setup-script方式
<script setup lang="ts">
const props = defineProps({
data: ''})
</script>
九、css 规范
- 统一使用中划线命名法，可以使用简称，避免单词过长，如：nav、info-name(information)、unit-intro(introduction)
- 尽量使用英文命名，为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀。如 nav-item，避免过长，建议最多拼接 3 次
- 样式一般写单页面内，代码行数过多时，建议在页面级文件夹下单独创建 style.less 文件
- style 文件夹下
- base.less——初始化原生默认样式
- main.less——公共常用样式
- var.less——定义常用样式变量值
十、代码注释规范
按照 JSDoc 规范执行
块注释
/**
* @desc xxx
* @param { number } xx
* @author xxx
* @return { array } xx
*/
十一、图标库使用规范
- 在 iconfont-企业知识库 选定对应的图标(复制 SVG 代码)
- 图片在项目以组件形式，统一放在项目 src 下面的 icons 目录下，命名与图标库类名一致
注意：
1、命名必须为英文，见名知意
2、正确拼写单词
十二、代码安全管理规范
温馨提示： 每天下班前，提交一次代码
