| 刘心瑜、刘金萍、王慧敏、魏孟皓、彭从豪、齐继超、许敏、轩梦文、曹荣、项烀焜、刘晓娟 | | 下期找茬 | 架构治理平台 |

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

自测清单：2022 前端工程师上线自测清单 （v22.7.8）
https://www.yuque.com/docs/share/758bf2d8-275c-48b1-83d8-1c8771972722

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

找茬案例
优化代码片段一

// not good
<div class="power" v-show="isShowPower">
  ...
</div>
// good
<div class="power-name" v-show="isShowPower">
  ...
</div>

该代码存在以下规范问题：
4.2.1 命名 【强制】类名使用小写字母，以中划线分隔

找茬案例
优化代码片段二

// not good
<div class="first-content">
  <el-button
    style="
      float: right;
      width: 120px;
      margin-top: -35px;
    "
    v-show="isShowFirst"
    @click="changeMode"
    >清空搜索内容</el-button
  >
</div>
// good
<div class="first-content" style="clear: both;">
  <el-button
    style="
      float: right;
      width: 120px;
      margin-top: -35px;
    "
    v-show="isShowFirst"
    @click="changeMode"
    >清空搜索内容</el-button
  >
</div>

该代码存在以下规范问题：
【推荐】如果一个元素要浮动，那么它的祖先一定要有高度，有高度的盒子，才能关住浮动

找茬案例
优化代码片段三

// not good
<p>
  <span style="font-size: 16px; font-weight: bold">一级域名称 </span>
</p>
// good 
<h4>一级域名称</h4>

该代码存在以下规范问题：
4.7.8 语义化标签 【推荐】在页面的标题部分使用

标签，不需要给它们加多余的样式；

找茬案例
优化代码片段四

// not good(多次使用一个颜色)
<div v-show="isShowFirst" style="color: #409eff; font-size: 14px">
  {{ firstFind[0] }}
</div>
// good(定义全局less文件颜色，在组件中引入样式)
  //定义less文件
  @primaryColor:#409eff
  //在组件中引入样式
@import '@/static/custom.less'
<div v-show="isShowFirst" style="color: @primaryColor; font-size: 14px">
  {{ firstFind[0] }}
</div>

该代码存在以下规范问题：
4.2.1 命名 【强制】less中的变量、函数、混合等采用驼峰命名

找茬案例
优化代码片段五

// not good
if (this.currentThirdIndex == index) {
  return { active: this.isShowColor };
}
// good
if (this.currentThirdIndex === index) {
  return { active: this.isShowColor };
}

该代码存在以下规范问题：
4.3.8 语法 【推荐】使用 === 代替 ==，！==代替！=（==会自动进行类型转换，可能会出现奇怪的结果）

找茬案例
优化代码片段六

// not good
<div
  :class="[showFirstColor ? 'front-box' : 'later-box']"
  @click="powerShow"
>
  业务能力清单
</div>
//样式
.front-box,
.later-box {
  margin: auto;
  font-size: 20px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
}
.front-box {
  color: #409eff;
}
.later-box {
  color: #000;
}
// good
<div
  :class="['identical-box',showFirstColor ? 'front-box' : '']"
  @click="powerShow"
>
//样式
.identical-box{
  margin: auto;
  font-size: 20px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  color: #000;
  &.front-box {
    color: #409eff;
  }
}

该代码存在以下规范问题：
【推荐】样式优化&选择器

找茬案例
优化代码片段七

// not good
.second-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
  font-size: 14px;
  div {
    width: 20%;
    line-height: 20px;
    font-size: 14px;
  }
}
// good
.second-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
  font-size: 14px;
  .name {
    width: 20%;
    line-height: 20px;
  }
}

该代码存在以下规范问题：
【推荐】标签选择器，字体行高会继承

找茬案例
优化代码片段八

// not good
.el-divider {
  margin: 8px 0px;
  border-top: 1px solid #e6ebf5;
}
// good
将element-ui样式单独写一个less文件引入
import style from '@/css/element.less'

该代码存在以下规范问题：
【推荐】element-ui最好写在单独文件引入