个人代码规范分享

变量长度：
变量名不要太长，尽量不超过5个单词，每个单词尽量试用缩写，缩写尽量不超过5个字母

变量缩写：
变量缩写可以采用两种缩写方案：

使用单词前几个字段，能表述函数即可，控制在3-5个字母。

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

若页面内同时出现“文档”和“医生”那么doc会冲突，可以适当增加长度或变换单词来区分，如文档docs，医生doct

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

产品：pdt 配置：cfg 检查：chk 函数命名

操作类函数：
一般使用动词，配合各类形容词，大致如下：

纯动词。如：

save(), delete(), close()

动词+名词。如：

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

动词+形容词+名词。如

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

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

getDocList() getDisablePdt()

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

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

也可以是on+元素+(动词/操作/用途)+事件名。如

onBtnSaveClick() onChkIsEnableChange()

看个人习惯即可。

虽然看上去略繁琐，但通过函数名本身，就可以完整的定位到此函数的用途。例如onIsEnableChkChange函数名：

看到on开头，知道这是一个响应界面操作事件的函数

看到isEnable，知道这是“是否可用”的功能的元素。

看到chk，知道这是一个复选框checkbox元素的事件

看到末尾的Change，知道这是一个change事件的响应函数

综上，看到命名，就可以联想到网页上有一个 名叫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()

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

组件事件命名：

统一使用on开头。如

onClick(e) onSubmit(e)

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

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

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

check属性变更时事件：onCheckedChange select属性变更时事件：onSelectedChange 产品状态变更时事件：onPdtStatusChange 代码建议

善用变量缓存

重复使用多次的字符串必须缓存

善用枚举变量，减少后期维护成本

类方法应全部挂载到原型对象

不应该使用类私有全局变量，应使用类静态变量

尽量减少闭包代码，以减少可能会出现的问题的概率

应坚持“先定义，后使用”的规范。以减少js默认的定义提升的坑

整个代码应该应只有一个入口函数，即创建一个init函数，来执行所有初始代码，而不是整篇代码随定义，随执行

事件绑定类函数应放在同一处执行，减少维护成本

善用#region 创建代码块，不同功能的代码归类，初始化类，事件绑定类，界面交互类，纯数据处理工具类等。

模块类文件，所有导出变量应全部定义在尾部。方便查阅

尽可能不创建全局变量，不注册全局事件，为后期方便转型为单页应用

尽量将代码纯数据逻辑与界面交互逻辑分开，方便后期写测试用例

尽量将所有变更定义放置在 文件/函数 内顶部

善用try catch和throw Error

不要在数组内存放不同类型的数据，一个数组应只存放一种数据类型变量，方便强类型识别与纠错

尽可能不要创建类数组变量

尽可能不使用eval、with

多写注释！推荐jsdoc风格注释，方便一键抽取注释生成代码文档

推荐使用flowjs或ts等类型描述语言来约束、规范、纠错和智能感知。

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

以上个人经验在组内分享时，有同学提出疑问：

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