前端代码规范

# 前端代码规范

# 一、文件夹、文件命名(除 vue 组件外)

使用小写字母， - 连接符例如： intelligence-analysis

# 二、组件命名

使用大驼峰命名例如：文件命名： IntelligenceAnalysis.vue 组件命名： IntelligenceAnalysis

文件名称和组件名称相同

# 三、变量命名

使用小驼峰命名，符合语义化
布尔类型可加前缀 can、has、is
复数加 s 私有变量：名称前加单个下划线 _

# 四、常量命名

使用大写字母，下划线拼接，例如：TEST_DATA

# 五、函数命名

使用小驼峰命名动词+名词形式

尽量使用箭头函数例如：getUserList handleFormatTime
构造函数使用大驼峰

函数方法常用的动词:

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 六、类命名、类文件名

# 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: {},
})

1
2
3
4
5
6
7
8
9
10
11

# 2、interface 命名

interface 以大写 I 开头 eg: IStorePatentAnalysis

export interface IStoreIntelligenceAnalysis {
  name: string
}

1
2
3

# 3、enum 命名

enum 以 Enum 结尾 eg: RequestEnum

/**
 * @description: request method
 */
export enum RequestEnum {
  GET = 'GET',
  POST = 'POST',
  PUT = 'PUT',
  DELETE = 'DELETE',
}

1
2
3
4
5
6
7
8
9

# 八、组件

建议代码尽量控制在 500 以内，具体视情况而定
建议通用组件使用defineComponent方式编写组件；

<script lang="ts">
export default defineComponent({
    name: 'demo',
    props: ['data']
    //...
    setup(props, context){
        return {
            // ...
        }
    }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12

业务组件使用setup-script方式

<script setup lang="ts">
const props = defineProps({data: ''})
</script>

1
2
3

# 九、css 规范

统一使用中划线命名法，可以使用简称，避免单词过长，如：nav、info-name(information)、unit-intro(introduction)
尽量使用英文命名，为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀。如 nav-item，避免过长，建议最多拼接 3 次
样式一般写单页面内，代码行数过多时，建议在页面级文件夹下单独创建 style.less 文件
style 文件夹下
- base.less——初始化原生默认样式
- main.less——公共常用样式
- var.less——定义常用样式变量值

# 十、代码注释规范

按照 JSDoc (opens new window) 规范执行

块注释

/**
 * @desc xxx
 * @param { number } xx
 * @author xxx
 * @return { array } xx
 */

1
2
3
4
5
6

# 十一、图标库使用规范

在 iconfont-企业知识库 (opens new window) 选定对应的图标(复制 SVG 代码)
图片在项目以组件形式，统一放在项目 src 下面的 icons 目录下，命名与图标库类名一致

注意：

1、命名必须为英文，见名知意

2、正确拼写单词

# 十二、代码安全管理规范

温馨提示：每天下班前，提交一次代码

#代码规范

最近更新时间： 2023/07/14 16:54:29