Aquí hay una convención de nomenclatura en código para "Tathagata Palm"✋

prefacio

La mayor parte de un proyecto lo completa un equipo.Si no hay una especificación de código unificado, entonces el código de todos será diferente. En la mayoría de los casos, no es que haya algoritmos complejos o lógica compleja en el programa, pero leer el código de otras personas es realmente una molestia. El estilo uniforme hace que el código sea mucho más legible, y las personas se sentirán muy familiares cuando vean cualquier fragmento de código. Obviamente, el código estandarizado es muy beneficioso y necesario en el desarrollo cooperativo del equipo .

En el proceso de CodeReview en la empresa de pasantías, el autor descubrió que su conocimiento normativo de la escritura de código estaba lejos de ser suficiente. Consultó muchos materiales y, con la ayuda de su mentor y varios socios, hizo muchas rectificaciones de código. Para esto Por esta razón, especialmente escribo un artículo sobre convenciones de nomenclatura, con la esperanza de ayudar a los recién llegados a desarrollar el hábito de las convenciones de código lo antes posible.

Directrices básicas

negocio en forma
Conciso, semántico, capaz de explicar en inglés.
Mantenga siempre un método de nomenclatura. Puede haber varias personas en el proyecto para desarrollar en colaboración, y varios métodos de nomenclatura son factibles.El estilo de nomenclatura del código original debe mantenerse durante el desarrollo.

Método de nomenclatura común

Nomenclatura de Pascal: mayúscula la primera letra de todas las palabras, minúsculas todas las demás letras
Nomenclatura de camello: escriba en mayúscula la primera letra de las palabras, excepto la primera letra, y minúsculas otras letras
Nomenclatura de guiones bajos: use guiones bajos para separar palabras
kebab-case: conexión de línea horizontal

1. La primera aparición de la luz de Buda - HTML

La luz de Buda en el estilo de la mano inicial puede hacer que el enemigo quede ciego temporalmente; al mismo tiempo, el oponente flotará en la ingravidez, lo que dificultará su resistencia. Al final, todo está arreglado.

El nombre de la etiqueta integrada está en minúsculas, cerrado correctamente y el componente se nombra en mayúsculas y minúsculas.
```
    <header></header>
    <MyComponent></MyComponent>    ｜｜     <MyComponent />
复制代码
```
Los atributos personalizados comienzan con datos-
```
    <li data-msg='xxx'></li>
复制代码
```
No use selectores de identificación si no es necesario (para evitar conflictos)
Varias especificaciones de una etiqueta
- Agregue el atributo de título a la etiqueta
- <a>El atributo href de la etiqueta debe escribirse con la dirección del enlace, si no la hay, agregue javascript:;

HTTP adaptativo

En las páginas HTTP, las solicitudes se envían mediante HTTP y en las páginas HTTPS, las solicitudes se envían mediante 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. Lámpara de Buda de cúpula dorada - CSS

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

Use minúsculas para id y clase
El nombre del estilo no puede contener ad, guanggao, ads, gg, que son las palabras clave del significado del anuncio, para evitar que la página web amplíe el elemento y lo bloquee el complemento.
Los selectores evitan anidar más de tres niveles
Los valores de atributo entre 0-1 omiten el 0 inicial
La fuente no debe tener menos de 12 px, la palabra reutilizar usa números y el color no usa palabras para nombrar
Especificación BEM
- 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 数据处理

Obtener datos con get o query
Los datos formateados incluyen format, convert, toggle, inverse, pharse, flat, etc.

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

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

7. El Buda celestial viene al mundo - con un capítulo adicional de nombres

estructura de la pagina

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

navegación

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

Características

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

forma

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

datos

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

cuadro de notificación

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

navegación

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

Nombres de componentes comunes

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

fin

De hecho, la Palma Tathagata tiene un total de nueve estilos, pero debido a que la fuerza interna del autor no es suficiente, actualmente solo ha practicado el quinto estilo. Si te gusta, dale manita arriba y ¡adelante!