前端命名规则规范


1、项目命名:全部采用小写方式,以短横线分隔。(kebab-case:短横线连接)
示例:user-management-system

2、目录命名:参照项目命名规则,有复数结构时,文件名加s。
示例:assets、images、icons、plugins、components、utils、views

3、页面目录命名/组件目录命名:camelCase(小驼峰)
示例:shoppingCar / userManagement

4、组件命名:PascalCase(大驼峰)、kebab-case(短横线连接)

  • 功能+组件+具体功能,全称不缩写;
  • 无子级内容的或者未使用插槽的使用单标签;
  • 和父组件紧密耦合的子组件以父组件名作为前缀命名;

封装基本组件:BaseButton.vue/HeadSearch.vue/AppIcon.vue/my-component.vue
封装子级组件:TodoList.vue/TodoListItem.vue/TodoListItemButton.vue

使用:<BaseButton />(单文件组件)  
           <base-button></base-button>(DOM模板)

5、props命名:声明使用camelCase,模板使用kebab-case

6、事件命名:全小写 kebab-case

7、图像文件命名: Snake方式(下划线连接) 
示例:login_bg.png / download_btn.png

8、css、js文件命名:全部采用小写方式,优先选择单个单词命名,多个单词命名以短横线分隔

9、api命名:变量命名要与尽可能与模块保持一致
示例:addUsers: (params) => post("/users", params),

10、变量命名:camelCase(类型 + 对象描述或属性的方式)、复数加s
示例:let itemId = ''

11、常量命名:全部大写下划线分割(使用大写字母和下划线来组合命名,下划线用以分割单词)
示例:const MAX_COUNT = 0

12、方法命名:camelCase(统一使用动词或者动词 + 名词) 
示例:getListData、postFormData 

函数方法常用的动词:

can 、has、is / 是否
get 获取 / set 设置
init、refresh / 初始化
add、append、insert、create / 增加、插入、创建
remove、delete / 删除
view / 查看
edit、modify、update / 编辑、修改 、更新
destory 销毁
select 选取 / mark 标记
load 写入 / save 保存
submit 提交 / commit 交付
enter 进入 / exit 退出
start 开始 / finish 完成
begin 开始 / end 结束
open 打开 / close 关闭,
import 导入 / export 导出
split 分割 / merge 合并
inject 注入 / extract 提取
bind 绑定 / separate 分离
copy 复制 / paste 粘贴
undo 撤销 / redo 重做
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 同步
lock 锁定 / unlock 解锁
check out 签出 / check in 签入
push 推 / pull 拉
expand 展开 / collapse 折叠
abort 放弃 / quit 离开
obsolete 废弃 / depreciate 废旧
collect 收集 / aggregate 聚集

13、构造函数/类的命名:大驼峰式命名法,首字母大写,前缀为名称

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值