一、常规规范
属性顺序
eslint规定的格式要求，开启eslint自动校验模式，自动修正
id / class 命名规则
① 首先根据内容命名,如 header footer
② 若根据内容无法找到合适的命名,再结合行为表现进行辅助, e.g. col_main blue_box
③ 名字一律小写，使用下划线命名法，可基于最近的父元素名称作为前缀
④ 在不影响语义的情况下,可适当使用缩写,但是缩写只用来表示结构, e.g. col nav btn etc. ,避免自编.
⑤ 避免广告拦截词汇 e.g. ad ads adv banner sponsor gg guangg guanggao etc.
二、CSS 规范
① 标注关键性注释
② PC端使用px，移动端统一使用rem（100px -> 1rem）
三、 JS 规范
语言规范
① 声明变量须使用 let或const 关键字.避免使用 var
② 优先使用箭头函数
③ 使用模板字符串取代连接字符串
④ 避免出现简写方式，如：
if（true） return false;H5使用分号
① 如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG
命名规范
① 变量名/参数名/属性: 使用下划线命名法 如 name_id
② 函数名/方法: 使用小驼峰命名法 如 getData()
③ 功能模块: 使用大驼峰命名法 如 CollectFace，内部文件使用小驼峰命名
④ 杜绝完全不规范的缩写，避免望文不知意。（如：condition 缩写成 condi）
⑤ 为达到见名知意，使用尽量完成的单词组合来表达其意，如：
· 查询类的方法用get做前缀（如：getBatchData）
· 新增的方法用add做前缀
· 删除的方法用delete做前缀
· 修改的方法用update做前缀
声明
① 在函数的开始应先用 let 关键字声明函数中要使用的局部变量
② 注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释
回调函数规范
① 回调函数统一使用 Promise 函数,回调成功的参数统一为 response,错误参数为 error
② 每个函数之间用一个空行分离结构
数据绑定变量定义规范
① 所有涉及到数据绑定的变量均需在 data 中初始化.禁止在不定义的情况下直接 setData,或者出现 undefined
② 涉及到数据绑定的变量写 data 中
四、组件规范
① 公用组件夹需以大驼峰式命名，组件内部文件默认index.vue.
② 组件标签在 page 页面使用时推荐使用单闭合标签,包含 slot的组件除外
③ 组件引用时，components中使用大驼峰，template中引用使用小驼峰
五、标点规范
① JS 中一致使用反引号 ` 或单引号 ‘’ , 不使用双引号
② WXML CSS JSON 中均应使用双引号。
六、注释声明
文件头声明
vscode安装【koroFileHeader】插件，并在扩展配置文件（settings.json）中，配置如下：
>>>
"fileheader.customMade": { // 头部注释
"MoudelName": "模块名称",
"Company": "Copyright(c)2021因沃特科技.Allrightsreserved",
"Author": "XWJ",
"CreateDate": "Do not edit",
"LastEditors": "XWJ",
"LastEditTime": "Do not edit",
"Description": "file content",
},
"fileheader.cursorMode": { // 头部注释
"description": "",
"param": "params",
"return": ""
},
"fileheader.configObj": {
"createFileTime": true,
"createHeader": true,
"autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
"autoAlready": true, // 默认开启
"prohibitAutoAdd": [
"json",
"md"
], // 禁止.json .md文件，自动添加头部注释
"wideSame": false, // 设置为true开启
"wideNum": 13 // 字段长度 默认为13
}
>>>
代码内注释
① 独占一行的变量，注释紧随其后，否则于变量上方注释
② 函数注释于其上方，参数注释紧随其后
③ 复杂逻辑判断处应标注说明
七、VUE前端规范
组件命名规范
官方文档推荐及使用遵循规则：
PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定
可查阅官方文档： Vue-js 组件命名
① 组件名应该始终是多个单词的，根组件 App 除外
② 有意义的名词、简短、具有可读性
③ 命名遵循 PascalCase 约定
公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）
页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
④ 使用遵循 kebab-case 约定
在页面中使用组件需要前后闭合，并以短线分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）
⑤ 导入及注册组件时，遵循 PascalCase 约定
⑥ 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。
methods命名规范：
① 驼峰式命名；统一使用动词或者动词+名词形式
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 聚集；
4651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
