前端命名规范及常用命名整理

转载 已于 2022-06-12 13:03:29 修改 · 1w 阅读 · 143 ·
CC 4.0 BY-SA版权
原文链接：https://cn.vuejs.org/v2/style-guide/
文章标签：

#前端 #vue.js #javascript

于 2022-05-05 22:36:17 首次发布
本文详细阐述了Vue组件的命名规则，从基础组件、紧密耦合组件到自闭合组件，并介绍了路由路径、数据处理函数和变量命名的最佳实践。同时涵盖了JavaScript命名规范，如常量、变量和函数命名，确保代码可读性和一致性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

思维导图

在这里插入图片描述

基本命名准则

  1. 贴合业务
  2. 简洁、语义化，能够英文释义
  3. 始终保持一种命名方法。项目中可能多人协同开发，而命名方式有多种都是可行的，进行开发时应保持原来代码命名风格

常用命名方法

  1. Pascal命名法：所有单词的首字母都大写，其他字母小写
  2. Camel命名法：除首字母外，其他单词的首字母大写，其他字母小写
  3. 下划线命名法：单词与单词间用下划线做间隔
  4. kebab-case：横线连接

Vue命名规范

自定义指令

v-开头，后面跟小写,基本上单个单词

组件

单文件组件文件

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

components/
|- TheHeading.vue
|- TheSidebar.vue
紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
自闭合组件

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
  
<!-- 在 DOM 模板中 -->
<my-component></my-component>
模板中的组件名

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
  
<!-- 在 DOM 模板中 -->
<my-component></my-component>

<!-- 在所有地方 -->
<my-component></my-component>
JS/JSX 中的组件名

JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。

Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}
完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
引用组件时

禁止使用别名，模板内组件标签名遵循html 标签命名规范，或者使用组件名

组件名必须避免使用Vue保留标签名(包括HTML标签和Vue内部标签)
组件文件和组件

使用相同的名字

store

Store 中的Module

使用“小驼峰命名法”

Store 中的Mutation

使用 全部大写的下划线命名法

Store 中的state/getters/action

使用“小驼峰命名法”

路由路径

path

小写

name

大驼峰

component

大驼峰

JS命名规范

常量

全部大写，使用大写字母和下划线来组合命名，下划线用以分割单词，语义化，布尔值前缀应为is（is+动词）

变量

  1. 小驼峰，前缀名词
  2. 临时变量
swapData: '临时交换数据',
tempData: '临时数据',
dataSnapshot: '数据快照'
  1. 特殊变量
  • 'ID’在变量名中全大写
  • 'Android’在变量名中大写第一个字母
  • 'iOS’在变量名中小写第一个，大写后两个字母
var thisIsMyName;

var goodID;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

数组

单词复数（options、maps、entities、collections）或者以有列表含义单词单数结尾

img

Boolean

不同场景选择不同命名方式

可见性状态（组件显示场景）

is+动词（现在进行时）/形容词

isShow：是否显示
isVisible：是否可见
isLoading：是否处于加载中
isConnecting：是否处于连接中
isValidating：正在验证中
isRunning：正在运行中
isListening：正在监听中
属性状态（实体属性）

形容词

disabled：是否禁用
editable：是否可编辑
clearable：是否可清除
readonly：只读
expandable：是否可展开
checked：是否选中
enumberable：是否可枚举
iterable：是否可迭代
clickable：是否可点击
draggable：是否可拖拽
配置项（功能开启）

allow、with、enable、no等动词为前缀的小驼峰

//是否带选项卡
withTab
//不带选项卡
withoutTab
//开启过滤
enableFilter
//允许自定义缩放
allownCustomScale
//是否清除
shouldClear
//是否能选中元素
canSelectItem
//不显示label后面的冒号
noColon
//检查Js
checkJs

自定义事件

动词过去式+Event

//分配事件
assignedEvent
//关闭事件
closedEvent
//标签事件
labeledEvent
//锁事件
lockedEvent
//部署事件
deployedEvent

函数

命名方式

小驼峰式命名法。

命名规范

前缀应当为动词。

事件处理
  1. 原生事件 on开头
  2. 自定义事件 handle开头
//提交表单
onSubmit
//处理分页页数改变
handleSizeChange
//处理分页每页大小改变
handlePageChange
//按下键
onKeydown
异步函数

根据curd划分为get｜set、fetch｜delete、remove｜update｜add、create前缀

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
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 聚集
路由跳转

to、go开头

//跳转到模版详情页面
toTplDetail
//导航到首页
navigateToHome
//跳转首页
jumpHome
//跳转首页
goHome
//重定向到登录页
redirectToLogin
//切换Tab选项卡
switchTab
//回到主页
backHome
数据处理
  1. 获取数据用get或者query
  2. 格式化数据有format、convert、toggle、inverse、pharse、flat等
//根据ID获取数据元素
getItemById
//根据传入的已选列表ID来获取列表全部数据
getItemsBySelected
//根据UID查询用户
queryUserByUid
//格式化日期
formatDate
//转换货币单位
convertCurrency
//反转数据列表
inverseList
//切换所有已选择数据状态
toggleAllSelected
//解析XML数据
parseXml
//展开选择数据
flatSelect
//按降序排序
sortByDesc
方法参数
  1. 新旧value
oldVal
newVal
  1. 上一个，下一个，当前
  2. 异步数据返回
  3. 一些使用不多，但是在编程时约定成俗的命名方式。例如
  • ch 表示单个字符，
  • str 表示字符串,
  • n 代表次数,
  • reg 表示正则,
  • expr 表示表达式,
  • lens 表示数组长度,
  • count 表示数量,
  • p 表示数据的精度,
  • q 表示查询(query),
  • src 表示数据源(source),
  • no 表示数字(number),
  • rate 表示比率,
  • status 表示状态,
  • bool 表示布尔值,
  • arr 表示数组值,
  • obj 表示对象值,
  • x 和 y 表示坐标两轴,
  • func 表示函数,
  • ua表示User Agent,
  • size 表示大小,
  • unit 表示单位, hoz 表示水平方向, vert 表示垂直方向, radix 表示基数

构造函数

  1. 命名方式：大驼峰式命名法，首字母大写
  2. 命名规范：前缀为名称。
  3. 公共属性和方法：跟变量和函数的命名一样。
  4. 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。

其他

  1. 原则上公有接口的命名为首字母大写，私有接口的命名为首字母小写
  2. 使用单引号定义字符串
  3. 不要混用tab和space，或在一处使用多个tab或space
  4. 对上下文this的引用只能使用’_this’, ‘that’, 'self’其中一个来命名
  5. 行尾不要有空白字符
  6. switch的falling through和no default的情况一定要有注释特别说明
  7. 不允许有空的代码块

HTML命名规范

标签语义化

  • 头部：header
  • 内容：content/container
  • 尾部：footer
  • 导航：nav
  • 侧栏：sidebar
  • 栏目：column
  • 整体布局：wrapper
  • 左右中：left / right / center
  • 标签页：tab
  • 文章列表：list
  • 栏目标题：title

标签名和属性名

  1. 所有的标签名和属性应该都为小写，属性值应该使用双引号闭合
  2. 给所有的关键元素定义元素的id和class，便于和CSS、JavaScript交互
  3. alt标签不为空

CSS命名规范

id

采用小驼峰式

class

命名规范
  1. 使用小写字母，以中划线分隔
  2. 为了避免class命名的重复，命名时取父元素的class名作为前缀
  3. 如果class名称仅作为JavaScript调用的“钩子”，则可在名称中添加“js”前缀
  4. 使用语义化方法替代结构化方法
  5. 要使用可以反应元素目的和用途的名称，或其他通用的名称。
常用命名
页面结构
  • 容器: container
  • 页头：header
  • 内容：content/container
  • 页面主体：main
  • 页尾：footer
  • 导航：nav
  • 侧栏：sidebar
  • 栏目：column
  • 页面外围控制整体布局宽度：wrapper
  • 左右中：left right center
导航
  • 导航：nav
  • 主导航：mainbav
  • 子导航：subnav
  • 顶导航：topnav
  • 边导航：sidebar
  • 左导航：leftsidebar
  • 右导航：rightsidebar
  • 菜单：menu
  • 子菜单：submenu
  • 标题: title
  • 摘要: summary
功能
  • 标志：logo
  • 广告：banner
  • 登陆：login
  • 登录条：loginbar
  • 注册：regsiter
  • 搜索：search
  • 功能区：shop
  • 标题：title
  • 加入：joinus
  • 状态：status
  • 按钮：btn
  • 滚动：scroll
  • 标签页：tab
  • 文章列表：list
  • 提示信息：msg
  • 当前的: current
  • 小技巧：tips
  • 图标: icon
  • 注释：note
  • 指南：guild
  • 服务：service
  • 热点：hot
  • 新闻：news
  • 下载：download
  • 投票：vote
  • 合作伙伴：partner
  • 友情链接：link
  • 版权：copyright

scss

scss中的变量、函数、混合、placeholder采用驼峰式命名。

连接符（采用BEM）

  1. 短横线- ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。（自己用的）
  2. __ 双下划线：双下划线用来连接块和块的子元素
  3. _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

img

img

BEM

  1. block+element+modifier
  2. 命名模式 .block {} .block__element {} .block–modifier {}
  3. 场景：明确关联性的模块关系
  4. 避免深层嵌套
  5. 公共的单独样式，就不用写成BEM

其他

  1. 样式声明的顺序按字母顺序排序，不考虑浏览器前缀
  2. 命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
  3. 不允许通过1、2、3等序号进行命名
  4. 主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名
  5. 选择器避免使用标签名
  6. 去除小数点前面0，且为0时不带单位
  7. 根据语义和DOM树的层级关系来定义合适的名称
  8. 尽量使用缩写属性

项目命名规范

小写，单词之间_隔开，my_project_name

文件命名规范

小写开头、驼峰命名

css文件

  • 主要的 master.css
  • 布局，版面 layout.css
  • 专栏 columns.css
  • 文字 font.css
  • 打印样式 print.css
  • 主题 themes.css

目录命名规范

全小写

Git命名规范

分支branch

git 分支分为集成分支、功能分支和修复分支，分别命名为 develop、feature 和 hotfix，均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。

  • master（主分支，永远是可用的稳定版本，不能直接在该分支上开发）
  • develop（开发主分支，所有新功能以这个分支来创建自己的开发分支，该分支只做只合并操作，不能直接在该分支上开发）
  • feature-xxx（功能开发分支，在develop上创建分支，以自己开发功能模块命名，功能测试正常后合并到develop分支）
  • feature-xxx-fix(功能bug修复分支，feature分支合并之后发现bug，在develop上创建分支修复，之后合并回develop分支。PS:feature分支在申请合并之后，未合并之前还是可以提交代码的，所以feature在合并之前还可以在原分支上继续修复bug)
  • hotfix-xxx（紧急bug修改分支，在master分支上创建，修复完成后合并到 master）

提交记录commit

type

feat: 新特性，新功能

fix: 修改问题

docs: 文档修改

style: 代码格式修改, 注意不是 css 修改

refactor: 代码重构

chore: 其他修改, 比如构建流程, 依赖管理

scope

-l 修改内容只影响一个功能模块

-m 修改内容影响两个及以上模块

-g 修改内容会影响所有模块

subject：

使用 “动词+名词” 结构，简短文件修改部分的内容。eg. feat -g 新增系列直播

常用实体命名

基础命名

标题: title

摘要: summary

箭头： arrow

商标： label

网站标志： logo

转角/圆角： corner

横幅广告： banner

子菜单： subMenu

搜索：search

搜索框： searchBox

登录： login

登录条：loginbar

工具条： toolbar

下拉： drop

标签页： tab

当前的： current

列表： list

滚动：scroll

服务： service

提示信息： msg

热点：hot

新闻： news

小技巧： tips

下载： download

栏目标题： title

热点： hot

加入： joinus

注册： regsiter

指南： guide

友情链接： friendlink

状态： status

版权： copyright

按钮： btn

合作伙伴： partner

投票： vote 左/右/中：left/right/center

简介：profiles

评论：comment

ID命名

页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾&