前端代码规范

前端代码规范

一、文件夹、文件命名(除 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、类命名（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 规范

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

十、代码注释规范

按照 JSDoc 规范执行

块注释

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

十一、图标库使用规范

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

注意：

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

2、正确拼写单词

十二、代码安全管理规范

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