一、编程规约
（一）命名规范
1. 函数
- 命名方法：小驼峰（作为类使用大驼峰，不建议使用函数作为类来使用，请直接使用es6+的class）
- 命名规范：前缀应为动词
- 命名建议：可使用常见动词约定
| 动词 | 含义 | 返回值 |
|---|---|---|
| can | 判断是否可执行某个动作(权限) | 函数返回一个布尔值。true：可执行；false：不可执行 |
| has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值 |
| is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值 |
| get | 获取某个值 | 函数返回一个非布尔值 |
| set | 设置某个值 | 无返回值，返回是否设置成功或者返回链式对象 |
| load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |
2. 变量
每个局部变量都需要有一个类型前缀
| 前缀 | 含义 | 事例 |
|---|---|---|
| s | 表示字符串 | sName、sHtml |
| n | 表示数字 | nPage、nTotal |
| b | 表示逻辑 | bChecked、bHasLogin |
| a | 表示数组 | aList、aGroup |
| r | 表示正则表达式 | rDomain、rEmail |
| o | 表示对象 | oDiv、oButton |
（二）注释规范
- 大区块分割必须有注释
- 待完善或未实现，必须添加“TODO”
- 超过100行复杂功能实现，必须有注释，可分逻辑标注
（三）HTML规范（Vue Template同样适用）
- 使用h5的语义化标签
- 标签中必须使用双引号，而不是单引号
- 自定义标签使用大驼峰标签，尽量使用单标签
（四）CSS规范
1. 属性书写顺序
尽量使用缩写属性，并且能省略的尽量省略，提高代码可读性及编译高效性
| 属性类型 | 例证 | 优先级 |
|---|---|---|
| 位置属性 | position, top, right, z-index, display, float等 | ☆☆☆☆☆ |
| 大小 | width, height, padding, margin | ☆☆☆☆ |
| 文字系列 | font, line-height, letter-spacing, color- text-align等 | ☆☆☆ |
| 背景 | background, border等 | ☆☆ |
| 其他 | animation, transition等 | ☆ |
2. 类选择器命名
- 使用中横线来连接长名称，而不是使用“_”下划线来连接
- 命名可使用“模块-功能-附加（如：状态等）”来命名
（五）LESS规范
- 避免嵌套过多
- 多使用循环等逻辑语句
- 注意和css中部分函数的区别，如：rgb
（六）Sass/Scss规范
- 避免嵌套过多
- 多使用mixin进行相关的组合
（七）JavaScript规范
- eslint的standard规范
- es6+规范
- vscode可使用prettier插件
（八）TypeScript规范
- tslint的standard规范
- 避免any的使用
- 多使用泛型、interface、type等js不常见的功能
- 使用DDD（领域驱动设计）的模式进行相关设计
二、React项目规范
- 符合各自项目使用模板方案规范，如：antd pro、ice等
- React 版本>= 16.8，使用 React Hooks 进行现代化前端开发
- 注意符合tsx或jsx语法
三、Vue项目规范
- 符合各自项目使用模板方案规范，如：vue cli、vue-element-admin等
- 使用符合vue开发的模式，vue2使用option API，vue3使用composition API
- vue3多使用自定义hook进行功能开发，建议使用类组件模式开发，更贴合的jsx或者tsx
