Here is a code naming convention for "Tathagata Palm"✋

foreword

Most of a project is completed by a team. If there is no unified code specification, then everyone's code style will be different. In most cases, it's not that there are complex algorithms or complex logic in the program, but reading other people's code is really a pain. The uniform style makes the code much more readable, and people will feel very familiar when they see any piece of code. Obviously, standardized code is very beneficial and necessary in the cooperative development of the team .

In the process of codeReview in the internship company, the author found that his normative awareness of writing code was far from enough. With reference to a lot of materials, with the help of the mentor and several partners, he made many code rectifications. For this reason, I specially Write an article about naming conventions, hoping to help latecomers to develop the habit of code conventions as soon as possible.

Basic Guidelines

Fit business
Concise, semantic, able to explain in English
Always maintain a naming method. There may be multiple people in the project to develop collaboratively, and various naming methods are feasible. The original code naming style should be maintained during development.

Common naming method

Pascal nomenclature: capitalize the first letter of all words, lowercase all other letters
Camel nomenclature: capitalize the first letter of words except the first letter, and lowercase other letters
Underscore nomenclature: use underscores to separate words
kebab-case: horizontal line connection

1. The First Appearance of Buddha Light - HTML

The Buddha's light in the start-hand style can make the enemy temporarily blind; at the same time, the opponent will float up in weightlessness, making it difficult to resist. In the end, everything is settled.

The built-in tag name is lowercase, closed correctly, and the component is named in big camel case.

    <header></header>
    <MyComponent></MyComponent>    ｜｜     <MyComponent />
复制代码

Custom attributes start with data-

    <li data-msg='xxx'></li>
复制代码

Don't use id selectors if not necessary (to avoid conflicts)
Several specifications of a label
- Add the title attribute to the a tag
- <a>The href attribute of the tag must be written with the link address, if there is none, add javascript:;

HTTP Adaptive

On HTTP pages, requests are sent using HTTP, and on HTTPS pages, requests are sent using HTTPS.


<a href="//cf.qq.com/main.shtml">进入官网</a>

//图片SRC

<img src="//game.gtimg.cn/images/cf/web201610/logo.png">

//JS链接

<script src="//ossweb-img.qq.com/images/js/title.js"></script>
复制代码

2. Golden Dome Buddha Lamp - CSS

起手式催动一个小火球，正式出手时释放大火。掌力惊人的同时，更可以在对方体内释放佛火。

Use lowercase for id and class
The style name cannot contain ad, guanggao, ads, gg, which are the keywords of the advertisement meaning, to avoid the element being expanded by the webpage and blocked by the plug-in
Selectors avoid nesting more than three levels
Attribute values between 0-1 omit the leading 0
The font should not be less than 12px, the word reuse uses numbers, and the color does not use words to name
BEM specification
- B表示Block 一般用于组件的最外层
```
    .form
复制代码
```
- E表示Element，Block元素下的元素(使用双短下划线连接)
```
    .form__button
复制代码
```
- M表示Modifiler，修改B/E层级的某个样式，某个属性(使用双短横线连接)
```
   .from__button--disabled
复制代码
```
- ⚠️ 公共的单独样式，就不用写成BEM

三、佛动山河-JS篇

首四式里最具威力的一招，没有什么特别的技巧。

函数、变量统一使用小驼峰命名
常量全部大写，多个单词之间使用_下划线连接
```
    const MAX_AGE = 199;
复制代码
```
类中的私有函数或者私有变量使用_下划线开头，例如_name

命名尽量精准，不使用太过宽泛的词作为后缀

getUserPosts
// bad 含义过于宽泛，不精确
getUserData
getUserInfo
复制代码

确定好上下文，存在上下文的情况下，无歧义避免冗余

Class Employee { 
    constructor (name) {    
    // good    
    this.name = name;    
    // bad 因为本身就处在 Employee 这个上下文中，信息冗余    
    this.employeeName = name; 
    }
} 
// 这里在 name 前加 employee 是有必要的，因为已经脱离了 Employee 这个上下文
const employeeName = new Employee('gavin').name; 
复制代码

保持动词的一致性

 // 常用的动词有get set read create add update reset delete remove等。
   getQuestion
   getUserPosts
   getUsers
   // bad 有很多近意动词，选一个一直用，不要变来变去
   getQuestion
   returnUsers
   retrieveUsers
复制代码

函数或方法名尽量采用动词或判断性词汇

getFullYear() // 取值
toString() // 转换
isArray() // 判断
复制代码

Boolean 值的命名，一般采用js，has，can，need开头

描述状态

 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
复制代码

四、佛问迦蓝-Vue篇

起手式释放梵音，可使敌人暂时失聪，然后打出正式攻击。

单一规范，使用小驼峰or短横线命名

组件名不使用缩写

// 错误
components/
|- sd-settings.vue
|- u-prof-opts.vue

// 正确
components/
|- student-dashboard-settings.vue
|- user-profile-options.vue
复制代码

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
```
  components/
  |- TheHeading.vue
  |- TheSidebar.vue
复制代码
```

.基础组件使用特定前缀开头

// 错误
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正确
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
复制代码

单词顺序

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

// 错误
 components/
 |- ClearSearchButton.vue
 |- RunSearchButton.vue
 |- SearchInput.vue

 // 正确
 components/
 |- SearchButtonClear.vue
 |- SearchButtonRun.vue
 |- SearchInputQuery.vue
复制代码

props

在子组件html中传入prop的为 kebab-case格式，子组件接收方采用 camelCase 格式。

// 错误
 <welcome-message greetingText="hi"/>

 props: {
 'greeting-text': String
 }

 // 正确
 <welcome-message greeting-text="hi"/>

 props: {
   greetingText: String
 }
复制代码

组件事件名

统一使用 kebab-case 格式，并且以动词结尾。

 // 正确
 this.$emit('dom-resize');
 this.$emit('api-load');
复制代码

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
```
 components/
 |- TodoList.vue
 |- TodoListItem.vue
 |- TodoListItemButton.vue
复制代码
```
VueX
- Store 中的Module 使用“小驼峰命名法”
- Store 中的Mutation 使用全部大写的下划线命名法
- Store 中的state/getters/action 使用“小驼峰命名法”
Router
- path 小写
- name 大驼峰
- component 大驼峰

五、迎佛西天-Git篇

出手时恍若有多条手臂，可以以一人之力全方位攻击对手。

5.1 分支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）

5.2 提交记录commit

type

feat: 新特性，新功能

fix: 修改问题

docs: 文档修改

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

refactor: 代码重构

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

scope

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

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

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

subject：

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

六、佛光普照-其他

掌气幻化为巨大的佛座莲台，将敌我双方包围其中，可凭借花瓣反弹掌力，不但不会消散，反而增强掌力、掌速；如果对手击碎莲花，更能借机由平面攻击进阶为立体攻击，本人也将快如佛光。

6.1 文件命名

不得有空格
使用短横线命名 todo-list / index.vue
某些特殊文件采用全大写例如 README

6.2 项目名称

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

6.3 基础命名

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 聚集
复制代码

6.3 数据处理

Get data with get or query
Formatted data include format, convert, toggle, inverse, pharse, flat, etc.

//根据ID获取数据元素
getItemById
//根据传入的已选列表ID来获取列表全部数据
getItemsBySelected
//根据UID查询用户
queryUserByUid
复制代码

//格式化日期
formatDate
//转换货币单位
convertCurrency
//反转数据列表
inverseList
//切换所有已选择数据状态
toggleAllSelected
//解析XML数据
parseXml
//展开选择数据
flatSelect
//按降序排序
sortByDesc
复制代码

7. The Heavenly Buddha Comes to the World - with a bonus naming chapter

page structure

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
复制代码

navigation

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
复制代码

Features

标志：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
复制代码

form

Radio 单选框
Checkbox 多选框
Input 输入框
InputNumber 计数器
Select 选择器
Cascader 级联选择器
Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Rate 评分
ColorPicker 颜色选择器
Transfer 穿梭框
Form 表单
复制代码

data

Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像
Skeleton 骨架屏
Empty 空状态
Descriptions 描述列表
Result 结果
复制代码

notification box

Alert 警告
Loading 加载
Message 消息提示
MessageBox 弹框
Notification 通知
复制代码

navigation

NavMenu 导航菜单
Tabs 标签页
Breadcrumb 面包屑
PageHeader 页头
Dropdown 下拉菜单
Steps 步骤条
复制代码

Common component names

Dialog 对话框
Tooltip 文字提示
Popover 弹出框
Popconfirm 气泡确认框
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Timeline 时间线
Divider 分割线
Calendar 日历
Image 图片
Backtop 回到顶部
InfiniteScroll 无限滚动
Drawer 抽屉
复制代码

end

In fact, the Tathagata Palm has a total of nine styles, but because the author's internal strength is not enough, he has only practiced the fifth style at present. If you like it, give it a thumbs up and go!