业务代码必须要做的事情

# 业务代码必须要做的事情

> 我是一名开发工程师，主要工作就是给公司业务部门写代码，做前端多一点，写出来的功能直接面向一线业务人员。几年来由负责的项目经过了多次大的流程变更。其中收获也有不少。现在我来分享一下，我对手头的迭代的几个个系统业务生命周期的感受进行一些分享，希望能帮到你。

## 持续重构

> 代码写完是有成就感的。每次当你跑完测试用例后，或者测试同学告诉你，功能 ok 了，往往你会，开始下一波需求功能的开发（对于`code review`有待加强的组，往往是这样的。）。

> 一两个月后，一回头，如果不是`IDE`里面有提示`committer`显示是自己，或许那一刻就口吐芬芳了。

此刻你就需要开启你的*持续重构*操作了，以前端为例

1. 重复出现的属性使用 es6 中的 `...`操作符号,

频繁出现的字段属性，非常有必要提取出来，局部出现就在局部提，多个文件存在就提取到公共部分

```js

const baseParams = {

userName: "objectivezt",

userId: "23"

};

const requestParams = {

...baseParams,

requestId: "XXXX"

};

```

如果你还没有封装 `Table` 组件的话，标签属性你可以先这样玩。

```jsx

import React, { Component } from "react";

import { Table } from "antd";

const commonTableProps = {

bordered: false,

size: "small",

showHeader: false

};

export default class Demo extends Component {

render(){

return(<><Table {...commonTableProps}></>)

}

}

```

2. 重复出现的的业务`Select`可以提取成独立的业务组件

好处：

1. 一处编写，处处使用。业务中有很多`Form`里面`Select`选项是经常反复出现的。

2. 充分利用状态管理和数据持久化，在初次加载时候他存入了 Store 中，后续就不会在反复请求这类接口了

3. 减少业务主操作界面代码，往往这类数据会需要请求后台那一串代码，在组件中后就省了

### 如何去发现重复的代码呢 ？

> 这里推荐一款静态检查工具 [sonarqube](https://www.sonarqube.org/)

> 通过这款工具生成的报告可以查看代码中重复的区块。

### 优缺点

> 当代码量不大的时候，可不直接进行处理重复代码块，建议一个重复代码区块，出现 3 次以及以上的时候进行处理。

> 重复代码处理需要协调开发周期时间等情况，任何变更都需要确保业务的正常进行。

> 复杂业务逻辑旧代码的处理，建议最好能在业务变更时期进行一起处理，系统测试资源充足时候处理。

## 配置代码静态检查

> 对于新入行、应届生同事, 代码中有静态检查对于他们对提升是很有裨益的。

以[eslint](https://eslint.org/) 这个工具结合[vscode](https://code.visualstudio.com/), 可以 find 一些代码问题，以及自动修复他。有利于新人养成良好的代码习惯。

这里推荐使用[eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)的规则。

每个对应的规则[rules](https://eslint.org/docs/rules/)都可以找到为什么这样做的官方解释和最佳实践,也可以根据`rules`进行夯实基础。