# 命名规范

# 最佳原则

坚持制定好的代码规范。

无论团队人数多少，代码应该同出一门。

如果你想要为这个规范做贡献或觉得有不合理的地方，请联系架构设计组相关成员。

# 文件结构命名

# 项目命名

• 全部采用小写方式， 以中划线分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

# 目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数

正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例： script / style / demo_scripts / demoStyles / imgs / docsels

# 【特殊】VUE 的项目中的 components 中的组件目录，使用 PascalBase 命名

正例： HeadSearch / PageLoading

反例： head-search / page-loading / authorized / notice-icon

# 【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名

正例： page-one / shopping-car / user-management

反例： ShoppingCar / UserManagement

# HTML文件命名

参照项目命名规则。

例：error-report.html

# CSS, SCSS文件命名

参照项目命名规则。

例：retina-sprites.scss

# JS文件命名

参照项目命名规则。

例：account-model.js

# CSS, SCSS类命名

• 类名使用小写字母，以中划线分隔
• id采用驼峰式命名
• scss中的变量、函数、混合、placeholder采用驼峰式命名
• ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
$colorBlack: #000;

/* 函数 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

# JavaScript命名

# 变量命名

• 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束（除了对象的属性外，主要是考虑到cgi返回的数据） 反例： name / name / name$
• 'ID'在变量名中全大写
• 'URL'在变量名中全大写
• 'Android'在变量名中大写第一个字母
• 'iOS'在变量名中小写第一个，大写后两个字母
• 常量全大写，用下划线连接
• jquery对象必须以'$'开头命名
• 对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

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

// not good
var body = $('body');

// good
var $body = $('body');

# 函数命名

• 普通行数，使用驼峰命名法
• 构造函数，大写第一个字母
• 不要给inline function命名；
• 其中 method 方法命名必须是 动词 或者 动词+名词 形式:

正例：saveShopCarData /openShopCarInfoDialog

反例：save / open / show / go

function doSomething(item) {
    // do something
}
// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

# 附： 函数方法常用的动词:

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 聚集

# 命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。

说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。 注意，即使纯拼音命名方式也要避免采用。

正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

# 杜绝完全不规范的缩写，避免望文不知义：

非人尽皆知的缩写会带来沟通成本

反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

// bad analy这个缩写在火眼中出现了无数次
analyData = 'someThing' // .....
 
// good 现在编译器能通过单词的一部分来自动提示。长的命名并不会带来任何的坏处
// 而且所有的变量都会在代码压缩后变成无意义的字母
analyzeData = 'Nerf this'

# 避免用一个字母命名，让你的命名可描述：（除了 map, reduce, filter 等高阶函数）

// bad
function q() {
  // ...
}
// good
function query() {
  // ...
}