- 前置条件：
1、程序员是懒惰的。
2、属于【强制】的，必须遵守，属于【建议】的，根据个人情况编写代码。但是需要有个认知，语法糖的使用，是让程序员偷懒。
3、争取格式都统一，方便团队内部维护同一份代码。至于新旧语法的使用，不强求一定使用新语法，要求遇到不懂的新语法上网查阅或者询问原作者。
- 零、vue文件结构相关（可一起探讨决定）
1、【建议】建议在一个vue文件中完成HTML，JavaScript，style代码的编写，这样的话IDEA会帮忙匹配对应的方法入口，以及标注对应的变量。
2、【强制】业务代码处理数据不允许禁用eslint检查。暂时能想到的只有个别工具类中用到不检查。
- 一、变量相关：
1、【强制】命名必须准确，尽量在4个单词以内描述清楚该变量含义。减少“name”，“id”的独立字段存在，局部变量当中应当指明是departmentName或者companyId。
反例：
避免指代不清楚的变量，此处是公共组件获得部门信息
正例：
2、【强制】vue实例的data中，属于该vue页面的全局变量，由this.xxx调用，需要加上注释，除非是很通用的属性，如searchCondition或pagination。
同时应当根据具体属性分组，避免一个data中包含太多一级属性值。
反例：
正例：
3、【建议】vue实例的data中，定义完一级属性之后，如果属于对象类型的，建议在该属性后面将涉及到的子属性完整列出，方便查看数据结构。
反例：
讨论：数组是否有必要设置？
4、【建议】除非是专有名词的缩写，否则使用英文的时候，开启idea英文单词检查，不要出现错误的单词。
反例：
5、【强制】以下情况的变量命名结构统一（未完待续 ）
①ref拥有唯一性，单个vue文件内不允许重复。定义的时候在命名之后加“Ref”标志
ref=“clearingFormRef” ref="editClearingModalRef”
类似mybatis中的refid，同个命名空间内，给sql语句赋值唯一标识，提供别处调用。
②布尔值的变量，遵循动词+名词的格式，构成一个持续性的动作。也可在之前增加is、if
loadingClearingList isLoadingClearing isEditModalVisible
③属于表单的变量使用Form结尾，对应的校验规则使用FormRules结尾
clearingForm clearingItemFormRules
④（建议）使用console的时候，写清楚当前打印的是什么信息
console.info('fetch salary list response', res);
二、方法相关：
1、【强制】方法名由动词＋名词组成，用来描述是如何处理（动词）某个数据（名词）。
对比代码：
2、【强制】一个方法做一件事，如果有重复的逻辑可以单独抽出另一个方法统一调用。原则上不允许一个方法处理不同类型的业务。
反例：
上方代码中，点击不同的input框进入同个方法，然而方法内部的逻辑与两个调用之间，并没有完全匹配type值。
3、【强制】方法参数不能超过5个，且参数名称需要准确，属于局部变量的命名方法
反例：
4、切忌过度封装，一两句话可以解决的代码，没必要跳转到别的地方再重新判断后运行
反例：
实际效果：this.$message({ options });
- 三、代码注释
1、【强制】属于vue实例的data变量，建议增加注释
2、【强制】方法之上增加注释，除非方法名已经很明确，且方法体内容很直观的。
说明：使用单行注释或者多行注释均可，大部分情况下单行注释即可
3、【强制】方法内业务操作，涉及分支判断的，增加注释
- 四、vuejs写法
1、【强制】代码不允许超过idea规定的每行字数，由一条竖线标识，默认配置为120个字符，如果是HTML标签内容很多，缩进很多的，允许适当超出范围。
2、【强制】template代码中，开始标签和结束标签如果不在同一行的，将标签对齐。
3、【强制】组件标签带多个属性导致折行显示的，将每个属性显示在一行内，有设置ESLint格式化的可以直接格式化。
4、关于v-for循环中key的设置，现在增加了eslint检查，所以问题不大
5、关于element-ui的使用，主要是文档的查看，已知的有el-select的误用，以及disable属性重复使用的问题。
反例：
此处涉及HTML基础知识。
6、关于computed计算属性和watch监听属性的使用，理解一个“A属性影响B属性”即可。computed对应B属性，需要return的结果，所以不能有异步回调。watch对应A属性，可以有异步的操作。
例如：data中有人民币金额cnyAmount【页面动态修改】及美元金额usdAmount【只做展示】。
computed对应的是计算结果usdAmount，watch的是发生变化的cnyAmount，伪代码如下图
7、财务部系统，已经确认的是切换每页条数的时候，将页码设置为1
a、之前几乎所有切换每页条数的都没设置，fiweb已经全面排查过一次。
b、不用单独监听“上一页”“下一页”的事件
反例：
正例：
8、关于常见的input框只能输入某些类型的数据，通过正则设置，以下为两种使用场景（如果配合校验规则的话，有model值同步的bug，可以随时探讨交互方式）
①input框只能输入中文，非中文的都不会显示到上面
|
②input框什么都可以输入，但是输入后过滤出中文字符
|
9、关于日期组件，中间变量的使用方式：
场景：日期组件用来配置日期区间的时候，组件记录值为null（无值）或者数组（有值），而后端使用开始时间和结束时间两个字段接收。
反例：需要用到日期时再取值，可能引起不必要的判断，以及多个地方使用的时候都要重新赋值。
建议：直接在中间变量变化的时候，将最终条件字段同步更新上来。
五、细节建议（可探讨）
1、后端相关，接口定义的时候，应该明确接口的入参出参。尽量避免一个方法操作太多逻辑。
1.1、关于从列表到详情页或者编辑页，现在普遍的用法是从列表单行数据跳转到详情页，其实不可取
a、列表就是缩略信息，详情页才是完整信息
b、应该只有id到详情页，然后详情页发起请求
c、详情页的完整数据，假设最上方是主表字段，下方跟着其他关联表的信息，建议一个接口搞定所有的数据，用大VO的概念封装返回值。
2、前端相关，必要的时候才发起请求，由于接口已经确定，接口数据结构应该是确定的，如果是都不变化的数据，不用重复向后台请求。
3、程序员如何偷懒，使用各种语法糖减少代码：
a、变量不想多写，所以有对象解构。es6.ruanyifeng.com/#docs/destr…
// ES5
const name = company.name;
const id = company.id; const companyCode = company.code;// ES6
const { id, name, code: companyCode } = company;b、不想写function单词，所以以下两个eat，drink方法都是一样的效果。
const man = { name: "zhangsan", eat: function(){ console.info(1) }, drink() { console.info(2) }}c、想自由传递this对象，可以用箭头函数 es6.ruanyifeng.com/#docs/funct…
// ES5
const that = this;setTimeout(function(){ console.info(that);}, 0);// ES6 箭头函数
setTimeout(() => { console.info(this);}, 0);
d、不想写for循环处理数据，可以用forEach（无返回值），map（有返回值），filter（过滤数据）
4、关于多层的if影响代码阅读
a、将处理逻辑抽成独立的方法。
b、将else的情况提前判断之后return。
反例：
正例：
5、关于第三方库的使用，个人已知的是momentjs处理时间和日期，lodash处理对象或数组数据。
6、关于async、await用法，以及回调函数实现js中的异步逻辑。（根本原因：js是单线程的）
①最早是ajax请求，成功的回调，失败的回调，在回调里面发起第二个请求。
②generator工具，生成递归的状态机判断几个请求按顺序完成。
③Promise状态机（axios，fetch）。
7、建议在每个vue页面的created钩子中增加一行打印本vue文件的名字，方便排查线上问题。
