前端组代码来找茬20220623（第三期）

代码来找茬

遵循规范：2022 前端工程师开发规范手册（v22.6.16） https://www.yuque.com/docs/share/6f0825ad-6d9f-4d70-bbd1-ca1a4b5c694c

找茬规则

• 每周四轮流对一个项目进行代码Reivew
• 成员可对项目进行相互找茬，找出可优化的代码片段
• 遵循规范给出调整建议并指出规范问题
• 案例留档整理

  找茬案例

  找茬者-刘心瑜

  优化代码片段一 ``` // not good

// good

该代码存在以下规范问题：<br />4.4.13【强制】可简写指令需要缩写 (用 `:` 表示 `v-bind:` 和用 `@` 表示 `v-on:`) 
<a name="G2iZF"></a>
#### 找茬者-刘金萍
优化代码片段一

// not good

// good

该代码存在以下规范问题：<br />4.2.1【强制】类名使用小写字母，以中划线分隔
优化代码片段二
```json
// not good
import Network from '@/components/stellarMap/Network.vue'
export default {
  components: {
    Network,
  },
// good
import NetWork from '@/components/stellarMap/Network.vue'
export default {
  components: {
    NetWork,
  },

该代码存在以下规范问题：
4.4.3【推荐】应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V
4.4.语法【强制】模版中的组件名大小写在单文件组件和字符串模板中组件名应该总是 PascalCase 的；但是在 DOM 模板中总是 kebab-case 的

优化代码片段三

// not good
let sessionData = JSON.parse(_sData)
// good
let sessionData = JSON.parse(_sData);

该代码存在以下规范问题：
4.3.1【强制】以下几种情况后需加分号;

• 变量声明
• 表达式
• return
• throw
• break
• continue
• do-while

  找茬者-魏孟皓

  优化代码片段一 ```vue // not good { type: ‘value’, axisLabel: { formatter: ‘{value} %’, }, splitLine: { lineStyle: { color: ‘#2D3A4E’, }, }, },

// good { type: ‘value’, axisLabel: { formatter: ‘{value} %’, }, splitLine: { lineStyle: { color: ‘#2d3a4e’, }, }, },

该代码存在以下规范问题：<br />4.2 【强制】十六进制值应该全部小写，例如，#f3f6fa
<a name="l4UJL"></a>
#### 找茬者-许敏
优化代码片段一
```javascript
// not good 
<orga :orgid="msg" flag="task" @updata="closeTaskOrga"></orga>
// good 
<orga :org-id="msg" flag="task" @updata="closeTaskOrga"></orga>

该代码存在以下规范问题：
【强制】父子组件传值使用 kebab-case写法
优化代码片段二

// not good 
const nameFilter = (rule, value, callback) => {
    console.log('ppp');
    if (value.trim() === '') {
        callback(new Error('任务名不能为空'));
    } else {
        callback();
    }
};
// good 
const nameFilter = (rule, value, callback) => {
    if (value.trim() === '') {
        callback(new Error('任务名不能为空'));
    } else {
        callback();
    }
};

该代码存在以下规范问题：
【推荐】慎用 console.log，因 console.log 大量使用会有性能问题