我的代码规范分享

前言

本文总结了下我在前端开发过程当中编写JavaScript的一些习惯的代码规范，之前端开发背景为主，但有些规则也适用其余语言。同时此规范并不绝对，仅供参考。

命名规范

变量长度：
变量名不要太长，尽可能不超过5个单词，若太长可使用单词缩写

变量缩写：
变量缩写能够采用两种缩写方案：

1.使用单词前几个字母，能表述含义便可，控制在3-5个字母（具体长度自定）。如：

医院：hosp
医生：doc
选项：opt

2.若页面内同时出现“文档”和“医生”那么doc会冲突，能够适当增长长度或变换单词来区分。如：

文档：docs
医生：doct

3.使用单词的重音字母，令人能看到字母联想到单词。如：

产品：pdt
配置：cfg
检查：chk

函数命名

操做类函数：
通常使用动词，配合各种形容词，大体以下：
1.纯动词。如：

save()
delete()
close()

2.动词+名词。如：

保存医生：saveDoc()
删除医院：delHosp()
建立产品：createPdt()

3.动词+形容词+名词。如

删除选中的医生：delSelectDoc()
追加一个临时医院：appendTempHosp()
保存全部产品：saveAllPdt()

获取数据类函数：
统一使用get开头。如：

getDocList()
getDisablePdt()
getElementById(id)

从网络获取数据类函数：
统一使用load开头。如：

获取省份数据：loadProvince()
根据省份ID获取市区数据：loadCityByProvinceId(pid)
根据市区ID获取县数据：loadCountyByCityId(cid)

load与get的区别我的认为在于，get更通用，能够用于代码内部的数据处理逻辑，load更倾向于从远程加载。

事件响应函数：
on+(动词/操做)+元素+事件名。如

点击保存按钮：onSaveBtnClick()
点击添加按钮：onAddBtnClick()
当是否可用复选框变动时：onIsEnableChkChange()
头像图片鼠标移入时：onHeaderImgMouseEnter()

也能够是on+元素+(动词/操做/用途)+事件名。如

onBtnSaveClick()
onChkIsEnableChange()

看我的习惯便可。

虽然看上去略繁琐，但经过函数名自己，就能够完整的定位到此函数的用途。例如onIsEnableChkChange函数名：

1. 看到on开头，知道这是一个响应界面操做事件的函数
2. 看到isEnable，知道这是“是否可用”的功能的元素。
3. 看到chk，知道这是一个复选框checkbox元素的事件
4. 看到末尾的Change，知道这是一个change事件的响应函数
5. 综上，看到命名，就能够联想到网页上有一个 名叫xxx是否可用的复选框，这是点击了这个复选框后的事件

变量命名

变量单词链接符：
不使用单词链接符，使用小驼峰式命名。如

btnSaveClick

布尔值类型变量：
统一使用is开头。如

是否可用：isEnable
是否选中：isCheck
是否删除：isDelete

集合类型变量：
统一使用List结尾。如

食品列表：foodList
医生列表：docList
已选产品列表：selectPdtList

数组循环体内临时变量：
若循环体代码量少，或仅一行lambda表达式，则可简写 doc或d, pdt或p
循环体代码量大时，或嵌套循环时，尽可能使用Item结尾。如docItem, pdtItem
不强制要求，仅为区分层级关系

字典变量：
统一使用Dic（Dictionary）结尾，如

openWithDic
exeDumpDic

枚举集合：
统一使用Enum（Enumeration）结尾。如

医生类型枚举：docTypeEnum
产品状态枚举：pdtStatusEnum
服务器状态码枚举：serverCodeEnum

枚举项：
建议使用全大写，使用下划线链接单词，与常量规则一致。如

服务器返回值失败：serverCodeEnum.ERROR
服务器返回值成功：serverCodeEnum.SUCCESS

jQuery变量：
建议使用$开头，或J_开头，风格统一便可。

$saveBtn
J_saveBtn

函数变量：
建议使用Fn或Cb结尾，标明此变量为函数指针。如

钩子函数：hookFn
响应回调函数：responseCb
回调函数：callback

常量：
统一使用全大写字母，单词用下划线链接。如

MAX_SIZE
TIME_OUT

类（Class）构造函数：
统一使用大驼峰式命名。如

ListView
DataTable
TableView

类私有属性：
若是未使用TypeScript或其余强类型语言，即若没有使用带有访问修饰符（public，private等）的语言开发，应该经过变量名自己便可区分是私有属性仍是公开属性。
私有属性以及私有函数，应统一如下划线开头。如

_data
_pdtList
_getData()
_setData()

目的在于给与类的使用者能够经过变量区分，哪些是可使用的公开属性和方法，哪些不该该使用的私有属性以及不该该调用的私有方法。

组件事件命名：
1.统一使用on开头。如

onClick(e)
onSubmit(e)

2.关键流程类事件，应提供after事件和before事件，以onBefore和onAfter开头。如

准备提交前事件：onBeforeSubmit
提交后事件：onAfterSubmit
准备展开前事件：onBeforeExpand
删除后事件：onAfterDel

3.属性/状态变动类事件，应以on开头，changed结尾。如

check属性变动时事件：onCheckedChange
select属性变动时事件：onSelectedChange
产品状态变动时事件：onPdtStatusChange

代码建议

1. 善用变量缓存
2. 重复使用屡次的字符串必须缓存
3. 善用枚举变量，减小后期维护成本
4. 类方法应所有挂载到原型对象
5. 不该该使用类私有全局变量，应使用类静态变量
6. 尽可能减小闭包代码，以减小可能会出现的问题的几率
7. 应坚持“先定义，后使用”的规范。以减小js默认的定义提高的坑
8. 整个代码应该应只有一个入口函数，即建立一个init函数，来执行全部初始代码，而不是整篇代码随定义，随执行
9. 事件绑定类函数应放在同一处执行，减小维护成本
10. 善用#region 建立代码块，不一样功能的代码归类，初始化类，事件绑定类，界面交互类，纯数据处理工具类等。
11. 模块类文件，全部导出变量应所有定义在尾部。方便查阅
12. 尽量不建立全局变量，不注册全局事件，为后期方便转型为单页应用
13. 尽可能将代码纯数据逻辑与界面交互逻辑分开，方便后期写测试用例
14. 尽可能将全部变动定义放置在 文件/函数 内顶部
15. 善用try catch和throw Error
16. 不要在数组内存放不一样类型的数据，一个数组应只存放一种数据类型变量，方便强类型识别与纠错
17. 尽量不要建立类数组变量
18. 尽量不使用eval、with
19. 多写注释！推荐jsdoc风格注释，方便一键抽取注释生成代码文档
20. 推荐使用flowjs或ts等类型描述语言来约束、规范、纠错和智能感知。

附：关于js中的对象、字典与枚举的关系

以上我的经验在组内分享时，有同窗提出疑问：

为何会有字典变量，以及枚举变量，这从本质上不都是Object对象么？

关于这个问题我是这么理解的，在js中确实对象是最强大的，任何在其余语言当中的相似对象的数据结构，在js里均可以是对象。但也正由于如此宽泛，让咱们的使用过程当中会产生一些疑惑或误解，才须要对各类的对象作分类。
因此回过头来再说对象，字典与枚举的关系。

他们的相同点：
他们都是键值对集合（KeyValuePair）
他们的Key都不能重复

他们的不一样点：
对象：
对象的的Key能够是字符串类型或数值类型。若是同时包含这两种就类数组对象，好比document.getElementBy...系列函数的返回值：HTMLCollection，再好比HTML元素的子元素集合：NodeList，以及HTML元素的属性值：NamedNodeMap，等都是类数组对象。
对象的Value的类型，能够是任意类型。并且是在一个对象变量中的Value均可以是任意类型，如JSON对象。

字典：
而字典的Key必定是字符串类型的（其余语言中不是，受限于js语言），字典的Value也能够任意类型，但在一个字典对象变量中的全部Value必定是相同类型，也就是说字典实际上是个Object<string, TValue>。
例：好比前面刚刚提到的HTML元素的attributes属性值：NamedNodeMap，就是应该一个典型的字典对象：它属于Dictionary<string, Attr>。
可是奇葩的是NamedNodeMap也支持数组下标式访问，因此它同时也是一个List<Attr>，在js里只能归结于他是类数组对象的范畴内了。


枚举：
而最后的枚举对象的范围会更小，枚举的值通常为基本数据类型，在其余语言中甚至只能是数值类型。
例如，定义一个枚举对象用于一组常量：

// 服务器接口返回值状态码枚举
var serverCodeEnum = {
    SUCCESS : 0,
    ERROR : 1,
    XXXXX : 2,
    XXXXX : 3,
}

TypeScript中的枚举变量

在TypeScript为了照顾js语言的平常使用，把enum关键字的编译后代码作成了双向访问的类数组对象。
也就是既能够用过名称得到数值，也能够经过数值得到名称。使用很是方便：

【TypeScript代码中的枚举】
enum ownerTypeEnum {
    public = 0,
    private
}

【编译为JS后的代码】
var ownerTypeEnum;
(function (ownerTypeEnum) {
    ownerTypeEnum[ownerTypeEnum["public"] = 0] = "public";
    ownerTypeEnum[ownerTypeEnum["private"] = 1] = "private";
})(ownerTypeEnum || (ownerTypeEnum = {}));

// 效果：
// ownerTypeEnum.private -> 1
// ownerTypeEnum[1] -> "private"

最后

此类文章很是容易引战，因此再次声明以上仅我的习惯以及经验的分享，每一个人都有本身的习惯，无论采用哪一种习惯其实均可以。 至少应该在组内，或是某项目内的全部成员都采用相同的一套规范，作到见名知意。